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".我将复制的项目重命名为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屋!