Question

我正在使用由JHipster生成的独立Angular控制台，并由Spring Boot服务器提供服务。我希望根据环境（本地，开发，产品等）提供具有不同属性的应用程序。

I see a lot of posts about configuring the webpack build per-environment，但我需要将URL和其他数据直接指定到我的Angular 2 4.x应用程序中 - 这些数据会改变我是在dev中还是在生产中运行应用程序。当我们通过webpack启动Angular时，这种类型的每环境配置是否可行？

Answer 1

我推荐dotenv-webpack插件。

<强> webpack.config.js

const  Dotenv  =  require('dotenv-webpack');
...
plugins: [
   new  Dotenv({
      path:  './.env'
   })
]

<强> .ENV

URL=http://example.com
ENV=PROD
...

这允许您使用process.env来访问环境变量：

constructor(private http:HttpClient) {
     http.get(`${process.env.URL}`).subscribe(t=> {
        ...
     });
}

环境变量在构建时被替换。

Answer 2

我最终没有安装DotEnv插件，而是实现了webpack页面上列出的DefinePlugin解决方案。因为我是菜鸟 - 我发现文档令人困惑，列出的例子没有用，因为它没有使用＆＃39; process.env＆＃39;变量（对我来说这是一个新概念）。

这是我用来设置此系统的粗略分步指南：

为您要支持的每个环境创建一个webpack。 envName .js文件。
除了任何构建设置外，还要在每个将使用自定义属性的文件中创建DefinePlugin条目。在我最初的测试中，创建了一个全球性的＆＃34;我的webpack.common中的常量会覆盖其他环境，因此我避免在那里设置参数。
在＆＃34; process.env＆＃34;下创建DefinePlugin常量。键。这是基于js的系统用于存储特定进程数据的特殊键。
修改您的纱线，节点，mvn等构建以利用您当地的开发环境（如果尚未发生）。在我的情况下，我们的开发环境在云中，因此我为本地化测试创建了一个默认的local环境。
1. 现在可以在各自的环境中访问已定义的常量，而不需要任何导入类型语句。

这是一个示例代码段。我在plugins条目下的webpack.local.js文件：

...
new webpack.DefinePlugin({
'process.env': {
    NAME: JSON.stringify('local'),
    API_URL: JSON.stringify('http://localhost:8000/'),
}
})
...

我想说我想在我的fakeService typescript类中访问这些值：

~/src/main/webapp/fake-service.ts
@Injectable
export class FakeService {
    private URL_ROOT = process.env.API_URL + 'api/v2/externalService/resource/';
    constructor(private http: HTTP) {}
    get(): Observable<any> {
        if(process.env.NAME == 'local') {
            console.log("Calling url at " + this.URL_ROOT);
        }
       return this.http.get(this.URL_ROOT).map((res: Response) => res.json());
    }
}

可能有更好的方法（或未来）。不是将此process.env依赖项构建到您的应用程序中，而是创建一个加载这些值的Configuration服务并将其注入需要利用此数据的服务或组件中可能是明智的。

Webpack提供的Angular 2 App基于环境的属性？

2 个答案: