在遵循 Beta.0 的 Angular2 快速入门时无法加载 boot.js

cannot load boot.js while following Angular2 Quickstart for beta.0

我已经升级到 Angular2@2.0.0-beta.0。 app.ts 和 boot.ts 都在我的 src 目录中(相对于 Quickstart 中的 app)。 src 和 index.html 在项目目录中 - angular2-oPost,就像快速入门示例一样。我已经尝试了很多东西,但总是得到 - boot.js 未找到,加载错误 boot.js 我的 index.html 加载脚本全部加载并且是:

<base href="/src"/>
<!--1. Load library links for ES6-related imports, then load angular2 modules -->
<script src="./angular2-oPost/node_modules/systemjs/dist/system.src.js"></script>
<script src="./angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="./angular2-oPost/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="./angular2-oPost/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="./angular2-oPost/node_modules/angular2/bundles/router.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>System.config({
  packages: {
    src: {
      format: 'register',
      defaultExtension: 'js'
      }
    }
  });
  System.import('src/boot').then(null, console.error.bind(console));
</script>

boot.ts 来自 Quickstart 并且很简单:

"use strict";
import { bootstrap }    from 'angular2/platform/browser';
import { ResidenceApp } from './app';
bootstrap( ResidenceApp );

app.ts 有一些语句用于导入、@Component、@View、@RouteConfig 和一个 bootstrap 语句。 None 加载。控制台错误语句是:

GET http://localhost/src/boot.js [HTTP/1.1 404 Not Found 31ms]
15:53:05.058 Error: Unable to load script http://localhost/src/boot.js
Error loading http://localhost/src/boot.js
Stack trace: error@http://localhost/angular2-oPost/node_modules/systemjs/dist/system.src.js:2506:18
[2]</</r.prototype.run@http://localhost/angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js:1:1994
[2]</</r.prototype.bind/<@http://localhost/angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js:1:1718

我正在使用 systemjs 版本 0.19.9 如果我将 System.import 语句更改为

System.import('src/boot.js')

然后找到并加载引导,但 app.js 成为新问题,如果它(或它们)是硬编码的,则依此类推。

需要更改什么?

尝试按以下顺序加载和配置库,

<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>

<script>
//configure system loader
     System.config({defaultJSExtensions: true});
</script>

<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>

<script>
 //bootstrap the Angular2 application
 System.import('dist/hello').catch(console.log.bind(console));
</script>

参考:https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html

与 QuickStart 的 SystemJS 配置不完全相同。你试过了吗:

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});

我在 main.ts 上遇到了同样的问题,将导入更改为

import {AppComponent} from './app.component';

应该可以解决问题

同样的错误发生在我身上。如果上述加载和配置库的顺序不适合您,请尝试此操作。

  1. 删除整个 node_modules 文件夹。
  2. "npm install"重新安装。

它可能起作用的原因是您可能会更改根名称,并且 "npm install" 的最后一个 运行 在构建 node_modules 时包含了绝对 Web 路径。

此外,还要注意你在index.html中定义的包。如果您更改任何包含该应用程序的文件夹名称,例如,如果您将名称从 "app" 更改为 "modules",您也需要在 "packages:" 中进行更改。

在我的例子中,我将启动放在 WebContent/boot 文件夹下,其中 WebContent 是 Web 根目录,所以这里是 index.html 中 System.config 的脚本:

  <script>
  System.config({
    packages: {
      modules: {
        format: 'register',
        defaultExtension: 'js'
      },
      boot: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('./boot/boot')
        .then(null, console.error.bind(console));
  </script>