express - 使用 ExpressJS 和 Angular2 时如何解决 @angular 依赖关系？

Question

我正在尝试使用 ExpressJS 和 Angular2 编写一个 Web 应用程序。Zone.js 似乎正在尝试（未成功）加载一些@angular 库，但我不确定如何修复它。

到目前为止，我的过程如下所示：

1. 复制到我的build/node_modules文件夹中：
   • 核心-js/client/shim.min.js
   • zone.js/dist/zone.js
   • 反射元数据/Reflect.js
   • systemjs/dist/system.src.js
2. 将/scripts URL映射到 ExpressJS 中的node_modules文件夹

3. 在我的索引页面上，在脚本标签中获取上述库并加载 SystemJS：

   System.config({
       packages: {
           app: {
               defaultExtension: 'js'
           },
           rxjs: {
               defaultExtension: 'js'
           }
       },
       map: {
           'rxjs': '/scripts/rxjs',
           '@angular': '/scripts/@angular'
       }
   })
   
   System.import('/app/bootstrap')
           .then(null, console.error.bind(console))
   

4. 最后，我的bootstrap.ts文件：

   import { bootstrap } from '@angular/platform-browser-dynamic'
   import { Component } from '@angular/core'
   @Component({
       selector: 'testing-ang2',
       template: '<span>WIP</span>'
   })
   export class Ang2TestComponent {}
   
   bootstrap(Ang2TestComponent)
   

---

但是，当我运行它时，我收到以下错误：

zone.js:101 GET http://localhost:3000/scripts/@angular/platform-browser-dynamic/ 404 (Not Found)
zone.js:323 Error: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:3000/scripts/@angular/platform-browser-dynamic
zone.js:101 GET http://localhost:3000/scripts/@angular/core/ 404 (Not Found)

我尝试将@angular库复制到我的build/node_modules 中，并将index.js文件从列出的每个文件夹中添加到<script>我的主页上的标签中，但这没有任何区别。

---

任何人都可以提出解决这个问题的方法吗？

Answer 1

上面的配置有两个主要问题：大多数@angular 库没有被复制，SystemJS 不知道如何找到它们。

要解决第一个问题，请将整个 @angular 和 rxjs 目录复制到 build/node_modules 目录中。

其次，SystemJS 需要像这样配置：

从github 上为 Angular2 打开的问题：

var map = {
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [ // <-----
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Add package entries for angular packages
  ngPackageNames.forEach(packIndex);
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);`