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

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

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

但是，在ts文件中，当我试图使用下面的行访问它时，transpiler抱怨这样的东西不可用。我不完全确定如何对其进行故障排除，而且googlearching对于这个特定的问题没有太大的价值（到目前为止，我已经正确地识别了诊断）。
如何在我的typescript代码中访问hazaa？
编辑
根据这些评论，我介绍了以下更改。

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

名为app.d.ts的文件与先前的index.d.ts was创建在同一目录中。它只包含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节文件中引用了它，如下所示。

{
  "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)时，我得到一个编译时错误，说找不到名称。

最佳答案

由于TypeScript不知道WebPACK全局变量（使用Debug插件定义的变量），当您构建项目时，该变量被注入到代码中，因此它给出了一个错误。您必须告诉类型脚本，Hazaa是一个类型字符串变量，将在生成时进行评估。
所以用.d.ts文件声明Hazaa。

declare var Hazaa: string;