javascript - 将 javascript 页面级变量传递到捆绑的 Angular2 RC 1 应用程序中

Question

我会尽量保持简短。

我遇到的问题是 this SO question 的扩展

我正在尝试将 javascript 变量从“页面级别”传递到我的 Angular 2 应用程序中的服务中。我在上述问题的答案中遵循了 Gunter 的指示。

我使用不透明 token 来捕获页面变量名称并将它们传递到应用程序构造函数中。当我正在开发时，这非常有效，但是一旦我尝试捆绑应用程序，它就会停止工作。我使用 gulp-jspm-build 来捆绑我的应用程序，并将 ma​​ngle 设置为 false 以避免一些其他错误。

我的应用程序位于 CMS 内，CMS 会预处理我的应用程序的 index.html 并用值替换某些标记。

这是我的 Angular 应用程序的 index.html 的一部分，它通过 token 替换进行预处理:

<!-- 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>

注意[ModuleContext:ModuleId] - 它被替换为一个数字值，我需要在该页面上引导的 angularApp 中使用该数字值。

所以我的 main.ts 文件如下所示:

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) })
]);

我添加了declare var moduleId: any;，以便 typescript 不会引发编译错误。但捆绑后这部分就丢失了。

以下是我定义不透明标记的方法:

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');

我的错误

我在以下行中收到错误:

core_1.provide(app_token_1.dnnModId, { useValue: moduleId

在我为应用程序捆绑的 .js 文件中。
错误是

app.min.js Uncaught ReferenceError: moduleId is not defined

问题:

有人可以帮我弄清楚为什么这在开发中有效，但在我将文件捆绑在一起后却不起作用？

非常感谢

Answer 1

事实证明这是我的 CMS 的问题。我的 CMS 获取了 javascript 文件并将它们添加到页面顶部。

我必须改变

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

到

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

顶部示例由解析 html 页面的 CMS token 替换函数使用，它将捆绑的 angular.min.js 文件放置在选择器和捕获全局变量的内联 JavaScript 之上。

因此，通过使用 app.js 文件的简单手动脚本标记导入，我修复了加载顺序问题。