Pass javascript page level variable into bundled Angular2 RC 1 app

Question

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

Answer 1

This turned out to be an issue with my CMS. My CMS took the javascript files and added them to the top of the page.

I had to change

[Javascript:{path: "~/my-app/systemjs.config.js"}]

to

<script src="/DesktopModules/regentsigns-app/systemjs.config.js"></script>

The top example is used by the CMS token replace function that parses the html page, it placed the bundled angular.min.js file above the selector and inline javascript that captured the global variables.

So by using the simple manual script tag import of the app.js files I fixed the load order issue.

Answer 2

在 tsconfig.json 中，你应该在 "compilerOptions" 下有 "module": "commonjs"