我有一个常量文件
export class constants {
public static get API_ENDPOINT(): string { return 'https://dvelopment-server/'; }
}
然后我将它导入到我的服务中
private _registrationUrl = constants.API_ENDPOINT+'api/v1/register';
我该如何在服务器更改时更改端点。我有开发服务器、暂存服务器和本地服务器。我希望应用程序能够检测到环境的变化。
在我的 Angular 1 应用程序中，我使用了 EnvServiceProvider 来实现这一点。我可以在 Angular 2 应用程序中使用相同的方法吗？
src/client/app/environment.ts将被替换为当前CLI环境下的config/environment.dev.ts或config/environment.prod.ts。dev，但您可以通过-prod标志生成生产构建，例如ng build -prod或ng serve -prod。由于这是一个新功能，可能会有些混乱，请查看this great guide以获取有关如何使用CLI设置Angular环境的其他信息。import 命令似乎不再有效（可能是路径已更改）。以下是我用过的正确版本：import { environment } from '../../environments/environment';。 - zaviéimport { environment } from "app/../environments/environment;"，因为它适用于任何文件位置。 - Cartucho我想补充一下@Cartucho提供的答案。他对设置angular 2应用程序的个性化环境所需的步骤是正确的。
我还想赞同文章Guide to Build the app in different environments的观点。
但是，该文章缺少一个重要的步骤。设置个性化环境的步骤如下：
"environments": {
"source": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"dev": "environments/environment.dev.ts",
"qa": "environments/environment.qa.ts",
"YourEnvName": "environments/environment.YourEnvName.ts"
}
3）一旦您进行了这些更改，您可以使用以下命令为新环境构建应用程序。
ng build --environment=YourEnvName or
ng serve --environment=YourEnvName
希望这篇文章对任何新的Angular 2开发者有所帮助。
我通过添加一个类方法解决了这个问题
export class config {
public static getEnvironmentVariable(value) {
var environment:string;
var data = {};
environment = window.location.hostname;
switch (environment) {
case'localhost':
data = {
endPoint: 'https://dev.xxxxx.com/'
};
break;
case 'uat.server.com':
data = {
endPoint: 'https://uat.xxxxx.com/'
};
break;
default:
data = {
endPoint: 'https://dev.xxxx.com/'
};
}
return data[value];
}
}
在我的服务中
private _loginUrl = config.getEnvironmentVariable('endPoint')+'api/v1/login;
@cartucho的答案非常好，但是当您尝试使用Heroku或Github actions等服务部署到多个环境时，就会出现问题。这些服务使得使用node环境变量变得容易，但是没有一种方法来配置特定于环境的构建命令。
解决此问题的一种方法是像@cartucho建议的那样设置您的Angular环境变量，然后将构建脚本设置为调用一个小型的node应用程序。该node应用程序读取一个node环境变量，然后决定运行哪个构建命令。
在package.json中："build": "node build-app.js",
build-app.js:
const { exec } = require('child_process');
let buildScript = 'ng build --configuration=staging';
if (process.env.ANGULAR_ENVIRONMENT_CONFIGURATION === 'production') {
buildScript = 'ng build --configuration=production';
}
const child = exec(buildScript, function (err, stdout, stderr) {
if (err) throw err;
else console.info(stdout);
});
child.stdout.on('data', function (data) {
process.stdout.write(data);
});
child.stderr.on('data', function (data) {
process.stdout.write(data);
});
child.on('exit', function (data) {
process.stdout.write("I'm done!");
});
我在我的博客文章中详细介绍了Angular Universal所需的其他步骤：https://dev.to/jfbloom22/a-better-way-to-deploy-angular-universal-to-multiple-environments-206j
export class endPointconfig {
public static getEnvironmentVariable() {
let origin = location.origin;
let path = location.href.split('/')[3];
let value = origin +'/'+ path + '/api/';`enter code here`
return value;
}
}
希望能对您有所帮助。
首先，创建 development.ts、staging.ts 和 production.ts 配置文件。 其次，在 index.pug 中以以下方式导入环境文件：
SystemJS.import("#{settings.env}").then(function(env) {
System.import("app").catch(console.error.bind(console));
} // Promise.all also works!
"development": "myUrl/configs/development.js",
"staging": "myUrl/configs/staging.js",
"production": "myUrl/configs/production.js",
https://developer.mozilla.org/zh-CN/docs/Web/API/Location，https://developer.mozilla.org/zh-CN/docs/Web/API/WorkerLocation。 - eesdil