Typescript Angular2-Angular2.dev.js:23501异常:在ArticleComponent上未找到指令注释
我正在跟随ng-book2编写一个简单的reddit克隆应用程序。到目前为止,我只有一个index.html文件和一个app.ts文件 现在在我的app.ts文件中,我声明了两个组件。第二个组件--Typescript Angular2-Angular2.dev.js:23501异常:在ArticleComponent上未找到指令注释,typescript,angular,angular2-directives,Typescript,Angular,Angular2 Directives,我正在跟随ng-book2编写一个简单的reddit克隆应用程序。到目前为止,我只有一个index.html文件和一个app.ts文件 现在在我的app.ts文件中,我声明了两个组件。第二个组件--reddit应该加载第一个组件--reddit文章和文章类。现在,在运行服务器时,出现以下错误: angular2.dev.js:23501异常:在上未找到指令注释 ArticleComponentBrowserDomAdapter.logError@ angular2.dev.js:23501Bro
reddit
应该加载第一个组件--reddit文章
和文章
类。现在,在运行服务器时,出现以下错误:
angular2.dev.js:23501异常:在上未找到指令注释
ArticleComponentBrowserDomAdapter.logError@
angular2.dev.js:23501BrowserDomAdapter.logGroup@
angular2.dev.js:23512ExceptionHandler.call@
angular2.dev.js:1185(匿名函数)@
angular2.dev.js:12489NgZone.\u notifyOnError@
angular2.dev.js:13533集合_1.StringMapWrapper.merge.onError@
angular2.dev.js:13437Zone.run@angular2 polyfills.js:1247(匿名)
函数)@angular2.dev.js:13456zoneBoundFn@
angular2 polyfills.js:1220lib$es6$promise$$internal$$tryCatch@
angular2 polyfills.js:468lib$es6$promise$$internal$$invokeCallback@
angular2 polyfills.js:480lib$es6$promise$$internal$$publish@
angular2 polyfills.js:451(匿名函数)@
angular2 polyfills.js:123微任务@angular2.dev.js:13488Zone.run@
angular2 polyfills.js:1243(匿名函数)@
angular2.dev.js:13456zoneBoundFn@
angular2 polyfills.js:1220lib$es6$promise$asap$$flush@
angular2 polyfills.js:262 angular2.dev.js:23501
STACKTRACE:BrowserDomAdapter.logError@
angular2.dev.js:23501ExceptionHandler.call@
angular2.dev.js:1187(匿名函数)@
angular2.dev.js:12489NgZone.\u notifyOnError@
angular2.dev.js:13533集合_1.StringMapWrapper.merge.onError@
angular2.dev.js:13437Zone.run@angular2 polyfills.js:1247(匿名)
函数)@angular2.dev.js:13456zoneBoundFn@
angular2 polyfills.js:1220lib$es6$promise$$internal$$tryCatch@
angular2 polyfills.js:468lib$es6$promise$$internal$$invokeCallback@
angular2 polyfills.js:480lib$es6$promise$$internal$$publish@
angular2 polyfills.js:451(匿名函数)@
angular2 polyfills.js:123微任务@angular2.dev.js:13488Zone.run@
angular2 polyfills.js:1243(匿名函数)@
angular2.dev.js:13456zoneBoundFn@
angular2 polyfills.js:1220lib$es6$promise$asap$$flush@
angular2 polyfills.js:262 angular2.dev.js:23501错误:无指令
在ArticleComponent上找到批注
在新BaseException()时
在DirectiveResolver.resolve()处
在运行时MetadataResolver.getDirectiveMetadata()
在
at Array.map(本机)
在Array.map()处
在运行时MetadataResolver.getViewDirectivesMetadata()
在TemplateCompiler.\u compileNestedComponentRuntime()
在
at Array.forEach(本机)
-----异步间隙------错误
在_getstacktracewithuncoughtror()
在Zone.fork()处
在Zone.bind()处
在bindArguments()处
在lib$es6$promise$promise$$promise.obj.(匿名函数)[as then]
()
在TemplateCompiler.\u CompileComponent运行时()
在TemplateCompiler.compileHostComponentRuntime()上
在运行时编译器\uu.compileInHost()
在DynamicComponentLoader_2;.loadAsRoot()处
在di_1.provide.useFactory()上
-----异步间隙------错误
在_getstacktracewithuncoughtror()
在Zone.fork()处
在NgZone.\u createInnerZone()
在新区域()
在createNgZone()
at平台参考应用程序()
在Object.bootstrap()处
在执行时()
在重新评估时()
在Object.execute()处
index.html:
<!doctype html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="resources/images/favicon.ico" />
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Configure System.js, our module loader -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<!-- Menu Bar -->
<div class="ui menu">
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="resources/images/ng-book-2-minibook.png">
ng-book 2
</a>
<div class="header item borderless">
<h1 class="ui header">
Angular 2 Simple Reddit
</h1>
</div>
</div>
</div>
<div class="ui main text container">
<reddit>Loading...</reddit> <!-- <--- Our app loads here! -->
</div>
</body>
</html>
角度2-简单Reddit
System.config({
包:{
应用程序:{
格式:'寄存器',
defaultExtension:'js'
}
}
});
System.import('app.js')
.then(null,console.error.bind(console));
角度2简单Reddit
加载。。。
app.ts:
import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';
@Component({
selector: 'reddit-article',
host: {
class: 'row'
},
template: `
<div class="four wide column center aligned votes"> <div class="ui statistic">
<div class="value"> {{ article.votes }}
</div>
<div class="label">
Points
</div>
</div>
</div>
<div class="twelve wide column">
<a class="ui large header" href="{{ article.link }}"> {{ article.title }}
</a>
<ul class="ui big horizontal list voters">
<li class="item">
<a href (click)="voteUp()">
<i class="arrow up icon"></i> upvote
</a> </li>
<li class="item">
<a href (click)="voteDown()">
<i class="arrow down icon"></i>
downvote
</a> </li>
</ul> </div>
`
})
class Article {
title: string;
link: string;
votes: number;
constructor(title: string, link: string, votes?: number) {
this.title = title;
this.link = link;
this.votes = votes || 0;
}
voteUp(): void {
this.votes += 1;
}
voteDown(): void {
this.votes -= 1;
}
}
class ArticleComponent {
article: Article;
constructor() {
this.article = new Article('Angular 2', 'http://angular.io', 10);
}
voteUp(): boolean {
this.article.voteUp();
return false;
}
voteDown(): boolean {
this.article.voteDown();
return false;
}
}
@Component({
selector: 'reddit',
directives: [ArticleComponent],
template: `
<form class="ui large form segment">
<h3 class="ui header">Add a Link</h3>
<div class="field">
<label for="title">Title:</label> <input name="title" #newtitle>
</div>
<div class="field">
<label for="link">Link:</label>
<input name="link" #newlink>
</div>
<button (click)="addArticle(newtitle, newlink)"
class="ui positive right floated button">
Submit link
</button>
</form>
<div class="ui grid posts">
<reddit-article>
</reddit-article>
</div>`
})
class RedditApp {
constructor() {
}
addArticle(title: HTMLInputElement, link: HTMLInputElement): void {
console.log(`Adding article title: ${title.value} and link: ${link.value}`);
}
}
bootstrap(RedditApp);
从'angular2/platform/browser'导入{bootstrap};
从'angular2/core'导入{Component};
@组成部分({
选择器:“reddit文章”,
主持人:{
类别:“行”
},
模板:`
{{article.voces}}
要点
-
-
`
})
班级文章{
标题:字符串;
链接:字符串;
投票:数目;
构造函数(标题:字符串,链接:字符串,投票?:编号){
this.title=标题;
this.link=link;
this.voces=投票数| | 0;
}
voteUp():void{
这1.5票+=1;
}
voteDown():void{
这1.1票-=1;
}
}
类ArticleComponent{
第条:第条;
构造函数(){
this.article=新文章('Angular 2','http://angular.io', 10);
}
voteUp():布尔值{
this.article.voteUp();
返回false;
}
voteDown():布尔值{
this.article.voteDown();
返回false;
}
}
@组成部分({
选择器:“reddit”,
指令:[ArticleComponent],
模板:`
添加链接
标题:
链接:
提交链接
`
})
类RedditApp{
构造函数(){
}
addArticle(标题:HTMLInputElement,链接:HTMLInputElement):无效{
log(`Adding article title:${title.value}和link:${link.value}`);
}
}
bootstrap(RedditApp);
您在错误的类上定义了@组件
:文章
,而不是文章组件
。您可以在RedditApp
类的directives
属性中设置ArticleComponent
类
您可以通过以下方式进行更改:
class Article {
(...)
}
@Component({
(...)
})
class ArticleComponent {
(...)
}
@Component({
(...)
})
class RedditApp {
(...)
}
您在错误的类上定义了
@Component
:而不是ArticleComponent
。您可以在directiv中设置ArticleComponent
类