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

[naveedahmed1]

🐞 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

[naveedahmed1]

@petebacondarwin @kara I am not sure but I believe it is similar to #31069

[gkalpak]

@naveedahmed1, I cannot reproduce the issue. Here is what I tried:

# Attempt 1
npm install --global @angular/cli@9.0.0-rc.7
ng new test-app --defaults
cd test-app
ng add @nguniversal/express-engine --client-project test-app
ng run test-app:server:production

# Attempt 2
rm -rf node_modules
npm install
# Copied your config from https://github.com/angular/angular/issues/34544#issue-541795169 into `angular.json`
ng run test-app:server:production

# Attempt 3
./node_modules/.bin/ngcc

In all cases above, the commands completed successfully and in the last one @angular/platform-server was compiled as UMD (saw Compiling @angular/platform-server : main as umd in the logs).

Can you, please, provide a minimal reproduction (e.g. a project we can check out and run) with specific instructions on how to reproduce the problem?

[naveedahmed1]

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

[gkalpak]

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.

[naveedahmed1]

Thank you so much @gkalpak for sharing the details. Let me also share that it works fine with Angular 9.0.0-rc.6 so if you could please also take a look at what exactly has changed in Angular 9.0.0-rc.7 that causes ngcc to throw this error.

[petebacondarwin]

BTW, we already ignore built-in modules: https://github.com/angular/angular/blob/master/packages/compiler-cli/ngcc/src/dependencies/dependency_resolver.ts#L149

[tayambamwanza]

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

[Gbuomprisco]

I'm experiencing a similar problem, caused by a dependency of https://github.com/ngneat/transloco.

In my case it happens when I run ngcc --properties es2015 browser module main as I am using --bundleDependencies false

Compiling @ngneat/transloco-utils : main as umd
Error: Error on worker #3: Error: Expected UMD module file (/Users/giancarlo/Lab/project/node_modules/@ngneat/transloco-utils/node_modules/cosmiconfig/dist/loaders.js) to contain exactly one statement, but found [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object].
    at UmdReflectionHost.getUmdModule (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/host/umd_host.js:61:27)
    at UmdReflectionHost.getModuleStatements (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/host/umd_host.js:113:34)
    at UmdReflectionHost.Esm2015ReflectionHost.findClassSymbols (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/host/esm2015_host.js:427:18)
    at DecorationAnalyzer.analyzeFile (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:139:55)
    at /Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:129:59
    at Array.map (<anonymous>)
    at DecorationAnalyzer.analyzeProgram (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:129:18)
    at Transformer.analyzeProgram (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:123:57)
    at Transformer.transform (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:69:27)
    at ClusterWorker.compile (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/main.js:162:42)
    at ClusterMaster.onWorkerMessage (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:158:27)
    at /Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:46:95
    at ClusterMaster.<anonymous> (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:238:57)
    at step (/Users/giancarlo/Lab/project/node_modules/tslib/tslib.js:136:27)
    at Object.next (/Users/giancarlo/Lab/project/node_modules/tslib/tslib.js:117:57)
    at /Users/giancarlo/Lab/project/node_modules/tslib/tslib.js:110:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/Users/giancarlo/Lab/project/node_modules/tslib/tslib.js:106:16)
    at EventEmitter.<anonymous> (/Users/giancarlo/Lab/project/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:232:32)
    at EventEmitter.emit (events.js:200:13)
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/core : module as esm5
Compiling @angular/core : main as umd
Compiling @angular/core : es2015 as esm2015

My ng version:

Angular CLI: 9.0.0-rc.7
Node: 12.4.0
OS: darwin 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
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.3.0-rc.4
@angular/flex-layout                       8.0.0-beta.27
@angular/material                          9.0.0-rc.5
@ngtools/webpack                           9.0.0-rc.7
@nguniversal/common                        9.0.0-next.14
@nguniversal/express-engine                9.0.0-next.14
@nguniversal/module-map-ngfactory-loader   9.0.0-next.9
@schematics/angular                        8.3.14
@schematics/update                         0.900.0-rc.7
rxjs                                       6.5.3
typescript                                 3.7.2
webpack                                    4.41.3

@naveedahmed1 I'm curious to know - is @angular/fire with bundleDependencies all working?

[naveedahmed1]

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

#34356

84a7d8a

c26738d