I will try to keep this as short as possible.
The problem I am having is an extension of this SO question
I am trying to pass javascript variable from the "page level" into a service in my angular 2 app. I followed the direction of Gunter in the answer in the above SO question.
I used an opaque token to capture page variable names and pass them into the app constructor. This works perfectly when I am in development, but once I try to bundle the app it stops working. I use gulp-jspm-build to bundle my app and I have mangle set to false to avoid some other errors.
My app lives inside a CMS and the cms pre-processes my apps's index.html and replaces certain tokens with values.
Here is the part of the index.html of my angular app that gets pre processed with token replacement:
<!-- 2. Capture values to pass to app -->
<script type="text/javascript">
var moduleId = parseInt("[ModuleContext:ModuleId]");
var portalId = parseInt("[ModuleContext:PortalId]");
var tabId = parseInt("[ModuleContext:TabId]");
var dnnSF = $.ServicesFramework(moduleId);
if ("[ModuleContext:EditMode]" === 'True') {
var editMode = true;
}
// console.log('editMode = ' + editMode);
</script>
<!-- 3. Replaces with actual path to ststem.config.js -->
[Javascript:{path: "~/my-app/systemjs.config.js"}]
<!-- 4. APP selector where is it rendered-->
<my-app>Loading...</my-app>
Notice the [ModuleContext:ModuleId] - this gets replaced with a number value that I need to use in the angularApp that gets bootstrapped on this page.
So my main.ts file looks like this:
import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from '@angular/core';
import {AppComponent} from './app.component';
import {dnnModId, dnnSF, dnnPortalId} from './shared/dnn/app.token';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {ROUTER_PROVIDERS} from '@angular/router';
import {HTTP_PROVIDERS} from '@angular/http';
// declare
declare var $: any;
declare var moduleId: any;
declare var portalId: any;
// the providers & services bootstrapped in this root component
// should be available to the entire app
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
provide(dnnModId, { useValue: moduleId }),
provide(dnnPortalId, { useValue: portalId }),
provide(dnnSF, { useValue: $.ServicesFramework(moduleId) })
]);
I added declare var moduleId: any; so that typescript does not throw compilation errors. But this part is lost when bundled.
Here is how I define my opaque tokens:
import {OpaqueToken} from '@angular/core';
// Opaque tokens create tokens that can be used in the Dependency Injection Provider
export let dnnModId: any = new OpaqueToken('moduleId');
export let dnnPortalId: any = new OpaqueToken('portalId');
export let dnnTabId: any = new OpaqueToken('tabId');
export let dnnSF: any = new OpaqueToken('sf');
MY ERROR
I get an error on the following line:
core_1.provide(app_token_1.dnnModId, { useValue: moduleId
In my bundled .js file for the app.
the error is
app.min.js Uncaught ReferenceError: moduleId is not defined
QUESTION:
Can someone help me figure out why this works in development but not once I bundle my files together?
A huge thanks in advance
