Skip to content

Library decorator metadata ReferenceError with SSR #37472

Closed

Description

@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

🔥 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!

Activity

  1. devversion commented on Jun 6, 2020

    @devversion
    Member

    @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).

  2. self-assigned this
    on Jun 6, 2020
  3. added this to the needsTriage milestone on Jun 6, 2020
  4. JohannesHuster commented on Jun 6, 2020

    @JohannesHuster
    Author

    @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.

  5. devversion commented on Jun 10, 2020

    @devversion
    Member

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

  6. angular-automatic-lock-bot commented on Jul 11, 2020

    @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.

  7. locked and limited conversation to collaborators on Jul 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

area: compilerIssues related to `ngc`, Angular's template compiler

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions