在遵循 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';
应该可以解决问题
同样的错误发生在我身上。如果上述加载和配置库的顺序不适合您,请尝试此操作。
- 删除整个 node_modules 文件夹。
- "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>
我已经升级到 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';
应该可以解决问题
同样的错误发生在我身上。如果上述加载和配置库的顺序不适合您,请尝试此操作。
- 删除整个 node_modules 文件夹。
- "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>