Question

我会尽量保持这个。

的扩展

我正在尝试将javascript变量从＆＃34;页面级别＆＃34; 传递到我的angular 2应用中的服务中。我在上面的SO问题的答案中遵循了Gunter的指示。

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

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

以下是我的角度应用程序的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未捕获的ReferenceError：未定义moduleId

问题：

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

提前非常感谢

Answer 1

这对我的CMS来说是一个问题。我的CMS使用了javascript文件并将它们添加到页面顶部。

我不得不改变

mainMenu = function() {
  var dropdown_panel, main_header, main_menu_dropdown_timer, slideUpPanel, startTimer, stopResetTimer;
  dropdown_panel = $(".main-menu-dropdown-panel .row");
  main_header = $(".template-index .main-header");
  HEADER.find(".main-menu .widescreen .dropdown > a").mouseenter(function() {
    var autoHeight, curHeight, dropdown, sub_nav;
    dropdown = $(this).parent();
    sub_nav = dropdown.find(".sub-nav .columns");
    if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu') && Modernizr.touch) {
      if ($('.main-header').hasClass('dropdown-open')) {
        if (dropdown.hasClass("active")) {
          startTimer();
        }
      } else {
        $('.main-header .bg').fadeIn();
      }
    }
    if (dropdown.hasClass("active")) {
      slideUpPanel();
    } else if ($('.main-header').hasClass('dropdown-open')) {
      dropdown_panel.find(".columns").animate({
        opacity: 0
      }, 200);
      dropdown_panel.find('.columns').remove();
      HEADER.find(".main-menu .dropdown").removeClass('active');
      dropdown.addClass("active");
      sub_nav.clone().appendTo(".main-menu-dropdown-panel .row");
      dropdown_panel.find(".columns").delay(200).animate({
        opacity: 1
      }, 200);
      curHeight = dropdown_panel.height();
      autoHeight = dropdown_panel.css('height', 'auto').outerHeight();
      dropdown_panel.height(curHeight).animate({
        height: autoHeight
      }, 400);
    } else {
      dropdown_panel.find('.columns').remove();
      $('.main-header').addClass('dropdown-open');
      dropdown.addClass("active");
      sub_nav.clone().appendTo(".main-menu-dropdown-panel .row");
      dropdown_panel.slideDown(400, function() {
        return dropdown_panel.css("height", dropdown_panel.outerHeight());
      });
      dropdown_panel.find(".columns").delay(200).animate({
        opacity: 1
      }, 200);
    }
    return false;
  });
  slideUpPanel = function() {
    $('.main-header').removeClass('dropdown-open');
    dropdown_panel.find(".columns").animate({
      opacity: 0
    }, 200);
    return dropdown_panel.delay(200).slideUp(function() {
      HEADER.find(".main-menu .dropdown").removeClass('active');
      dropdown_panel.find('.columns').remove();
      return dropdown_panel.css('height', 'auto');
    });
  };
  main_menu_dropdown_timer = '';
  if (Modernizr.touch === false) {
    $('.main-header').mouseenter(function() {
      if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu')) {
        $('.main-header .bg').fadeIn();
      }
      return stopResetTimer();
    }).mouseleave(function() {
      if ($('.main-header').hasClass('dropdown-open')) {
        return startTimer();
      } else {
        if (PAGE.hasClass('template-index') && main_header.css("position") === "absolute") {
          return $('.main-header .bg').stop(true, true).fadeOut();
        }
      }
    });
  }
  startTimer = function() {
    return main_menu_dropdown_timer = setTimeout((function() {
      slideUpPanel();
      if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu')) {
        return $('.main-header .bg').delay(300).fadeOut();
      }
    }), 500);
  };
  return stopResetTimer = function() {
    return clearTimeout(main_menu_dropdown_timer);
  };
};
mainMenu();

到

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

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

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

Answer 2

在tsconfig.json中，你应该有 “module”：“commonjs” 下 “compilerOptions”

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

我的错误

问题：

2 个答案: