我会尽量缩短。
我遇到的问题是这个SO问题的扩展
我正试图将javascript变量从"页面级别">传递到我的angular 2应用程序中的服务中。在上述SO问题的答案中，我遵循了冈特的指示。
我使用了一个不透明的令牌来捕获页面变量名，并将它们传递给应用程序构造函数。当我在开发中时，这非常有效，但一旦我尝试捆绑应用程序，它就会停止工作。我使用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) })
]);
我添加了声明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未捕获引用错误：未定义模块ID
问题：
有人能帮我弄清楚为什么这在开发中有效，但一旦我把文件捆绑在一起就不行了吗？
提前感谢
这是我的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文件的简单手动脚本标记导入，我解决了加载顺序问题。
在tsconfig.json中"module"："commonjs"在下面"compilerOptions">