Error on worker #5: Error: Expected UMD module file (Angular 9.1.9)

🐞 bug report

Description

After upgrading my SSR application to angular from 9.1.0 to 9.1.9, I got the following error when I build the application on SSR using npm run build:ssr

🔥 Exception or Error

Error: Error on worker #5: Error: Expected UMD module file (G:/workspace/project/node_modules/flat/index.js) to contain exactly one statement, but found 6.
    at UmdReflectionHost.computeUmdModule (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:75:23)
    at FactoryMap.factory (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:31:84)
    at FactoryMap.get (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\utils.js:93:48)
    at UmdReflectionHost.getUmdModule (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:56:36)
    at UmdReflectionHost.getModuleStatements (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:70:34)
    at UmdReflectionHost.computeExportsOfUmdModule (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:84:53)
    at FactoryMap.factory (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:32:84)
    at FactoryMap.get (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\utils.js:93:48)
    at UmdReflectionHost.getExportsOfModule (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:50:94)
    at DelegatingReflectionHost.getExportsOfModule (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\host\delegating_host.js:71:34)
    at ClusterMaster.onWorkerMessage (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:194:27)
    at G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:54:95
    at ClusterMaster.<anonymous> (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:292:57)
    at step (G:\workspace\project\node_modules\tslib\tslib.js:139:27)
    at Object.next (G:\workspace\project\node_modules\tslib\tslib.js:120:57)
    at G:\workspace\project\node_modules\tslib\tslib.js:113:75
    at new Promise (<anonymous>)
    at Object.__awaiter (G:\workspace\project\node_modules\tslib\tslib.js:109:16)
    at EventEmitter.<anonymous> (G:\workspace\project\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:286:32)
    at EventEmitter.emit (events.js:198:13)

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.0
Node: 10.16.2
OS: win32 x64

Angular: 9.1.0
... 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.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@angular/cdk                      9.2.0
@angular/fire                     6.0.0
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.2.0
@ngtools/webpack                  9.1.7
@nguniversal/builders             9.1.0
@nguniversal/common               9.0.2
@nguniversal/express-engine       9.0.2
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Dependencies : package.json

  "dependencies": {
    "@angular-ru/ngx-i18n-combine": "^1.1.0",
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/fire": "^6.0.0",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.1.9",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/platform-server": "~9.1.9",
    "@angular/router": "~9.1.9",
    "@briebug/cypress-schematic": "^3.3.0",
    "@nestjs/common": "^6.0.0",
    "@nestjs/core": "^6.0.0",
    "@nestjs/ng-universal": "^3.1.0",
    "@nestjs/platform-express": "^6.0.0",
    "@ngneat/transloco": "^2.14.0",
    "@nguniversal/express-engine": "^9.0.2",
    "@sentry/browser": "^5.15.4",
    "@squadette/hammerjs": "2.1.0-pre3",
    "class-transformer": "^0.2.3",
    "class-validator": "^0.9.1",
    "express": "^4.15.2",
    "firebase": "^7.13.2",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/jest": "^9.0.1",
    "@angular-devkit/architect": "~0.900",
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@angular/language-service": "~9.1.9",
    "@angularclass/hmr": "^2.1.3",
    "@cypress/webpack-preprocessor": "5.1.1",
    "@nguniversal/builders": "^9.0.2",
    "@types/express": "^4.17.0",
    "@types/jest": "^25.2.1",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "cypress": "4.3.0",
    "firebase-tools": "^8.0.0",
    "fuzzy": "^0.1.3",
    "husky": "3.1.0",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jest": "^25.2.7",
    "jest-junit": "^10.0.0",
    "prettier": "^2.0.4",
    "pretty-quick": "^2.0.1",
    "replace-in-file": "^6.0.0",
    "rxjs-tslint-rules": "^4.33.0",
    "ts-jest": "^25.3.1",
    "ts-loader": "6.2.2",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "tslint-plugin-prettier": "^2.3.0",
    "typescript": "~3.8.3",
    "typescript-tslint-plugin": "^0.5.5"
  },

[alan-agius4]

However, this is still a problem with the default generated config file.

This hasn’t been the case since version 9. Also, in version 10 we will migrate existing projects to not use UMDs.

[petebacondarwin]

This second error can be avoided by setting up the SSR build differently. It is not necessary to use UMD/CommonJS formats for the server build:

• This disables lazy loading from a server perspective
• Causes ngcc to rerun for UMD bundles
• Uses code which is slower to run and large server bundles
• Webpack has it’s own module interop system which will replace require / imports with it’s own syntax.

So instead we can remove the "module": "commonjs" and add a "target": "es2016" to the src/tsconfig.server.json file. (Note that in the repro there are two tsconfig.server.json files. The one in the root of the project is not used and the one in the src folder has invalid source paths.)

diff --git a/src/tsconfig.server.json b/src/tsconfig.server.json
index e0e3051..9c2553c 100644
--- a/src/tsconfig.server.json
+++ b/src/tsconfig.server.json
@@ -2,14 +2,14 @@
   "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app-server",
-    "module": "commonjs",
     "types": [
       "node"
-    ]
+    ],
+    "target": "es2016"
   },
   "files": [
-    "src/main.server.ts",
-    "server.ts"
+    "./main.server.ts",
+    "../server.ts"
   ],
   "angularCompilerOptions": {
     "entryModule": "./app/app.server.module#AppServerModule"

With all these changes in place your project should now build and run successfully.