angular - 无法从 Webpack 配置向 Angular 2 提供环境变量

Question

在我的 Webpack 配置中，我有以下内容。

var config = require("./webfig");
config.module = config.module || [];
config.plugins.push(new webpack.DefinePlugin({ "Hazaa": "Shazoo" }));
module.exports = config;

但是，在 TS 文件中，当我尝试使用下面的行访问它时，转译器提示说这样的东西不可用。我不完全确定如何解决它，并且 googlearching 对这个特定问题没有产生太大的值(value)(到目前为止我已经正确识别诊断)。

如何在我的 TypeScript 代码中访问 Hazaa？

编辑

根据评论，我进行了以下更改。

config.plugins.push(new webpack.DefinePlugin({ "Hazaa": JSON.stringify("Shazoo") }));

一个名为 app.d.ts 的文件在与预先存在的 index.d.ts 相同的目录中创建。它仅包含 declare var Hazaa: string; 并且我从 typings.json 中引用它，就像这样。

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.9.7+20161130133742",
    "app": "file:./typings/app.d.ts"
  }
}

我还从 tsconfig.json 部分 files 中引用了它，如下所示。

{
  "compilerOptions": {
    "baseUrl": "./source/application",
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "files": [
    "typings/index.d.ts",
    "typings/app.d.ts"
  ],
  "include": [ "source/**/*" ],
  "exclude": [ "node_modules" ]
}

没有任何帮助 - 当我在我的组件的构造函数中执行 console.log(Hazaa) 时，我收到编译时错误，提示找不到名称。

Answer 1

由于 TypeScript 不知道在构建项目时注入(inject)到代码中的 webpack 全局变量(使用 DefinePlugin 定义的变量)，因此会报错。您必须告诉 TypeScript Hazaa 是一个字符串类型的变量，它将在构建时进行评估。

因此，使用您的 .d.ts 文件声明 Hazaa。

declare var Hazaa: string;