To keep this brief, the issue I'm facing is an extension of a Stack Overflow question regarding passing page-level variables into an Angular 2 app service.
Following Gunter's advice from the provided SO question, I attempted to pass a JavaScript variable from the "page level" into my Angular 2 app service. While it works flawlessly in development, bundling the app causes it to fail. I use gulp-jspm-build for bundling with mangle set to false to prevent other errors.
My Angular app resides within a CMS that preprocesses the index.html and replaces specific tokens with values.
The index.html snippet below undergoes token replacement:
<!-- 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>
<!-- Replace with actual path to system.config.js -->
[Javascript:{path: "~/my-app/systemjs.config.js"}]
<!-- APP selector where it is rendered-->
<my-app>Loading...</my-app>
Note the [ModuleContext:ModuleId] placeholder gets replaced with a necessary numeric value used by the bootstrapped Angular app on the page.
In my main.ts file, I have:
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;
// Providers & services should be available app-wide
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; to avoid compilation errors in TypeScript, but it gets lost during bundling.
Here's how I define my opaque tokens:
import {OpaqueToken} from '@angular/core';
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');
ERROR ENCOUNTERED
The error occurs at:
core_1.provide(app_token_1.dnnModId, { useValue: moduleId });
In the bundled .js file for the app, the error reads:
app.min.js Uncaught ReferenceError: moduleId is not defined
QUERY:
I need help understanding why this setup functions in development but fails post-bundling.
Thanks ahead of time!