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

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可能会在任何时候被新手取代。

SystemJS不会从node_modules加载angular2

1 个答案: