且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular CLI (7.0.5) 用于开发和生产的不同资产?

更新时间:2023-11-16 23:22:46

我找到了一种方法来让它发挥作用,虽然不漂亮,但确实有效.

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