Most answers on the internet work well for JIT compilation, refer to the stack overflow article here; Stack Overflow Question
We are using JIT compilation for development and AOT for deployment. I couldn’t find a good way to make the standard approach work with AOT. For reference I followed the AOT cookbook here… Angular AOT cookbook.
The approach below will not work for server side rendering but should suffice for both JIT and AOT client side rendering.
1) In the razor view, _layout.cshtml for example, just put a script block and set a JSON object on the window interface. I placed this block within the “head” tag but doesn’t really matter. The values for the JSON keys can be determined by any razor syntax.
[code language=”javascript”]
window.appContext = {
userName: ‘@("test".ToUpper())’,
isAdmin: @(1 == 1 ? "true" : "false")
};
[/code]
2) Create an app context service and wire up in appropriate module and inject into components for usage, if you need help with this just comment and I’ll supply more info.
[code language=”javascript”]
import { Injectable } from ‘@angular/core’;
/*
must match definition in SCRIPT tag that is seeded from razor
*/
interface IAppContext {
userName: string;
isAdmin: boolean;
}
/*
*/
@Injectable()
export class AppContextService implements IAppContext {
userName: string;
isAdmin: boolean;
constructor() {
var appContextBootstrap: IAppContext = (<IAppContext>(<any>window).appContext);
this.userName = appContextBootstrap.userName;
this.isAdmin = appContextBootstrap.isAdmin;
}
}
[/code]
3) reference and use the app context service throughout the application.
[code language=”javascript”]
import { Component } from ‘@angular/core’;
import { AppContextService } from ‘./appContext.service’
@Component({
moduleId: module.id,
selector: ‘story-app’,
templateUrl: ‘app.component.html’
})
export class AppComponent {
AppConfig: any;
constructor(private appContext: AppContextService) { }
ngOnInit() {
alert(‘hi – ‘ + this.appContext.userName);
}
}
[/code]