根据环境配置基本URL

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/

或

ng build --prod --bh /myUrl/

Answer 2

@DeborahK 答案中描述的选项的替代方案可能是将构建配置添加到

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 &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”：模式

"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=生产（用于生产模式）。

Answer 5

如果您想要为您的网站提供一个用户友好的 URL，那么您可以使用此 https://store.kbizsoft.com/prestashop-modules/seo-Friendly-clean-url