Library decorator metadata ReferenceError with SSR

[JohannesHuster]

🐞 bug report

Affected Package

I suspect @angular/compiler-cli. But it might also affect @angular/compiler, ng-packagr or @angular-devkit/build-ng-packagr.

Is this a regression?

Yes, I cannot reproduce the same behavior with a clean workspace created with @angular/cli version 8.0.2

Description

There is an open issue #30586 and a related PR #37382 that describe the error I am facing very well. However, if I am reading those descriptions correctly, that issue should not occur when using the CLI or ng-packagr. Please see #30586 (comment):

Everything currently works as expected within the CLI [...]

and #30586 (comment):

In the current state, where libraries still publish in View Engine, the CLI, ng-packagr, and angular/components have custom tooling that fix this issue [...]

In my case the error does happen with a published View Engine library and SSR, so I wanted to make you aware that there might be an additional issue. This could also be already fixed in an upcoming patch (see #37382 (comment)), if I am not reading too much into the part about re-enabling tsickle.

As mentioned in the linked issue #30586 (comment), this only happens when emitDecoratorMetadata is enabled. Also, when building the library the compiler throws an error with strictMetadataEmit enabled. With the current library schematic you have to change both defaults to reproduce the runtime error.

The mentioned defaults are in place since angular/angular-cli@6b28d3a for emitDecoratorMetadata and at least since angular/angular-cli@44086c6#diff-5c9bd7887460d6be81e59d58f93ec849 for strictMetadataEmit.

I don't know how common the use cases for enabling emitDecoratorMetadata in the current state are or how many older libraries just never changed this option, so I am not sure how common this issue is. I got here via manfredsteyer/angular-oauth2-oidc#773, but I don't know of other popular libraries having the same problem.

If documentation of the issue makes more sense than supporting this in version 9, I am happy to provide a PR for the docs.

Please feel free to close this issue, if I am only telling you things you already know 🙂

🔬 Minimal Reproduction

See Repo. I have added the dist folder, in case you don't even need to pull the repo that way.

• ng build my-lib --prod
• ng run my-app:serve-ssr (Same behavior with -c production)

Reproduction of the repo above

• ng new my-workspace
• ng g library my-lib
• ng g application my-app
• ng add @nguniversal/express-engine --clientProject my-app
• Apply something like JohannesHuster/decorator-metadata-error@713fc1e
• Apply JohannesHuster/decorator-metadata-error@3d6ad42

🔥 Exception or Error

.../dist/my-app/server/main.js:140435
    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Document])
                                                                                   ^

ReferenceError: Document is not defined
    at Module.../../node_modules/my-lib-published/__ivy_ngcc__/fesm2015/my-lib.js (.../dist/my-app/server/main.js:140435:84)
    at __webpack_require__ (.../dist/my-app/server/main.js:20:30)
    at Object../src/app/app.component.ts (.../dist/my-app/server/main.js:161543:12)
    at __webpack_require__ (.../dist/my-app/server/main.js:20:30)
    at Object../src/app/app.module.ts (.../dist/my-app/server/main.js:161909:25)
    at __webpack_require__ (.../dist/my-app/server/main.js:20:30)
    at Object../src/app/app.server.module.ts (.../dist/my-app/server/main.js:161949:22)
    at __webpack_require__ (.../dist/my-app/server/main.js:20:30)
    at Object../src/main.server.ts (.../dist/my-app/server/main.js:162019:27)
    at __webpack_require__ (.../dist/my-app/server/main.js:20:30)

A server error has occurred.
node exited with 1 code.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.7
Node: 12.16.1
OS: darwin x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.7
@angular-devkit/build-angular      0.901.7
@angular-devkit/build-ng-packagr   0.901.7
@angular-devkit/build-optimizer    0.901.7
@angular-devkit/build-webpack      0.901.7
@angular-devkit/core               9.1.7
@angular-devkit/schematics         9.1.7
@angular/cli                       9.1.7
@ngtools/webpack                   9.1.7
@nguniversal/builders              9.1.1
@nguniversal/common                9.1.1
@nguniversal/express-engine        9.1.1
@schematics/angular                9.1.7
@schematics/update                 0.901.7
ng-packagr                         9.1.5
rxjs                               6.5.5
typescript                         3.8.3
webpack                            4.42.0

Anything else relevant?

Thank you for the great work!

[devversion]

@JohannesHuster This is a TypeScript issue, but as you noted, we have a workaround in place for ng-packagr. The workaround does not work though when you have emitDecoratorMetadata enabled as we won't prevent TypeScript from emitting it's official metadata output.

You may want to disable emitDecoratorMetadata, or wait until we move forward with #37382 (which will also make it work with emitDecoratorMetadata).

[JohannesHuster]

@devversion Thanks for the super fast answer. I have opened a PR for removing emitDecoratorMetadata with the library in question and linked this issue so the maintainers are able to find your information on the problem.

I have misunderstood what the workaround is supposed to be doing. Thanks for clarifying! Since this is no regression in the workaround, I will close the issue.

[devversion]

@JohannesHuster Perfect. Thank you again for this great issue/analysis though!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}