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

Question

我会尽量保持简短。

我遇到的问题是这个 SO 问题的扩展

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

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

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

这是我的 angular 应用程序的 index.html 的一部分，它使用令牌替换进行了预处理：

<!-- 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; 这样打字稿就不会抛出编译错误。 但是这部分在捆绑时丢失了。

这是我定义不透明令牌的方式：

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 未捕获的 ReferenceError：moduleId 未定义

题：

有人可以帮我弄清楚为什么这在开发中有效，但一旦我将文件捆绑在一起就不行吗？

提前致谢

Answer 1

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

我不得不改变

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

到

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

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

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

Answer 2

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