将全局"外部"变量传递给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中,它也被标记为"不正确":

我正在使用WebPack,当我在"开发模式"运行时,我只是在构建时遇到错误,但应用程序运行成功.但问题是,当我尝试构建"prod模式"时,应用程序无法构建,因为此错误.

作为参考,我在StackOverflow和本文上关注了这个问题.我是否错过了导出,或者它可能是某种配置问题？

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'] }
],