Question

我有一个具有这种结构的Angular2项目：

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

我想在配置目录中包含所有其他配置文件的Angular2应用程序的所有常量和参数（如API的URL ...）。我怎样才能在Angular2中执行它？由于config文件夹位于客户端文件夹之外，导入一些外部的东西是很好的做法，有许多“../../../”？

我也想使用依赖注入，但是有什么不那么重的吗？如何避免手动导入我想要使用的每个组件/模块中的文件？

THX

Answer 1

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

我在root上使用.env文件来存储变量，我有一个.env.TST，.env.PRD并用部署脚本替换它

<强> webpack.common.js

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

...

plugins: [
new webpack.DefinePlugin(
       envVars 
    )
]

...

示例 .env 文件

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

您将APIURL作为全局变量

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

<强>分型/ typings.d.ts

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

我希望对某人有帮助

Answer 2

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

"scripts": {
    "build:dev": "webpack --config config/webpack.dev.js",
     "build:prod": "webpack --config config/webpack.prod.js"
}

然后在每个config / webpack.xxxx.dev脚本中，您可以使用Webpack声明全局变量 DefinePlugin ||的 ExtendedDefinePlugin 即可。理解这个插件允许您拥有全局服务器端node.js变量，作为全局客户端.js变量可用。

这就是你的webpack.dev.js的样子

 new DefinePlugin({
   'ENV': JSON.stringify('Development'),
   'URL': JSON.stringify('http://...')      
 })

...

这就是你的webpack.prod.js的样子

 new DefinePlugin({
   'ENV': JSON.stringify('Prod'),
   'URL': JSON.stringify('http://...')      
 })

...

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

声明var URL：string; //让编译器满意

让configUrl：string = URL;

链接到示例github项目：ng2a.frontend

Angular2全局配置文件

2 个答案: