Angular CLI(7.0.5)用于开发和生产的不同资产? [英] Angular CLI (7.0.5) different assets for development and production?
问题描述
使用Angular CLI(7.0.5)可以有不同的资产用于开发和生产吗?
Is it possible to have different assets for development and production with Angular CLI (7.0.5)?
对于生产，我需要资产:
For production i want the assets:
"assets": [
"projects/example/src/favicon.ico"
]
对于发展，我需要资产:
For development i want the assets:
"assets": [
"projects/example/src/favicon.ico",
"projects/example/src/assets/development.css"
]
谢谢.
推荐答案
我找到了一种使它工作的方法，虽然它不漂亮，但它可以工作.
I have found a way to make it work, it ain't pretty but it works.
在您的angular.json文件中，您可以复制当前项目，在我的情况下，我的项目名为示例".我将复制的项目重命名为"example-dev".请参见下面的代码:
In your angular.json file you can copy your current project, in my case my project is named "example". I rename the copied project to "example-dev". See the code below:
{
...
"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"
In the project "example" (production) i removed the line "projects/example/src/assets/development.css" in the assets. In the project "example-dev" i changed the browserTarget in serve to "example-dev:build" instead of "example:build"
如果我想为开发项目服务:
If i want to serve the development project:
ng serve example-dev -o
如果我要为生产项目服务:
If i want to serve the production project:
ng serve example -o
如果有人有更清洁的解决方案，那么我很想听到:)
If someone has a cleaner solution then I would love to hear that :)
已编辑
多亏了Karthick Venkat，我找到了另一种使其更有效的工作方式.
Thanks to Karthick Venkat i have found a other way to make it work, which is alot cleaner.
您需要在angular.json文件中添加新的配置以进行开发.请参见下面的代码:
In your angular.json file you need to add a new configuration for development. See the code below:
{
"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"
}
}
}
}
}
}
}
如果我想为开发项目服务:
If i want to serve the development project:
ng serve example --configuration=development -o
如果我要为生产项目服务:
If i want to serve the production project:
ng serve example --configuration=production -o
或
ng serve example -o
这篇关于Angular CLI(7.0.5)用于开发和生产的不同资产?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
