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