模板解析错误：嵌入式模板上的组件答案

【问题标题】：Template parse errors: Components on an embedded template模板解析错误：嵌入式模板上的组件
【发布时间】：2016-09-05 10:19:52
【问题描述】：

我已经构建了一个 angular2 RC5 应用程序，它应该使用至少 2 级嵌套组件/指令来构建干净可读的 html 模板。

目前的结构是：

pageComponent（带有标签页的一般设置）
tabPageComponent（代表单个标签页）
构建真实标签页内容的几个组件

只用pageComponent也没问题。

添加和使用指令来显示 tabPageComponent 也可以。

在 tabPageComponent 中添加和使用其他组件/指令会引发错误

模板解析错误：嵌入模板上的组件

我的 html 看起来像这样：

pageComponent.html

<p-tabView>
    <p-tabPanel header="Tab 1">
        <tab-template></tab-template> /* this references tabPageComponent */
    </p-tabPanel>
    <p-tabPanel header="Tab 2">
        Content 2
    </p-tabPanel>
</p-tabView>

tabPageComponent.html

<anotherComponent></anotherComponent>

如果我只是在tabPageComponent.html 中使用纯 html 并且不声明任何指令，那么一切都会按预期工作。一旦我添加另一个我自己定义的指令，就会发生错误。

可以使用嵌套指令吗？什么可能导致我遇到的错误？

如果需要更多代码来解释问题或帮助查找错误，请询问。

更新

这是我的@ngModule：

// Left out several import statements
@NgModule({
    declarations: [
        AdminAppComponent,
        TestComponent,
        OrdersComponent,
        TemplatesComponent,
        TemplateComponent,
        TemplatePageComponent,
        UsersComponent,
        UserComponent,
        StatsComponent,
        ProvidersComponent,
        ProviderComponent,
        AccessDeniedComponent,
        LoginComponent,
        // ComplexElementComponent,
        // ComplexElementListComponent,
        // BaseElementComponent,
        // BaseElementListComponent,
        WikiComponent,
        GrowlComponent
    ],
    providers: [
        LocalStorageService,
        ApicallsService,
        AuthService,
        FileUploadService,
        SettingsService,
        SystemobservablesService,
        FormBuilder,
        AdminAuthGuard
    ],
    imports: [
        BrowserModule, 
        FormsModule, 
        HttpModule,
        TabViewModule,
        //RouterModule 
        routing
    ],
    bootstrap: [AdminAppComponent],
})
export class AdminModule {
}

【问题讨论】：

您使用的是哪个 Angular2 版本？您能否将@NgModule() 添加到您的问题中？
Angular 版本是 RC5
在我看来像是某个地方的语法错误。我会创建简单的 plunker 来反映您的结构，以便其他人可以看到并测试它。

标签： angular angular2-template angular2-directives

【解决方案1】：

在我的情况下，解决方案相当简单：重命名组件的选择器之一。

从不创建名为“模板”的指令。

这个名称对于我创建的组件来说是非常具有描述性的，但“模板”也是一个 html 标记的名称，请参阅 http://www.html.am/tags/html-template-tag.cfm 了解说明和使用示例。

【讨论】：

【解决方案2】：

这是一个可怕的错误消息。

如果您将@Component 应用于<ng-template> 而不是@Directive，则可能会发生这种情况。

我在使用 Angular Material Portal 并尝试创建自定义指令时遇到了这个错误。

是的，将指令放在<ng-template> 上是有效的，如下所示。

https://material.angular.io/cdk/portal/overview

【讨论】：

【解决方案3】：

对我来说，这是因为我没有将组件导入主模块并在“声明”中引用它。

【讨论】：