我找到了一种让它发挥作用的方法,虽然不太漂亮,但很有效。
在 angular.json 文件中,您可以复制当前项目,在我的例子中,我的项目名为“example”。我将复制的项目重命名为“example-dev”。请参阅下面的代码:
{
...
"projects": {
"example": {
"root": "projects/example/",
"sourceRoot": "projects/example/src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/example",
"index": "projects/example/src/index.html",
"main": "projects/example/src/main.ts",
"polyfills": "projects/example/src/polyfills.ts",
"tsConfig": "projects/example/tsconfig.app.json",
"assets": [
"projects/example/src/favicon.ico"
],
"styles": [
"projects/example/src/styles.scss"
],
"scripts": []
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "example:build"
}
}
}
},
"example-dev": {
"root": "projects/example/",
"sourceRoot": "projects/example/src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/example",
"index": "projects/example/src/index.html",
"main": "projects/example/src/main.ts",
"polyfills": "projects/example/src/polyfills.ts",
"tsConfig": "projects/example/tsconfig.app.json",
"assets": [
"projects/example/src/favicon.ico",
"projects/example/src/assets/development.css"
],
"styles": [
"projects/example/src/styles.scss"
],
"scripts": []
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "example-dev:build"
}
}
}
}
}
在项目“example”(生产)中,我删除了资产中的“projects/example/src/assets/development.css”行。在项目“example-dev”中,我将服务中的 browserTarget 更改为“example-dev:build”而不是“example:build”
如果我想服务开发项目:
ng serve example-dev -o
如果我想服务于生产项目:
ng serve example -o
如果有人有更干净的解决方案那么我很想听听:)
EDITED
感谢 Karthick Venkat,我找到了另一种让它工作的方法,它更干净。
在 angular.json 文件中,您需要添加新的开发配置。请参阅下面的代码:
{
"projects": {
"example": {
"root": "projects/example/",
"sourceRoot": "projects/example/src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/example",
"index": "projects/example/src/index.html",
"main": "projects/example/src/main.ts",
"polyfills": "projects/example/src/polyfills.ts",
"tsConfig": "projects/example/tsconfig.app.json",
"styles": [
"projects/example/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "projects/example/src/environments/environment.ts",
"with": "projects/example/src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"assets": [
"projects/example/src/favicon.ico"
]
},
"development": {
"assets": [
"projects/example/src/favicon.ico",
"projects/example/src/assets"
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "example:build"
},
"configurations": {
"production": {
"browserTarget": "example:build:production"
},
"development": {
"browserTarget": "example:build:development"
}
}
}
}
}
}
}
如果我想服务开发项目:
ng serve example --configuration=development -o
如果我想服务于生产项目:
ng serve example --configuration=production -o
or
ng serve example -o