Template parse errors: Components on an embedded template

Question

I have build a angular2 RC5 app which should use at least 2 levels of nesting components/directives to build clean and readable html templates.

Current structure is:

• pageComponent (general setup of a page with tabs)
• tabPageComponent (represents a single tab page)
• several components which build up the real tab page contents

Just using the pageComponent is no problem.

Adding and using the directive to display the tabPageComponent works as well.

Adding and using other components/directives to/within the tabPageComponent throws me the error

Template parse errors: Components on an embedded template

My html looks like this:

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>

If I just use plain html in tabPageComponent.html and do not declare any direcives everything is working as expected. As soon as I add another of my self defined directives the error occurs.

Is it possible to usa nested directives? What might cause the error I encounter?

If further code is needed to explain the problem or help find the error, please ask.

Update

This is my @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 {
}

Answer 1

In my case the solution is rather simple: rename one of the selectors for a component.

Never ever create directives with the name 'template'.

This name was quite descriptive for the component I created but 'template' is also the name of a html tag, see http://www.html.am/tags/html-template-tag.cfm for a description and usage examples.

Answer 2

This is a terrible error message.

It can occur if you're applying a @Component to a <ng-template> instead of a @Directive.

I came across this error when using Angular Material Portals, and trying to create a custom directive.

Yes it is valid to put a directive on a <ng-template> as shown here.

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