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

Question

我最近将我的 angular 项目从 8 更新到 12。关于 ng build 一切正常，但问题是当我尝试 node dist/server.js 时出现以下错误

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

所以最初我浏览了一些 post 并认为我需要用 AppServerModule

替换 AppServerModuleNgFactory

然后我开始收到以下错误。

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)

这是我的 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"
  }
}

如果我需要分享更多信息来帮助调试，请告诉我，我们将不胜感激。

这里有一些尝试但没有帮助的方法：

尝试使用 ng update @nguniversal/express-engine@10 和 ng update @nguniversal/express-engine@latest
再次更新
已清理 node_modules 和 package-lock.json 并重新安装

Answer 1

Post更新

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

修复了问题，如果您使用脚本生成 ssr，请跳过这些并使用运行 ssr 的 dev:ssr。

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

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

angular-universal

angular