为现有Angular项目安装Angular Universal时遇tsconfig无效错误

给现有Angular项目安装Angular Universal时，执行了以下命令：

npm i @nguniversal/express-engine
ng generate universal --client-project website

执行第二条命令时触发错误：

Invalid tsconfig - src/tsconfig.app.json

检查tsconfig.app.json和tsconfig.json文件后未发现明显异常，文件内容如下：

tsconfig.app.json #

{
  "extends": "./tsconfig.json",
  "files": [
    "atc-main.ts",
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "typings.d.ts"
  ]
}

tsconfig.json #

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "esnext",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es2015",
    "typeRoots": ["../node_modules/@types"],
    "baseUrl": ".",
    "paths": {
      "@app/*": ["./app/*"],
      "@account/*": ["./account/*"],
      "@shared/*": ["./shared/*"],
      "@node_modules/*": ["../node_modules/*"],
      "@angular/*": ["../node_modules/@angular/*"],
      "@metronic/*": ["./assets/metronic/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "strictInputTypes": false,
    "strictAttributeTypes": false,
    "strictOutputEventTypes": false,
    "strictDomEventTypes": false,
    "strictLiteralTypes": false,
    "strictInjectionParameters": false
  }
}

解决办法 #

• 检查angular.json中website项目的tsConfig配置：找到projects.website.architect.build.options.tsConfig，确认其值为src/tsconfig.app.json，路径必须和实际文件位置一致。
• 修正tsconfig.app.json的继承路径：从tsconfig.json的outDir配置可知，该文件位于src/目录的上级，所以tsconfig.app.json里的extends字段应改为../tsconfig.json，而非./tsconfig.json。这是最可能触发报错的原因。
• 暂时注释tsconfig.json中冲突的路径映射：@node_modules/*和@angular/*的自定义映射可能干扰tsconfig解析，注释掉这两项后重新执行命令。
• 同步Angular CLI与Universal版本：执行ng update @angular/cli @nguniversal/express-engine，确保包版本匹配，避免版本不兼容导致的配置错误。

内容的提问来源于stack exchange，提问作者Osama El-Masri