Angular SSR : Build Error TS6306: Referenced project must have setting "composite": true

Question

我正在使用 SSR 开发 Angular 应用程序，但是在使用 npm run build:ssr 构建时出现以下错误:

ERROR in [...]/tsconfig.json
[tsl] ERROR
      TS6306: Referenced project '[...]/tsconfig.app.json' must have setting "composite": true.

ERROR in [...]/tsconfig.json
[tsl] ERROR
      TS6306: Referenced project '[...]/tsconfig.server.json' must have setting "composite": true.

然后我尝试将此 key 添加到 tsconfig.app.json和 tsconfig.server.json ，但我不确定在哪里添加这个键:
tsconfig.app.json(以及相应的 tsconfig.server.json)

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [],
        "composite": true   // <-- generates the next error (see below)
    },
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ],
    "exclude": [
        "src/test.ts",
        "src/**/*.spec.ts"
    ],
    "composite": true   // <-- no effect
}

如上所述添加key后，在build时，出现以下错误 对于每个 typescript 文件 :

ERROR in error TS6304: Composite projects may not disable declaration emit.

(所以这不可能是……)
一些须知:

Angular v 10.0.5

通过 @nguniversal/express-engine 添加了 SSR 支持

ng serve工作正常

package.json:

{
  "name": "cg",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --localize",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "xi18n": "ng xi18n --outFile=de.xlf --outputPath=src/i18n",
    "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:client-and-server-bundles": "ng build --prod && ng run cg:server:production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.8",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "~10.0.8",
    "@angular/compiler": "~10.0.8",
    "@angular/core": "~10.0.8",
    "@angular/elements": "^10.0.8",
    "@angular/forms": "~10.0.8",
    "@angular/google-maps": "^9.2.4",
    "@angular/localize": "^10.0.8",
    "@angular/platform-browser": "~10.0.8",
    "@angular/platform-browser-dynamic": "~10.0.8",
    "@angular/platform-server": "^10.0.8",
    "@angular/router": "~10.0.8",
    "@angular/service-worker": "~10.0.8",
    "@ngrx/effects": "^10.0.0",
    "@ngrx/store": "^10.0.0",
    "@nguniversal/builders": "^10.0.2",
    "@nguniversal/express-engine": "^10.0.2",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@types/express": "^4.17.7",
    "@types/lodash": "^4.14.155",
    "document-register-element": "^1.7.2",
    "express": "^4.17.1",
    "http-server": "^0.12.3",
    "lodash.merge": "^4.6.2",
    "lodash.pick": "^4.4.0",
    "rxjs": "~6.6.2",
    "smoothscroll-polyfill": "^0.4.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.5",
    "@angular/cli": "~10.0.5",
    "@angular/compiler-cli": "~10.0.8",
    "@angular/language-service": "~10.0.8",
    "@locl/cli": "0.0.1-beta.9",
    "@types/node": "^14.0.13",
    "fs-extra": "^9.0.1",
    "git-describe": "^4.0.4",
    "ts-loader": "^5.2.0",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.0",
    "typescript": "^3.9.7",
    "webpack-cli": "^3.1.0"
  }
}

angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "cg": {
            "i18n": {
                "sourceLocale": "de",
                "locales": {
                    "fr": "src/i18n/fr.xlf"
                }
            },
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "inlineStyle": true,
                    "style": "scss",
                    "skipTests": true
                },
                "@schematics/angular:class": {
                    "skipTests": true
                },
                "@schematics/angular:directive": {
                    "skipTests": true
                },
                "@schematics/angular:guard": {
                    "skipTests": true
                },
                "@schematics/angular:module": {
                    "skipTests": true
                },
                "@schematics/angular:pipe": {
                    "skipTests": true
                },
                "@schematics/angular:service": {
                    "skipTests": true
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "cg",
            "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": "tsconfig.app.json",
                        "localize": [
                            "de"
                        ],
                        "aot": true,
                        "assets": [
                            {
                                "glob": "**/*",
                                "input": "src/assets/",
                                "output": "/assets/"
                            },
                            {
                                "glob": ".htaccess",
                                "input": "src/",
                                "output": "/../"
                            },
                            "src/manifest.webmanifest"
                        ],
                        "styles": [
                            "src/sass/main.scss"
                        ],
                        "scripts": []
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb",
                                    "maximumError": "10kb"
                                }
                            ],
                            "serviceWorker": true,
                            "ngswConfigPath": "ngsw-config.json"
                        },
                        "fr": {
                            "localize": [
                                "fr"
                            ]
                        },
                        "it": {
                            "localize": [
                                "it"
                            ]
                        },
                        "en": {
                            "localize": [
                                "en"
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "cg:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "cg:build:production"
                        },
                        "fr": {
                            "browserTarget": "cg:build:fr"
                        },
                        "it": {
                            "browserTarget": "cg:build:it"
                        },
                        "en": {
                            "browserTarget": "cg:build:en"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "cg:build"
                    }
                },
                "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                        "outputPath": "dist/server",
                        "main": "src/main.server.ts",
                        "tsConfig": "tsconfig.server.json"
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ]
                        }
                    }
                }
            }
        }
    },
    "defaultProject": "cg"
}

由于我是 SSR 的新手，所以我有点迷茫。有人有想法吗？提前致谢!

Answer 1

步骤 1. 添加 composite: true在 tsconfig.app.json内compilerOptions像下面

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "composite": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.app.json 's image
步骤 2. 重启 vscode