我有一个非常简单的应用程序设置:
Index.html:
<!doctype html>
<html>
<head>
<title>Angular 2</title>
<!-- Libraries -->
<script src="/lib/js/es6-shim.js"></script>
<script src="/lib/js/angular2-polyfills.js"></script>
<script src="/lib/js/system.src.js"></script>
<script src="/lib/js/rxjs/bundles/Rx.js"></script>
<script src="/lib/js/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="/app/reddit_v2/style/semantic/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/app/reddit_v2/style/styles.css">
</head>
<body>
<!-- Configure System.js, our module loader -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('/lib/spa/app.js')
.then(null, console.error.bind(console));
</script>
<!-- Menu Bar -->
<div class="ui menu">
<div class="ui container">
<a href="#" class="header item">
header
</a>
<div class="header item borderless">
<h1 class="ui header">
Angular 2
</h1>
</div>
</div>
</div>
<div class="ui main text container">
<app></app>
</div>
</body>
</html>
app.ts 这里我导入了 post.component ，它似乎工作得很好。
import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';
import { Post } from './components/post.component';
@Component({
selector: 'app',
templateUrl: '/app/app.html',
directives: [Post]
})
class App {
constructor() {
}
ngOnInit() {
console.log('app');
}
addArticle(title: HTMLInputElement, link: HTMLInputElement): void {
console.log(`adding title: ${title.value} and link: ${link.value}`);
}
}
bootstrap(App);
post.component.ts
import { Component } from 'angular2/core';
@Component({
selector: 'post',
template: '<p>test</p>'
//templateUrl: '/app/component/post.component.html'
})
export class Post {
constructor() {
}
ngOnInit() {
console.log('post');
}
}
一切都非常简单，但由于某种原因，当我运行它时，我得到:
angular2-polyfills.js:127 GET http://localhost:5000/lib/spa/components/post.component 404错误
angular2-polyfills.js:349 错误:XHR 错误(404 未找到)加载 http://localhost:5000/lib/spa/components/post.component (...)
为什么我会得到这个？看起来它正在寻找文件 http://localhost:5000/lib/spa/components/post.component
何时应将 .js 应用于请求并获取 http://localhost:5000/lib/spa/components/post.component.js '
编辑:
解决方案是:
<script>
System.config({
packages: {
'/lib/spa/': { defaultExtension: 'js' }
}
});
System.import('/lib/spa/app.js')
.then(null, console.error.bind(console));
</script>
包加载器 system.js 未正确配置..
最佳答案
您的配置错误。您配置了一个名为 app 的包，但您的包名为 lib。
尝试:
<script>
System.config({
packages: {
lib: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('lib/spa/app')
.then(null, console.error.bind(console));
</script>
关于javascript - 组件的 Angular 2 导入在 VS 中有效，但在浏览器中给出 404，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37373728/