Angular CLI (7.0.5) разные активы для разработки и производства? - PullRequest
3 голосов
/ 12 марта 2019

Можно ли иметь разные активы для разработки и производства с помощью Angular CLI (7.0.5)?

Для производства я хочу активы:

"assets": [
   "projects/example/src/favicon.ico"
]

Для разработки я хочуактивы:

"assets": [
   "projects/example/src/favicon.ico",
   "projects/example/src/assets/development.css"
]

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 12 марта 2019

Я нашел способ заставить его работать, это не красиво, но работает.

В вашем файле 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" (production) я удалил строку "projects / example / src / assets / development.css" в активах. В проекте «example-dev» я изменил browserTarget в serve на «example-dev: build» вместо «example: build»

Если я хочу обслуживать проект развития:

ng serve example-dev -o

Если я хочу обслуживать производственный проект:

ng serve example -o

Если у кого-то есть более чистое решение, я бы хотел услышать это:)

EDITED

Благодаря Картику Венкату я нашел другой способ заставить его работать, который намного чище.

В вашем файле 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

или

ng serve example -o
2 голосов
/ 12 марта 2019

У нас есть опция fileReplacements в производственных конфигурациях в angular.json.Там вы можете заменить файлы.

Примечание: я не проверял.

...