angular: platform-server errors with ivy-ngcc - UMD module - Angular 9.0.0-rc.7

🐞 bug report

Affected Package

The issue is caused by package @angular/platform-server

Is this a regression?

Yes, the previous version in which this bug was not present was: @angular/platform-server@9.0.0-rc.6

Description

When trying to compile my application with Ivy, I get errors on ivy ngcc for platform-server when compiling for umd bundles (for SSR)

πŸ”¬ Minimal Reproduction

Update any project to latest version of Angular (9.0.0-rc.7).

Add following config to angular.json:

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "media",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "bundleDependencies": "all",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }

Then run command:

ng run MyProject:server:production

πŸ”₯ Exception or Error


Compiling @angular/platform-server : main as umd
Hash: f0b9625353a4d2f5af81
Time: 12116ms
Built at: 12/23/2019 8:02:36 PM
  Asset      Size  Chunks  Chunk Names
main.js  1.75 KiB       0  main
Entrypoint main = main.js
chunk    {0} main.js (main) 28 bytes [entry] [rendered]

ERROR in Expected UMD module file (/node_modules/url/node_modules/punycode/punycode.js) to contain exactly one statement, but found [object Object],[object Object].

🌍 Your Environment

Angular Version:


Angular CLI: 9.0.0-rc.7
Node: 12.13.1
OS: win32 x64

Angular: 9.0.0-rc.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Ivy Workspace: Yes

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.900.0-rc.7
@angular-devkit/build-angular              0.900.0-rc.7
@angular-devkit/build-optimizer            0.900.0-rc.7
@angular-devkit/build-webpack              0.900.0-rc.7
@angular-devkit/core                       9.0.0-rc.7
@angular-devkit/schematics                 9.0.0-rc.7
@angular/cdk                               9.0.0-rc.5
@angular/fire                              5.2.1
@angular/google-maps                       9.0.0-rc.5
@angular/material                          9.0.0-rc.5
@angular/pwa                               0.900.0-rc.7
@ngtools/webpack                           9.0.0-rc.7
@nguniversal/module-map-ngfactory-loader   9.0.0-next.9
@schematics/angular                        9.0.0-rc.7
@schematics/update                         0.900.0-rc.7
rxjs                                       6.5.3
typescript                                 3.6.4
webpack                                    4.41.2

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 27 (21 by maintainers)

Commits related to this issue

Most upvoted comments

Issue not solved with Angular 9.0.0-rc.9.

Yes, the fix is included in v9.0.0-rc.11.

Thank you so much @petebacondarwin πŸ˜ƒ

I have done that already and the error goes away. But I want to verify that everything still works as expected at runtime and I am not sure how to do that for your app.

@gkalpak yes the backend is in .Net and that’s a separate repo. I tested it on my side and I can confirm that the issue has been resolved on runtime as well. Thank you so much for the quick fix πŸ˜ƒ

Looking forward to have it in next release.

I’m still having this issue with latest Angular 9.0.0-rc.8.

No, the fix hasn’t landed yet. This is the PR (which is still open): #34811

This is your problem @naveedahmed1 :

"@angular/compiler": "https://589268-24195339-gh.circle-artifacts.com/0/angular/compiler-cli-pr34811-38e9d9ef1a.tgz",

Notice that the URL refers to compiler-cli.

sure I can try that can you please guide how to use it?

You can find instructions on how to use them here. Basically, you just replace the versions in your package.json to point to the artifacts URL.

BTW I also added you to a private repository, if you could please use that to test it? Use npm run build:ssr to reproduce the error.

I have done that already and the error goes away. But I want to verify that everything still works as expected at runtime and I am not sure how to do that for your app.

It seems that this issue is caused by the recent changes related to UMD bundles in Angular 9.0.0-rc.7

https://github.com/angular/angular/pull/34356

https://github.com/angular/angular/commit/84a7d8a

https://github.com/angular/angular/commit/c26738d

Can confirm also experiencing this issue only from Angular 9.0.0-rc.7, did not exist in Angular 9.0.0-rc.6

Thx, @naveedahmed1. I took a look and there are actually two issues involved:

  1. @angular/platform-server imports Node.js’ built-in url module here. ngcc fails to recognize that this is the Node.js built-in and tries to process url package (which is a transitive dependency of the project and ends up in top-level node_modules/ via npm deduping).

  2. The url package dependes on the punycode package, whose main file is in the form ;(function(root) { ... }(this)); (which is neither CommonJS nor UMD). ngcc assumes that the file pointed to by a package.json’s main property will be in either CommonJS or UMD format. Given that punycode.js does not look like CommonJS, ngcc tries to parse it as UMD and it expects UMD files to be in format (function (factory) { ... })(function (...) { ... }); (and thus only have one top-level statement). However, the file has two top-level statements (one empty statement, followed by a parenthesized function call): ;(function(root) { ... }(this));

Having 100% static evaluation for the UMD format is probably out of scope for ngcc (as it would be quite complex/costly with all the different variations), so we have to rely on heuristics (which can’t be 100% accurate). Off the top of my head, here are some things we can improve:

  1. Teach ngcc to ignore Node.js built-in modules as dependencies.
  2. Do not assume that package.json > main points to either CommonJS or UMD. Improve our detection of the format main files and throw a more descriptive error for unsupported formats.

@gkalpak I have added you to a private repo and dropped you an email.