SystemJS不会从node_modules加载angular2

Question

我想Angular2添加到我的当前角度1.X项目。我使用yo angular项目，启用打字稿。

我安装（使用NPM安装）的一切：

<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>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>

并且我增加了如下配置：

     <script>
        System.config({
          packages: {
            app: {
              format: 'cjs',
              defaultExtension: 'js'
            }
          },
          paths: {
            'angular2/upgrade': '../node_modules/angular2/upgrade'
          }

        });

         System.import('scripts/bootstrap.js').then(null, console.error.bind(console));

    </script>

现在，我的Bootstrap.ts内使用：

import {UpgradeAdapter} from 'angular2/upgrade';

打字稿知道如何transpile吧，到我的.tmp：

var upgrade_1 = require('angular2/upgrade');

但SystemJS不知道如何加载进口。我得到404错误：

GET http://localhost:9000/node_modules/angular2/upgrade 404 (Not Found)

我的目录结构：

root
- .tmp
- node_modules
- app
|-- index.html
|-- scripts

我缺少的是在这里吗？

Answer 1

考虑由Angular2 quickstart项目作为最佳实践所采取的做法。

在这里，我们看到index.html它们，使用脚本标记，加载..

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>

这将确保所有的依赖和垫片到位。一切应使用需求SystemJS加载。

这确保了并非一切都是装了前面，但根据需要，而不是加载。这样，最初的应用程序加载的速度要快得多，因为少必须加载。使用时，模块，如RxJS等然后被装载。

装载NG2的SystemJS代码systemjs.config.js发现这里列出便于参考..

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

不要忘记systemjs.config.js如systemjs-angular-loader.js引用文件

当然，这些天我们已经采用了棱角分明CLI揭开序幕我们的项目对我们来说没有这些头疼的选择，角CLI使用的WebPack。尽管这样，我仍然坚定SystemJS粉丝，因为它实现了W3标准，将继续留在美国！的WebPack可以在任何时间一个新人所取代。