angular - SystemJS 不会从 node_modules 加载 angular2

Question

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

我安装了所有东西(使用 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';

Typescript 知道如何将它转换成我的 .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

当然，现在我们可以选择使用 Angular CLI 来为我们启动我们的项目，而不会遇到这些令人头疼的问题，Angular CLI 使用 Webpack。尽管如此，我仍然是 SystemJS 的忠实粉丝，因为它实现了我们将保留的 W3 标准! Webpack 随时可能被新人取代。