設定のベースURL環境によって

Question

と仮定我々はすなわち、異なる環境で異なる相対的なルートのURLに配置する必要が角度4+アプリを持っている：開発のための

• 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/" 
}; 

environment.x.tsファイルのこのオプションに応じてアプリケーションを自動的に調整するためにAngular build/runtimeインフラストラクチャを設定するにはどうすればよいですか？

UPDATE：私は、Visual Studioのビルド/公開システム（template）を介して間接的に角度CLIツールチェーンを使用していますので 、角度CLI + *.json/*.ts/*.jsに完全に基づいたソリューションを持っていることは素晴らしいことですファイル。このようにして、Angular CLIを使用できるビルドシステムに適しています。

ng build --prod --base-href /myUrl/ 

OR

ng build --prod --bh /myUrl/ 

Answer 1

それが構築している環境に応じて、希望のビルド構成を指定します。ここで

はpackage.jsonからの抜粋です：

{ 
    ... 
    "scripts": { 
    ... 
    "build": "ng build", 
    "build:Debug": "ng build --dev --base-href /", 
    "build:Release": "ng build --prod --base-href /angular-app/", 
    ... 
    }, 
    ... 
} 

そして、ここではあなたにそれは、Visual Studio（このdiscussionで@Andrey_Fominにクレジット）と統合することができる方法のアイデアを与えるために.csprojファイルの抜粋です。

<Target Name="NgBuildAndAddToPublishOutput" AfterTargets="ComputeFilesToPublish"> 
    <Exec Command="npm run | findstr &quot;build:$(Configuration)&quot;" 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> 

Answer 2

を@DeborahK answerで説明したオプションの代わりpackage.jsonとセットアップお使いのIDEにビルド構成を追加することができます：あなたはあなたができる角度CLIを使用している場合

Answer 3

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.