Issue with passing global "external" variables to Angular 2 application

Question

I've been setting up a global external object which I can then pass to my Angular application. I'm doing this as the application will be provided to different websites and so each website can then pass different configurations.

This is my setup:

index.html

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

Exporting the appConfig object in the application (test-export.ts)

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

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

Injecting appConfig in a component

...

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) { }
}

Using value in the template

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

All of the above works fine and I get no errors when running the application, however after I build the code I'm getting the following error:

Cannot find name 'appConfig'.

In fact even in Visual Studio Code it's being marked as "incorrect":

I'm using WebPack and when I'm running in "dev mode" I simply get the error when I build but the application runs successfully. However the issue is that when I try to build in "prod mode" the application does not build because of this error.

As references I was following this question on StackOverflow and this article. Am I missing an export, or could it somehow be a configuration issue?

score 5 · Accepted Answer · edited Oct 12 '16 at 18:12

5

You need to import the file that contains appConfig. If the script is in index.html this is not possible.

What you can do is to make it global by assigning it to 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'] }
],

edited Oct 12 '16 at 18:12

yurzui

205,937
32
433
399

answered Oct 12 '16 at 17:44

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks for your reply and your explanation. I've just tried assigning it to `window`, however the same thing happened I get `Property 'appConfig' does not exist on type 'Window'.` – Daniel Grima Oct 12 '16 at 17:52
Did you use `window` with lower-case in both cases?. Do you get this error in your IDE before you start the app or at runtime? – Günter Zöchbauer Oct 12 '16 at 18:05
Yep it's lower case in both cases. At runtime the application runs successfully and I get no errors whatsoever. I get the error in the IDE and in the command line when I build the code. – Daniel Grima Oct 12 '16 at 18:10
That did the trick thank you. Just out of curiosity is there a "preferred" way of importing this kind of external config? As in is it wrong to have this in the index.html file? – Daniel Grima Oct 12 '16 at 18:19
I don't know of better ways but that's not an area where I have a lot of expertise. – Günter Zöchbauer Oct 12 '16 at 18:22
Alright no worries, thanks once again for your help :) – Daniel Grima Oct 12 '16 at 18:23
@GünterZöchbauer End up with this `Prerendering failed because of error: ReferenceError: window is not defined` what would be the reason? – k11k2 Aug 28 '17 at 11:28
@k11k2 I don't know. You could try to add `declare window : any;` in the same file just below the TypeScript imports. – Günter Zöchbauer Aug 28 '17 at 11:43
@GünterZöchbauer no luck! – k11k2 Aug 28 '17 at 13:35
Yes @GünterZöchbauer – k11k2 Aug 28 '17 at 13:39
@k11k2 sorry, I have no idea. Are you using universal or webworkers? – Günter Zöchbauer Aug 28 '17 at 13:40
I have no idea. Perhaps worth a new question – Günter Zöchbauer Aug 29 '17 at 04:23

Issue with passing global "external" variables to Angular 2 application

1 Answers1