I am looking for some best practice here. My angular2 app will live inside an existing Content Managment System. As a result I need to capture some "variables" generated by this CMS (like auth tokens etc) and use them with http requests inside my angular2 app.
When the index.html page is displayed by the CMS it is pre-parsed by the CMS and some tokens (ie [ModuleContext:ModuleId]) are replaced before the page is sent to the browser.
Here is an example of my index.html page (abreviated):
<!-- 2. Capture CMS values to pass to app -->
<script type="text/javascript">
var moduleId = parseInt("[ModuleContext:ModuleId]");
var portalId = parseInt("[ModuleContext:PortalId]");
var sf = $.ServicesFramework(moduleId);
</script>
<!-- 3. Configure SystemJS and Bootstrap App-->
<script type="text/javascript">
System.config({
packages: {
//sets the root path of the Angular2 App
'DesktopModules/KrisisShifts/app': {
format: 'register',
defaultExtension: 'js'
}
},
map: { 'app': './app' }
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
<shift-app>Loading...</shift-app>
Specifically the $.ServicesFramework is used for generating valid http web.api requests. I want to capture this in a service that can be injected into each component that uses it.
for example (I am using typescript):
import {Injectable} from 'angular2/core';
import {OnInit} from 'angular2/core';
@Injectable()
export class dnnService implements OnInit{
sf: any;
constructor() {}
ngOnInit() {
if ($.ServicesFramework) {
this.sf = $.ServicesFramework(moduleId);
};
}
}
One problem is that the typescript compiler throws error that it cannot find "$" etc. I can force this to work by using declare before the typescript class declaration like the following:
//Global Variable Declarations
declare var $: any;
declare var moduleId: any;
Question:
What is a better way (if exists) of capturing these "global" variable for use in the app that will scale well.
EDIT - update to RC6
I used the following to work in the RC6:
@NgModule({
declarations: [
AppComponent,
FormatDatePipe,
ShiftPartialPipe
],
imports: [
BrowserModule,
RouterModule.forRoot(AppRoutes),
FormsModule,
ReactiveFormsModule,
HttpModule
],
bootstrap: [AppComponent],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: dnnModId, useValue: moduleId },
{ provide: dnnPortalId, useValue: portalId },
{ provide: dnnEditMode, useValue: editMode },
{ provide: dnnSF, useValue: $.ServicesFramework(moduleId) }
]
})