angular - 使用 systemJs 加载 angular2 库

标签 angular systemjs

我正在关注来自 angular.io 的 Angular2 快速入门指南 他们利用 systemJs 加载应用程序。

angular2、rx.js 和 angular2.dev.js 是通过脚本引用加载的,而不是导入..

有没有办法导入这些脚本?

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
  </body>

最佳答案

包含 Angular2 包会使用 System.register 方法直接注册它的包。

也就是说,您还可以使用以下配置将 SystemJS 配置为按文件为每个模块加载 Angular2 文件,但效率较低:

<script src="node_modules/es6-promise/dist/es6-promise.js"></script>
<script src="node_modules/es6-shim/es6-shim.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
  System.config({
    defaultJSExtensions: true,
    map: {
      angular2: 'node_modules/angular2/src',
      rxjs: 'node_modules/rxjs'
    },
    packages: {
      app: {
        defaultExtension: 'js',
        format: 'register'
      },
      angular2: {
        defaultExtension: 'js',
      }
    }
  });
  (...)
</script>

在这两种情况下,都可以在您的应用程序中导入相应的模块(angular2/*rxjs/*)。

关于angular - 使用 systemJs 加载 angular2 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36120427/

相关文章:

angular - 如何将参数传递给 Angular 中的模态

javascript - Angular - 动态模块加载和编译

javascript - (SystemJS)XHR错误@ angular/commobundles/common.umd.js/http未找到

javascript - Angular 4 : error TS2300: Duplicate identifier 'PropertyKey'

javascript - JavaScript 文件顶部的 "format register"字符串是什么?

angularjs - Safari 中的混合 AngularJS 和 Angular 应用程序性能低下

angular - Karma 单元测试错误 : Unexpected value imported by the module. 请添加@NgModule 注释

javascript - 在 Angular 的 amcharts4 中点击自定义图例切换列系列

javascript - 基于 Canvas 的 Angular2 组件 : how to draw inside?

javascript - 用 systemjs 替换 requirejs——变量在本地范围内不可见