將 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"