SystemJS不会从node_modules加载angular2

Question

我正在尝试将Angular2添加到我当前的Angular 1.X项目中.我正在使用yo angular启用TypeScript的项目.

我安装了所有东西(使用npm install):

<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';

打字稿知道如何将它转换成我的.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 快速入门项目所采用的方法视为最佳实践。

在这里我们在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

当然，现在我们可以选择使用 Angular CLI 来启动我们的项目，而无需这些麻烦，Angular CLI 使用 Webpack。尽管如此，我仍然是 SystemJS 的忠实粉丝，因为它实现了我们将保留的 W3 标准！Webpack 随时可能被新来者取代。