Angular Universal 12: Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped

Viewed 316

I have recently updated my angular project from 8 to 12. Everything works fine with respect to ng build but the problem is when i try node dist/server.js i got the following error

Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped
    at View.engine (/Users/shaklin/Documents/<project>/dist/server.js:79769:23)
    at View.render (/Users/shaklin/Documents/<project>/dist/server.js:17442:8)
    at tryRender (/Users/shaklin/Documents/<project>/dist/server.js:13478:10)
    at Function.render (/Users/shaklin/Documents/<project>/dist/server.js:13430:3)
    at /Users/shaklin/Documents/<project>/dist/server.js:200397:35
    at new ZoneAwarePromise (/Users/shaklin/Documents/<project>/dist/server.js:1394:29)
    at AppController.<anonymous> (/Users/shaklin/Documents/<project>/dist/server.js:200396:39)
    at step (/Users/shaklin/Documents/<project>/dist/server.js:200129:23)
    at Object.next (/Users/shaklin/Documents/<project>/dist/server.js:200110:53)
    at /Users/shaklin/Documents/<project>/dist/server.js:200104:71

So initially i browsed for a few post and figured that i need to replace AppServerModuleNgFactory with AppServerModule

and then i started getting the following error.

Error: No NgModule metadata found for 'AppServerModule'.
    at NgModuleResolver.resolve (/Users/shaklin/Documents/<project>/dist/server.js:114898:23)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/shaklin/Documents/<project>/dist/server.js:114008:45)
    at JitCompiler._loadModules (/Users/shaklin/Documents/<project>/dist/server.js:119838:53)
    at JitCompiler._compileModuleAndComponents (/Users/shaklin/Documents/<project>/dist/server.js:119821:36)
    at JitCompiler.compileModuleAsync (/Users/shaklin/Documents/<project>/dist/server.js:119781:37)
    at CompilerImpl.compileModuleAsync (/Users/shaklin/Documents/<project>/dist/server.js:180482:31)
    at CommonEngine.<anonymous> (/Users/shaklin/Documents/<project>/dist/server.js:90346:58)
    at Generator.next (<anonymous>)
    at /Users/shaklin/Documents/<project>/dist/server.js:137474:71
    at new ZoneAwarePromise (/Users/shaklin/Documents/<project>/dist/server.js:1394:29)

Here is my package.json

{
  "dependencies": {
    "@agm/core": "3.0.0-beta.0",
    "@angular/animations": "12.0.2",
    "@angular/cdk": "12.0.2",
    "@angular/common": "12.0.2",
    "@angular/compiler": "12.0.2",
    "@angular/core": "12.0.2",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "12.0.2",
    "@angular/material": "12.0.2",
    "@angular/platform-browser": "12.0.2",
    "@angular/platform-browser-dynamic": "12.0.2",
    "@angular/platform-server": "12.0.2",
    "@angular/router": "12.0.2",
    "@elfalem/leaflet-curve": "^0.8.0",
    "@nguniversal/express-engine": "12.0.1",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@sentry/browser": "^6.4.1",
    "@sentry/node": "^6.4.1",
    "@types/googlemaps": "3.39.12",
    "axios": "0.19.2",
    "bull": "3.22.6",
    "compression": "1.7.4",
    "core-js": "3.13.0",
    "cors": "2.8.5",
    "express": "4.17.1",
    "firebase": "^8.6.3",
    "hammerjs": "^2.0.8",
    "hls.js": "0.14.17",
    "intersection-observer": "0.7.0",
    "leaflet": "1.7.1",
    "lodash-es": "4.17.21",
    "newrelic": "^7.4.0",
    "ngx-bar-rating": "^2.0.0",
    "ngx-cookie-service": "^12.0.0",
    "ngx-hm-carousel": "^2.0.0-rc.1",
    "node": "14.16.1",
    "polyline-encoded": "0.0.8",
    "redis": "^3.1.2",
    "rxjs": "6.6.7",
    "rxjs-compat": "6.6.7",
    "ts-loader": "6.2.2",
    "tslib": "2.0.0",
    "universal-cookie": "4.0.4",
    "winston": "3.3.3",
    "xmlhttprequest": "1.8.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^12.0.0",
    "@angular-builders/dev-server": "7.3.1",
    "@angular-devkit/architect": "0.1200.2",
    "@angular-devkit/build-angular": "12.0.2",
    "@angular/cli": "12.0.2",
    "@angular/compiler-cli": "12.0.2",
    "@angular/language-service": "12.0.2",
    "@compodoc/compodoc": "1.1.10",
    "@types/jasmine": "3.6.0",
    "@types/jasminewd2": "2.0.9",
    "@types/node": "^15.6.1",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "codelyzer": "6.0.0",
    "copy-webpack-plugin": "^9.0.0",
    "http-server": "^0.12.3",
    "husky": "3.1.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",
    "karma-spec-reporter": "0.0.32",
    "mathjs": "6.6.5",
    "ng-bullet": "1.0.3",
    "node-gyp": "^8.1.0",
    "protractor": "7.0.0",
    "puppeteer": "1.20.0",
    "ts-node": "8.3.0",
    "tslint": "6.1.0",
    "typescript": "4.2.4",
    "webpack": "5.36.2",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "4.7.0"
  }
}

Let me know if i need to share any more info to help debug this, any help would be much appreciated.

Here are a few things tried but didn't help:

  1. Tried updating again using ng update @nguniversal/express-engine@10 and ng update @nguniversal/express-engine@latest

  2. Cleaned up node_modules and package-lock.json and reinstalled

1 Answers

Post update

ng add @nguniversal/express-engine --project=project_name

Fixed the issue, if you are using scripts to generate ssr, skip those and use dev:ssr instead which runs the ssr.

Related