Question

我正在使用这个： https://github.com/AngularClass/angular2-webpack-starter 在这个文件src / app / home / home.component.ts中，我用一个新的“花式按钮”指令修改它，并像这样包含它：

@Component({
  selector: 'fancy-button',
  template: `<button>clickme</button>`
})
export class FancyButton {}

@Component({
  // The selector is what angular internally uses
  // for `document.querySelectorAll(selector)` in our index.html
  // where, in this case, selector is the string 'home'
  selector: 'home',  // <home></home>
  // We need to tell Angular's Dependency Injection which providers are in our app.
  providers: [
    Title
  ],
  // Our list of styles in our component. We may add more to compose many styles together
  styleUrls: [ './home.component.css' ],
  // Every Angular template is first compiled by the browser before Angular runs it's compiler
  templateUrl: './home.component.html',
  directives: [FancyButton],
})

然后在模板中：src / app / home / home.component.html

我补充说：

<fancy-button></fancy-button>

我收到错误消息main.browser.ts:25Error: Template parse errors:(…)

当我从home.component.html删除时，没有投诉。我该如何解决这个问题？我真的不明白这是为什么抱怨...

Answer 1

您必须执行以下操作：

import { HomeComponent, FancyButton  }  from './home.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent, FancyButton ], <== add this
  bootstrap:    [ HomeComponent ]
})
export class AppModule { }

https://angular.io/docs/ts/latest/guide/ngmodule.html

此外，如果您点击(…)，则会显示完整的错误消息

尝试在angular2-webpack中创建新组件/指令时获取模板解析错误？

1 个答案: