Javascript Angular2全局配置文件

我有一个Angular2项目，结构如下：

client/ // Angular2 client
    app/
        app.component.ts
        ...
    main.ts
    ...
server/ // API
    server.js
config/ // config files
    webpack.config.js
    ...

我希望将Angular2应用程序的所有常量和参数（如API的url…）与所有其他配置文件一起放在config目录中。 我如何在Angular2中执行它？由于配置文件夹位于客户机文件夹之外，导入位于客户机文件夹之外的内容是否是一种良好的做法，其中包含许多“../../../”

我还想使用依赖注入，但有没有比这更重要的东西？ 如何避免手动导入每个组件/模块中要使用的文件

---

Thx

我使用的方法可能不是最好的方法，但是，我正在使用webpack将全局变量注入DefinePlugin插件：

我使用根目录上的.env文件来存储变量，我有一个.env.TST、.env.PRD并用部署脚本替换它

webpack.common.js

var preEnv = require('../.env');
var envVars = {};
for(var propertyName in preEnv) {
  envVars[propertyName] = '"'+preEnv[propertyName]+'"';
}

declare var APIURL: string;
declare var PUBLIC_URL: string;
declare var ENV: string;
declare var BASE_PATH: string;

示例.env文件

module.exports = {
    "APIURL": "https://localhost/MyAPI/",
    "PUBLIC_URL": "https://localhost:3000/",
    "BASE_PATH": "/"
    "ENV": "dev"
}

您将使用

apirl

作为全局变量

另外，我在打字中添加了一个文件，以防止出现警告：

打字/typings.d.ts

var preEnv = require('../.env');
var envVars = {};
for(var propertyName in preEnv) {
  envVars[propertyName] = '"'+preEnv[propertyName]+'"';
}

declare var APIURL: string;
declare var PUBLIC_URL: string;
declare var ENV: string;
declare var BASE_PATH: string;

---

我希望它对某人有所帮助

我使用的方法可能不是最好的方法，但是，我正在使用webpack为DefinePlugin插件注入全局变量：

我使用根目录上的.env文件来存储变量，我有一个.env.TST、.env.PRD并用部署脚本替换它

webpack.common.js

var preEnv = require('../.env');
var envVars = {};
for(var propertyName in preEnv) {
  envVars[propertyName] = '"'+preEnv[propertyName]+'"';
}

declare var APIURL: string;
declare var PUBLIC_URL: string;
declare var ENV: string;
declare var BASE_PATH: string;

示例.env文件

module.exports = {
    "APIURL": "https://localhost/MyAPI/",
    "PUBLIC_URL": "https://localhost:3000/",
    "BASE_PATH": "/"
    "ENV": "dev"
}

您将使用

apirl

作为全局变量

另外，我在打字中添加了一个文件，以防止出现警告：

打字/typings.d.ts

var preEnv = require('../.env');
var envVars = {};
for(var propertyName in preEnv) {
  envVars[propertyName] = '"'+preEnv[propertyName]+'"';
}

declare var APIURL: string;
declare var PUBLIC_URL: string;
declare var ENV: string;
declare var BASE_PATH: string;

我希望这对某人有帮助

在package.json中，您可以为每个环境编写npm脚本。您将要支持的：

“脚本”：{
“build:dev”：“webpack--config/webpack.dev.js”，
“build:prod”：“webpack--config/webpack.prod.js”
}

然后，在每个config/webpack.xxxx.dev脚本中，您可以使用webpackDefinePlugin|124;ExtendedDefinePlugin声明全局变量。理解此插件允许您将全局服务器端node.js变量作为全局客户端.js变量提供，这一点非常重要 这就是您的webpack.dev.js的外观

newdefinePlugin({
“ENV”：JSON.stringify（'Development'），
'URL'：JSON.stringify（'http://...')      
})

。。。

这就是您的webpack.prod.js的外观

newdefinePlugin({
“ENV”：JSON.stringify（'Prod'），
'URL'：JSON.stringify（'http://...')      
})

。。。

最后是您可以编写的.ts文件

声明var-URL:string//让编译器高兴

让configUrl:string=URL

链接到github项目示例：

在package.json中，您可以为每个环境编写npm脚本。您将要支持的：

“脚本”：{
“build:dev”：“webpack--config/webpack.dev.js”，
“build:prod”：“webpack--config/webpack.prod.js”
}

然后，在每个config/webpack.xxxx.dev脚本中，您可以使用webpackDefinePlugin|124;ExtendedDefinePlugin声明全局变量。理解此插件允许您将全局服务器端node.js变量作为全局客户端.js变量提供，这一点非常重要 这就是您的webpack.dev.js的外观

newdefinePlugin({
“ENV”：JSON.stringify（'Development'），
'URL'：JSON.stringify（'http://...')      
})

。。。

这就是您的webpack.prod.js的外观

newdefinePlugin({
“ENV”：JSON.stringify（'Prod'），
'URL'：JSON.stringify（'http://...')      
})

。。。

最后是您可以编写的.ts文件

声明var-URL:string//让编译器高兴

让configUrl:string=URL

链接到github项目示例：