javascript - Angular2全局配置文件

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 文件夹位于客户端文件夹之外，因此导入外部文件(包含许多“../../../”)是一个好习惯吗？

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

谢谢

Answer 1

我使用的可能不是最好的方法，但是，我使用 webpack 通过 DefinePlugin 插件注入(inject)全局变量:

我在根目录上使用 .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/typings.d.ts

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

希望对某人有帮助