Question

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

到目前为止我的流程看起来像这样：

复制到我的 build / node_modules 文件夹中：
- 芯-JS /客户端/ shim.min.js
- zone.js / DIST / zone.js
- 反映元数据/ Reflect.js
- systemjs / DIST / system.src.js
将 / scripts 网址映射到ExpressJS中的 node_modules 文件夹

在我的索引页面上，在脚本标记中获取上述库并加载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))

最后，我的 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上的an issue opened for 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);`

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

1 个答案: