未能使用angular2导入导出类
未能使用angular2导入导出类
提问于 2015-12-03 09:56:54
因此，我一直试图遵循egghead.io的教程。然而，我似乎无法让step2工作。
我创建了这样的TodoInput类：
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'todo-input'
})
@View({
template: `
<div>This is written in the todoInput export class</div>
`
})
export class TodoInput{}并在helloWorld.ts中这样使用：
import{Component,View,bootstrap} from 'angular2/angular2';
import{TodoInput} from './TodoInput';
@Component({
selector: 'hello-world'
})
@View({
directives: [TodoInput],
template: `
<div>
<h1>This is a heading!</h1>
<todo-input/>
</div>
`
})
class HelloWorld{}
bootstrap(HelloWorld);最后，在index.html中使用hello-world标记如下：
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="node_modules/traceur/bin/traceur.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/angular2/bundles/angular2.min.js"></script>
</head>
<body>
<hello-world></hello-world>
<script>
System.import('src/helloWorld.js');
</script>
</body>
</html>当我尝试运行这个程序时，我会得到一个错误："GET /src/TodoInput“(404)："Not”。我做错了什么？
我正在运行这个版本的angular2：
"angular2/angular2.d.ts": {
"commit": "78d36dd49b6b55b9fdfe61776a12bf05c8b07777"
}回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-03 10:41:14
请看下面的示例
演示
您需要为.ts文件提供helloWorld文件扩展名。
System.import("src/helloWorld").catch(console.error.bind(console)); 休息很好。看看上面给出的链接。
Stack Overflow用户
发布于 2015-12-03 11:57:52
问题在于写index.html文件中的语句的顺序。以下是我的解决办法：
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="node_modules/traceur/bin/traceur.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
</head>
<body>
<hello-world></hello-world>
<script>
System.config({defaultJSExtensions:true});
</script>
<script src="node_modules/angular2/bundles/angular2.min.js"></script>
<script>
System.import('src/helloWorld').catch(console.error.bind(console));
</script>
</body>
</html>我还添加了System.config({defaultJSExtensions:true})以使src/helloWorld (没有扩展)工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34062805
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号