Uncaught Exception: Type NgxGalleryModule does not have 'emod' property - Angular 12.0.3

[Gargi1027]

Need urgent help!
The project builds and compiles successfully but does not load in the browser. I get the following error in console:

Versions:

tsconfig.json:

Package.json:
{
"name": "phl-reporting-spa",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.0.3",
"@angular/cdk": "^12.0.2",
"@angular/cli": "^12.0.3",
"@angular/common": "^12.0.3",
"@angular/compiler": "^12.0.3",
"@angular/core": "^12.0.3",
"@angular/forms": "^12.0.3",
"@angular/http": "^7.2.16",
"@angular/material": "^12.0.2",
"@angular/platform-browser": "^12.0.3",
"@angular/platform-browser-dynamic": "^12.0.3",
"@angular/router": "^12.0.3",
"@auth0/angular-jwt": "^3.0.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free": "^5.15.3",
"@ionic/angular": "5.6.8",
"@ionic/angular-toolkit": "4.0.0",
"@ng-bootstrap/ng-bootstrap": "^5.3.1",
"@ng-idle/core": "^8.0.0-beta.4",
"@ng-idle/keepalive": "^8.0.0-beta.4",
"@ngui/auto-complete": "^3.0.0",
"alertifyjs": "^1.13.1",
"angular-ng-autocomplete": "^2.0.5",
"angular-progress-bar": "^1.0.11",
"angular-user-idle": "^2.2.6",
"angular5-csv": "^0.2.11",
"bn-ng-idle": "^1.0.1",
"bootstrap": "^4.6.0",
"bootswatch": "^4.6.0",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"core-js": "^3.13.1",
"error": "^7.2.1",
"file-saver": "^2.0.5",
"for": "^0.1.0",
"hammerjs": "^2.0.8",
"moment": "^2.29.1",
"ng2-auto-complete": "^0.12.0",
"ng2-bootstrap-modal": "^1.0.1",
"ng2-charts": "^2.4.2",
"ng2-completer": "^9.0.1",
"ng2-expansion-panels": "0.0.6",
"ng2-input-autocomplete": "^1.1.2",
"ng2-opd-popup": "^1.1.21",
"ng2-smart-table": "^1.7.2",
"ngb-modal": "^1.0.5",
"ngx-bootstrap": "^5.6.2",
"ngx-filesaver": "^8.1.0",
"ngx-gallery": "^5.10.0",
"ngx-spinner": "^8.1.0",
"pdfmake": "^0.1.71",
"powerbi-client": "^2.18.0",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.0.3",
"@angular/compiler-cli": "^12.0.3",
"@angular/language-service": "^12.0.3",
"@types/file-saver": "^2.0.2",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "^2.0.9",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.6.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "4.2.4"
},

"postinstall": "ngcc --properties es5 browser module main --first-only"

}

[JoostK]

I'm afraid there's insufficient information provided to investigate this, however it might be helpful to know of the build is using AOT compilation or the JIT compiler.

[Gargi1027]

AOT. When using JIT, I’m getting another error. What other soecific info can I provide which would be helpful for the topic?

[JoostK]

A reproduction repo would be best, or at least the package.json file as it's not clear what dependencies are being used.

[Gargi1027]

Ok. I will upload package.json and tscofig file shortly.

[petebacondarwin]

This appeared in another project recently, which I was able to debug. Here is the analysis of what was happening in that case:

The project was using a custom webpack configuration, and the @angular-devkit/build-webpack builder in the Angular CLI to generate bundled JavaScript files that could be lazily loaded at runtime.

Some of the files being built in this way depended upon Angular libraries at runtime.

The @angular-devkit/build-angular builder has integration with ngcc that ensures that such libraries are processed before being bundled. So ngcc was indeed being triggered for the libraries but the way that this integration is configured, the ngcc processed files were being placed in "new ivy entry-points", under the __iviy_ngcc__ directory, which are referenced from in the package.json using new properties such as "es2015_ivy_ngcc": "__ivy_ngcc__/fesm2015/lib.js".

But when bundling using the @angular-devkit/build-webpack builder, it is not aware of these new entry-points and so was pulling the un-processed files into the final bundle - hence the lack of emod properties on NgModule classes.

The fix was to run ngcc as a postinstall step before running the CLI without the --create-new-ivy-entry-points option to ensure that the files were processed in situ, so that the bundler included the correct files.

[Gargi1027]

Thanks @petebacondarwin. Your input worked for me.
Closing the issue.

[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.}