web-dev-qa-db-ja.com

SSR Angular 8アプリケーションには、未定義としてレイジーロードモジュールがあります

SSRで実行するようにAngular 8アプリケーションを設定しようとしていますが、ng serveでアプリケーションを実行すると、遅延ロードされたモジュールがwebpackで未定義のエラーをトリガーします。正常に動作していました。以前はAngular 7でしたが、Angular 8に進むと、すべてが壊れました。これは、ランタイム(ノードコンソール)で発生しているエラーです)

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:137403:30)
    at Function.requireEnsure [as e] (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:137422:25)
    at ɵ11 (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:139660:6210)
    at RouterConfigLoader.loadModuleFactory (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:232758:39)

Tsconfigとangular.jsonの一部を変更してみましたが、常に同じエラーが発生します。 Ivyはビルド時にエラーをトリガーするため、有効になりません。リンクされていると思いますが、よくわかりませんので、今のところ、Ivyなしで機能させようとしています

ERROR in src/app/pages/search/search.module.ts(68,12): error TS-991010: Value at position 12 in the NgModule.importss of SearchModule is not a reference: [object Object]
src/app/app.module.ts(41,12): error TS-991010: Value at position 6 in the NgModule.importss of AppModule is not a reference: [object Object]

tsconfig.json

{
  "compileOnSave": false,
  "angularCompilerOptions": {
    "enableIvy": true,
    "allowEmptyCodegenFiles": true
  },
  "compilerOptions": {
    "baseUrl": "./src",
    "importHelpers": true,
    "paths": {
      "@nouma/core": ["app/core/core.index.ts"],
      "@nouma/coreModule": ["app/core/core.module.ts"],
      "@nouma/material": ["app/utils/nouma-material/nouma-material.module.ts"],
      "@nouma/ui": ["app/ui/ui.index.ts"],
      "@nouma/env": ["environments/environment.ts"],
      "@nouma/errors": ["app/pages/error-pages/error-pages.index.ts"],
      "@nouma/home": ["app/pages/home/home.component.ts"],
      "@nouma/popins": ["app/pages/popins/popins.index.ts"],
      "@nouma/popinsModule": ["app/pages/popins/popins.module.ts"]
    },
    "incremental": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
    "baseUrl": "."
  },
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng-nouma": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/robots.txt",
              "src/assets"
            ],
            "styles": [
              "src/app/utils/nouma-material/nouma-app-theme.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/foundation-sites/dist/js/foundation.min.js"
            ],
            "lazyModules": [
              "src/app/pages/search/search.module",
              "src/app/pages/search/search.module",
              "src/app/pages/tender-detail/tender-detail.module",
              "src/app/pages/sources/sources.module",
              "src/app/pages/offer/offer.module",
              "src/app/pages/forgotten/forgotten.module",
              "src/app/pages/confirm/confirm.module",
              "src/app/pages/alerts/alerts.module",
              "src/app/pages/bookmarks/bookmarks.module",
              "src/app/pages/account/account.module",
              "src/app/pages/home/home.module"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": false,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "local": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng-nouma:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng-nouma:build:production"
            },
            "local": {
              "browserTarget": "ng-nouma:build:local"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng-nouma:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/Indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "local": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ]
            }
          }
        }
      }
    },
    "ng-nouma-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ng-nouma:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ng-nouma:serve:production"
            },
            "local": {
              "devServerTarget": "ng-nouma:serve:local"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ng-nouma",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

packages.json

{
  "name": "ng-nouma",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "postinstall": "ivy-ngcc",
    "start": "ng serve",
    "start:opti": "ng serve --aot --optimization",
    "start:local": "ng serve --configuration=local",
    "start:prod": "ng serve --configuration=production",
    "build": "ng build --aot --build-optimizer --optimization",
    "build:prod": "ng build --prod --aot --build-optimizer --optimization",
    "build:local": "ng build --configuration=local --aot --build-optimizer --optimization",
    "test": "ng test",
    "lint": "ng lint",
    "bundle-report": "ng build --stats-json --aot --build-optimizer --optimization && webpack-bundle-analyzer dist/browser/stats.json",
    "bundle-report:prod": "ng build --stats-json --prod --aot --build-optimizer --optimization && webpack-bundle-analyzer dist/browser/stats.json",
    "e2e": "ng e2e",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:ssr:staging": "npm run build:client-and-server-bundles:staging && npm run compile:server",
    "build:ssr:local": "npm run build:client-and-server-bundles:local && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod --aot --build-optimizer --optimization && ng run ng-nouma:server:production",
    "build:client-and-server-bundles:staging": "ng build --aot --build-optimizer --optimization && ng run ng-nouma:server",
    "build:client-and-server-bundles:local": "ng build --aot --build-optimizer --optimization --configuration=local && ng run ng-nouma:server"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "~8.0.0",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "^8.0.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/platform-server": "^8.0.0",
    "@angular/router": "^8.0.0",
    "@fortawesome/angular-fontawesome": "^0.4.0",
    "@fortawesome/fontawesome-pro": "^5.8.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-brands-svg-icons": "^5.8.2",
    "@fortawesome/pro-light-svg-icons": "^5.8.2",
    "@fortawesome/pro-regular-svg-icons": "^5.8.2",
    "@fortawesome/pro-solid-svg-icons": "^5.8.2",
    "@nguniversal/common": "^7.1.1",
    "@nguniversal/express-engine": "^7.1.1",
    "@nguniversal/module-map-ngfactory-loader": "^7.1.1",
    "angular2-toaster": "^7.0.0",
    "angulartics2": "^7.5.2",
    "core-js": "^3.1.3",
    "express": "^4.17.1",
    "foundation-sites": "6.5.3",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "ng-intercom": "^8.0.0-beta.1",
    "ngx-chips": "^2.0.0-beta.0",
    "ngx-cookie-service": "^2.2.0",
    "ngx-foundation": "1.0.8",
    "ngx-infinite-scroll": "^7.1.0",
    "ngx-mask": "^7.9.9",
    "rxjs": "~6.5.2",
    "sass-loader": "^7.1.0",
    "terser": "^4.0.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "^8.0.0",
    "@angular/language-service": "^8.0.0",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.0.3",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.0",
    "ts-loader": "^6.0.1",
    "ts-node": "~8.2.0",
    "tslint": "~5.16.0",
    "TypeScript": "~3.4.5",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.2.0"
  }
}

npm run build:ssrを使用してアプリケーションを構築し、npm run serve:ssrを使用してアプリケーションを提供しています

アプリケーションがSEOの目的でSSRを使用してすべてのモジュールとマークアップをレンダリングする必要があり、問題がどこにあるのかについて何らかの支援が欲しいです。

5
Gwenael Larmet

簡単に言えば、server.tsからenableProdMode();を削除したところ、機能し始めました。


angular 7ですが、angular 8はserver.tsファイルのコードを変更する必要があるため、

  • Server.bak.tsをバックアップファイルとして作成しました。
  • sSRで新しい空のプロジェクトを設定し、
  • それからserver.tsファイルにコードを取得しました。
0
Kurkov Igor