Question

假设我们有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构建/运行时基础架构以根据environment.x.ts文件中的此选项自动调整应用程序？

更新由于我通过Visual Studio构建/发布系统（template）间接使用Angular CLI工具链，因此完全基于Angular CLI + *.json /的解决方案很不错*.ts / *.js个文件。这样，它适用于可以使用Angular CLI的任何构建系统。

Answer 1

如果您使用的是Angular CLI，则可以执行以下操作：

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

OR

ng build --prod --bh /myUrl/

Answer 2

@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集成（在此discussion中归功于@Andrey_Fomin）：

  <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 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.

Answer 4

在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": {
              "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"
                }
              ]
            },

但是您必须选择运行该应用程序所需的应用程序，例如，如果要以dev模式运行，请使用以下命令，它将为所有调用的aservices自动应用appRoot（URL）。

ng build --configuration = dev（用于开发模式）。 ng build --configuration = production（用于生产模式）。

根据环境配置基本URL

4 个答案: