Cannot read property 'ɵmod' of undefinedTypeError in production build

[daniellampl]

We recently updated to Angular 9 and now we get this error when navigating to a specific page in production build:

Uncaught (in promise): TypeError: Cannot read property 'ɵmod' of undefinedTypeError: Cannot read property 'ɵmod' of undefined at It (https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:742635) at new e (https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:831020) at zu (https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:841797) at t.Gu [as compileModuleAsync] (https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:841852) at e.project (https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:267750) at e._tryNext (https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:1319689) at e._next (https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:1319591) at e.next (https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:436808) at https://test.com/main.d6c0c1c51272d3bbf9cf.js:1:449275 at e.invoke (https://test.com/polyfills.057601964096d2214122.js:1:7580)

On this specific page are just a few material form elements such as text files, checkboxes, and a datepicker. Everything works fine in development mode.

This is our package.json:

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --prod",
    "version": "./scripts/version.sh",
    "test": "ng test --source-map=false",
    "test:coverage": "ng test --code-coverage --watch=false",
    "lint": "ng lint",
    "e2e": "ng e2e",
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.1.1",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "9.1.1",
    "@angular/compiler": "9.1.1",
    "@angular/core": "9.1.1",
    "@angular/forms": "9.1.1",
    "@angular/localize": "^9.1.1",
    "@angular/material": "^9.2.0",
    "@angular/material-moment-adapter": "^9.2.0",
    "@angular/platform-browser": "9.1.1",
    "@angular/platform-browser-dynamic": "9.1.1",
    "@angular/router": "9.1.1",
    "@angular/service-worker": "9.1.1",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "apollo-angular": "^1.8.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link-batch-http": "^1.2.13",
    "apollo-link-context": "^1.0.19",
    "apollo-link-error": "^1.1.12",
    "apollo-link-retry": "^2.2.15",
    "apollo-link-state": "^0.4.2",
    "apollo-upload-client": "^13.0.0",
    "core-js": "^2.6.11",
    "exif-js": "2.3.0",
    "graphql": "14.0.2",
    "graphql-tag": "2.9.2",
    "hammerjs": "2.0.8",
    "i18n-iso-countries": "^5.1.0",
    "jwt-decode": "2.2.0",
    "lodash.isequal": "4.5.0",
    "moment": "^2.24.0",
    "ngx-infinite-scroll": "^8.0.1",
    "numeral": "2.0.6",
    "pinch-zoom-js": "2.3.0",
    "platform": "1.3.5",
    "rxjs": "6.5.5",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular-devkit/core": "^9.1.0",
    "@angular-devkit/schematics": "^9.1.0",
    "@angular/cli": "9.1.0",
    "@angular/compiler-cli": "9.1.1",
    "@angular/language-service": "9.1.1",
    "@schematics/angular": "^9.1.0",
    "@types/hammerjs": "2.0.36",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "^13.11.0",
    "@types/numeral": "0.0.26",
    "@types/platform": "^1.3.2",
    "codelyzer": "^5.1.2",
    "http-server": "^0.12.1",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "^5.0.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^3.1.1",
    "karma-jasmine-html-reporter": "^1.5.3",
    "karma-spec-reporter": "0.0.32",
    "protractor": "^5.4.3",
    "stylelint": "^13.3.0",
    "stylelint-no-unsupported-browser-features": "^4.0.0",
    "stylelint-order": "^4.0.0",
    "stylelint-scss": "^3.16.0",
    "stylelint-selector-no-utility": "^4.0.0",
    "ts-node": "^8.8.2",
    "tslint": "^6.1.1",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "3.8.3"
  }
}

[atscott]

@daniellampl - Can you please provide a minimal GitHub reproduction? There's not enough information here for us to investigate.

[devversion]

Hi @daniellampl. I'm closing this issue as we don't have enough information to reproduce this issue. Please feel free to comment on this issue again, or create a new one with a reproduction.

We are definitely interested in looking into this, but cannot without any details on how this issue surfaces.

[ssarljames]

Hi, I'm having the same error.

Everything works fine with typical ng serve and ng build --prod
But when I use sudo ng s --host 0.0.0.0 --port 80 , Im having that kind of error on that lazy loaded module only where it loads ngx-scanner. I use that command for debugging using smartphone. When I removed the ngx-scanner module the error will gone. I don't know if it is an issue for ngx-scanner or angular. Hope it will help. Thank you.

[Aidan-Chey]

This can occur when the chunk load error is caught in the router, preventing this error:
main.js:21895 Error: Uncaught (in promise): ChunkLoadError: Loading chunk module-name failed.

This can be achieved by doing something like this in router with lazy loaded module:
loadChildren: () => import('module/path').then(m => m.myModule).catch( err => console.log('Oh no!') )
Then turning off the server before attempting to navigate to the lazy loaded route.

(This issue is coming up in google searches)

[its-dibo]

I have the same issue.
the only installed module (other then the default modules) is ngx-loading

https://stackblitz.com/edit/angular-ivy-b1tnac?file=tsconfig.json

[raberana]

Most likely there's something wrong in the module but is hidden as an inner exception.
If you run npm run dev:ssr, you should be able to see the error.

In my case, it is because windows is not defined.

So in my server.ts, I added these lines:

const domino = require('domino');
const win = domino.createWindow(indexHtml);
// mock
(global as any).window = win;
(global as any).document = win.document;
(global as any).navigator = win.navigator;

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));

[victory-oki]

I had the same error but I eventually found out that my lazy loading script was wrong
this was what I had
path:'modulePath', loadChildren:()=>import('../some-module/some-module.module').then(m=>{m.some-module})
this is what it should have been
path:'modulePath', loadChildren:()=>import('../some-module/some-module.module').then(m=>m.some-module)
turns out i didn't return the module in the arrow function.
I don't know if this helps, but this is the issue I had and how I solved it

[sumitdubey]

I am also getting the same error, while upgrading to Angular 9.
TypeError: Cannot read property 'ɵmod' of undefined at getNgModuleDef (vendor.js:26434)

@victory-oki my lazy modules imports are already correct, still getting the ERROR!