Template parse errors: Components on an embedded template

invalid template tag. a directive is expected to be associated with the template tag.
template parse errors angular 8
html template directives
angular template parse errors is not a known element
uncaught error: template parse errors:
template parse errors can't bind to
template parse errors in angular unit testing
lightning web components template if:true

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 {
}

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.

Use custom component selector on <template> tag to avoid invalid , Result in exception. Unhandled Promise rejection: Template parse errors: Components on an embedded template: TimetableRowComponent. Introduction to the ng-template directive. Like the name indicates, the ng-template directive represents an Angular template: this means that the content of this tag will contain part of a template, that can be then be composed together with other templates in order to form the final component template.


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

Template parse errors: Components on an embedded , Adding and using other components/directives to/within the tabPageComponent throws me the error Template parse errors: Components on an embedded  Removing values from the dependsOn property can cause errors when you deploy the template. If you get an error, add the dependency back into the template. If that approach doesn't solve the circular dependency, consider moving part of your deployment logic into child resources (such as extensions or configuration settings). Configure those


For me it was because I wasn't importing the component into the main module and referencing it in "declarations".

Adding a div causes "Uncaught Error: Template parse errors" · Issue , Without any obvious cause, adding a div to a component template causes Uncaught Error: Template parse errors import { Comp Add other useful components that are not present in the standard library. The embedded template library has been designed for lower resource embedded applications. It contains a set of containers, algorithms and utilities, some of which emulate parts of the STL. There is no dynamic memory allocation. The library makes no use of the heap.


Template parse errors please help me when i change from , Uncaught Error: Template parse errors: Angular directive, then add '​CommonModule' to the '@NgModule.imports' of this component. Property binding ngOutletContext not used by any directive on an embedded template. Failed: Template parse errors: 'app-xxx' is not a known element: 1. If 'app-xxx' is an Angular component, then verify that it is part of this module. 2. If 'app-xxx' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]


Components with Custom Templates in Angular 2 (beta.7) // Michael , This gives us a number of ways to inject custom templates (example). which according to the docs “Represents an Embedded Template that can be "​changed after checked" error. this.cdr.detach(); } ngAfterViewInit() { // view. Angular 2 Templates: Will It Parse? by Brad Green (Angular Official Blog)  Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.


Template parse errors, You can then subscribe to it within the contact.component.ts to obtain the returned compiler.js:20600 Uncaught Error: Template parse errors: Property binding ngif not used by any directive on an embedded template. Without any obvious cause, adding a div to a component template causes Uncaught Error: Template parse errors import { Comp Angular: 2.2.1 Angular-cli: 1.0.0-beta.21 Browser: all Language: Typescript Generated app via ng new, added d3 v4.