通过全球＆＃34;外部＆＃34;变量到Angular 2应用程序

Question

我已经设置了一个全局外部对象，然后我可以将其传递给我的Angular应用程序。我这样做是因为应用程序将提供给不同的网站，因此每个网站都可以通过不同的配置。

这是我的设置：

的index.html

<script type="text/javascript">
    var appConfig = {
        welcome_msg: 'Welcome to Test App'
    };
</script>

在应用程序中导出appConfig对象（test-export.ts）

import { OpaqueToken } from '@angular/core';

export let APP_CONFIG = new OpaqueToken('appConfig');

在组件中注入appConfig

...

import { APP_CONFIG } from '../../app/test-export';

@Component({
    selector: `<home></home>`,
    providers: [
        { provide: APP_CONFIG, useValue: appConfig }
    ],
    styleUrls: [ './home.style.css' ],
    templateUrl: './home.template.html'
})

export class HomeComponent implements OnInit {
    constructor(@Inject(APP_CONFIG) private appConfig: any) { }
}

在模板中使用值

<h1>{{ appConfig.welcome_msg }}</h1>

以上所有工作正常，运行应用程序时没有错误，但是在构建代码后，我收到以下错误：

Cannot find name 'appConfig'.

事实上即使在Visual Studio Code中，它也被标记为＆＃34;不正确＆＃34;：

我正在使用WebPack，当我在＆＃34; dev模式下运行时＃34;我只是在构建时遇到错误，但应用程序运行成功。然而问题是，当我尝试建立＆＃34;产品模式＆＃34;由于此错误，应用程序无法构建。

作为参考，我关注this question on StackOverflow和this article。我错过了导出，还是以某种方式成为配置问题？

Answer 1

您需要导入包含appConfig的文件。如果脚本位于index.html，则无法执行此操作。

您可以做的是通过将其分配到window

来使其全球化

<script type="text/javascript">
    window.appConfig = {
        welcome_msg: 'Welcome to Test App'
    };
</script>

providers: [
    { provide: APP_CONFIG, useValue: (<any>window).appConfig }
    // or
    { provide: APP_CONFIG, useValue: (window as any).appConfig }
    // or
    { provide: APP_CONFIG, useValue: window['appConfig'] }
],