Pass Page/Global Variables into Angular2 app for use with services
<p>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.</p>

<p>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.</p>

<p>Here is an example of my index.html page (abreviated):</p>

<pre><code>&lt;!-- 2. Capture CMS values to pass to app --&gt;
&lt;script type="text/javascript"&gt;
    var moduleId = parseInt("[ModuleContext:ModuleId]");
    var portalId = parseInt("[ModuleContext:PortalId]");
    var sf = $.ServicesFramework(moduleId);
&lt;/script&gt;

&lt;!-- 3. Configure SystemJS and Bootstrap App--&gt;
&lt;script type="text/javascript"&gt;
    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));
&lt;/script&gt;
&lt;shift-app&gt;Loading...&lt;/shift-app&gt;
</code></pre>

<p>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.</p>

<p>for example (I am using typescript):</p>

<pre><code>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);
        };
    }

}
</code></pre>

<p>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:</p>

<pre><code>//Global Variable Declarations
declare var $: any;
declare var moduleId: any;
</code></pre>

<h2>Question:</h2>

<p>What is a better way (if exists) of capturing these "global" variable for use in the app that will scale well.</p>

<hr>

<h2>EDIT - update to RC6</h2>

<p>I used the following to work in the RC6:</p>

<pre><code>@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) }
]
})
</code></pre>