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

Question

我会尽量保持简短。

我遇到的问题是

的扩展

我正在尝试将 javascript 变量从 "page level" 传递到我的 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] - 这将替换为我需要在 angular 应用程序中使用的数字值，该应用程序在此页面上启动。

所以我的 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 Uncaught ReferenceError: moduleId is not defined

问题：

谁能帮我弄清楚为什么这在开发中有效，但一旦我将我的文件捆绑在一起就不行了？

非常感谢

Answer 1

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

Answer 2

这原来是我的 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 文件的简单手动脚本标签导入，我解决了加载顺序问题。

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

Pass javascript page level variable into bundled Angular2 RC 1 app

javascript

dotnetnuke

typescript

jspm

angular

我的错误

问题：