Предположим, у нас есть приложение Angular 4+, которое должно находиться в разных относительных корневых URL-адресах в разных средах, т.е.
http://localhost:4200/index.html
для разработкиhttp://prod.server.com/angular-app/index.html
для производства
Скорее всего, мы хотели бы иметь эту опцию в наших environment.x.ts
файлах:
export const environment = {
production: false,
appRoot: "/"
};
export const environment = {
production: true,
appRoot: "/angular-app/"
};
Как мы можем настроить инфраструктуру Angular build / runtime для автоматической настройки приложения в зависимости от этой опции в environment.x.ts
файлах?
< Сильный > UPDATE : Поскольку я использую набор инструментов Angular CLI косвенно через систему сборки / публикации Visual Studio ( шаблон <) / a>) было бы неплохо иметь решение, полностью основанное на Angular CLI + файлы *.json
/ *.ts
/ *.js
. Таким образом, он подойдет для любой системы сборки, где можно использовать Angular CLI.
4 ответа
Если вы используете Angular CLI, вы можете сделать:
ng build --prod --base-href /myUrl/
ИЛИ
ng build --prod --bh /myUrl/
UPDATED:
Carefully follow these steps and you are good to go :)
----------------------------------------------------------
1. Create 4 files in environment folder: (2 might there by default)
example:
environment.ts, environment.prod.ts,environment.test1.ts,environment.test2.ts
2. Use this common code for every file with slight change:
export const environment = {
production: true, //production is true for environment.prod.ts file
//for other test production is false
apiUrl: '' //base_url of each environment
};
3. Maintain a constant file where you will write all base urls.
code sample of constant.ts:
import { environment } from '../environments/environment';
let url = environment.apiUrl;
export const AppConstant = Object.freeze({
BASE_API_URL: url,
}
4. import this constant in your service or component class wherever your calling back-end.
5. In angular-cli.json:
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"test1": "environments/environment.test1.ts",
"test2": "environments/environment.test2.ts"
}
6.
ng build --env=prod
ng build --env=dev / ng build
ng build --env=test1
ng build --env=test2
7. if aot is creating problem. you can use : ng build --env=prod --no-aot
8. TO make things simple:
you can additonally add new build commands:
"scripts": {
"ng": "ng",
"start": "ng serve --env=local --no-aot",
"start:qa": "ng serve --env=dev --no-aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:prod": "ng build --prod --env=prod --no-aot --output-hashing=all",
"build:dev": "ng build --prod --env=dev --no-aot --output-hashing=all",
"build:local": "ng build --env=local"
}
When you run,command is ==> npm run start OR npm run start:qa
OR==> npm run build:local or npm run build:dev, etc.
9. Hashing will solve caching isuue.
Hope it solves your problem. It works for me.
Альтернативой варианту, описанному в @DeborahK answer, может быть добавление конфигураций сборки в package.json
и настройка вашей IDE. указать желаемую конфигурацию сборки в зависимости от среды, для которой она собирается.
Вот фрагмент из package.json
:
{
...
"scripts": {
...
"build": "ng build",
"build:Debug": "ng build --dev --base-href /",
"build:Release": "ng build --prod --base-href /angular-app/",
...
},
...
}
А вот фрагмент файла .csproj
, чтобы дать вам представление о том, как его можно интегрировать с Visual Studio (кредиты @Andrey_Fomin приведены в этом обсуждение):
<Target Name="NgBuildAndAddToPublishOutput" AfterTargets="ComputeFilesToPublish">
<Exec Command="npm run | findstr "build:$(Configuration)"" ConsoleToMSBuild="true" IgnoreExitCode="true" EchoOff="true" WorkingDirectory="$(MSBuildProjectDirectory)">
<Output TaskParameter="ConsoleOutput" PropertyName="NpmScriptName" />
</Exec>
<Exec Condition=" '$(NpmScriptName)'=='build:$(Configuration)' " Command="npm run $(NpmScriptName)" />
<Exec Condition=" '$(NpmScriptName)'!='build:$(Configuration)' " Command="npm run build" />
</Target>
В angular 6 мы можем сделать это лучше, используя environment.x.ts (x означает, что это могут быть файлы производства / разработки / конфигурации и т. Д.).
Предположим, если его имя файла режима разработки (environment.dev.ts)
export const environment = {
production: false,
appRoot: "/" or appRoot: "http://somerestapi"
};
Предположим, что в рабочем режиме имя файла (environment.prod.ts)
export const environment = {
production: true,
appRoot: "/" or appRoot: "http://somerestapi"
};
И тот же appRoot может использоваться во всех сервисах, как показано в файле service.ts ниже.
import { environment } from '../../environments/environment';
appRoot = environment.appRoot;
emplLoginCheckUrl = this.appRoot + "/checkValidUser";
validateUserDetails(employeeDetails): Observable<any> {
console.log(this.appRoot );
return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
}
После этого нам нужно выполнить еще одну работу - открыть файл angular.json.
Применить следующие изменения в "dev": mode
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
И применить нижеприведенные изменения к «производству»: режим
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
Но вы должны выбрать, какое из них необходимо для запуска приложения, например, если вы хотите запустить в режиме разработки, используйте приведенную ниже команду, она автоматически применит appRoot (URL) для всех сервисов, к которым вы обращались.
Ng build --configuration = dev (для режима разработки). ng build --configuration = production (для производственного режима).
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.