我正在用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.
然后我尝试将这个密钥添加到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
}
如上所述添加密钥后，在构建时，每个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的新手，我有点迷路了。有人有主意吗？提前感谢！
步骤1。在compilerOptions内的tsconfig.app.json中添加composite: true，如下方
/* 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的图像
步骤2。重新启动vscode