CODEWITHSUNDEEP
angularangular-components
Mark
Mark

Reputation: 4950

Keep getting Uncaught (in promise): Error: Template parse errors: 'component' is not a known element:

Here are some code fragments.

Component:

import { Component } from '@angular/core';

@Component({
 selector: 'app-generalstatistics',
 templateUrl: './generalstatistics.component.html',
 styleUrls: ['./generalstatistics.component.css']
})
export class Generalstatistics  {
 public data: Array<Object>;
 constructor() { }
}

app.module.ts:

import { Generalstatistics } from './views/generalstatistics/generalstatistics.component';

   declarations: [
   ....
   Generalstatistics
],

Implementation in DashboardModule/DashboardComponent.html:

<div class="chart-wrapper mt-3 mx-3" style="height:70px;">
      <app-generalstatistics></app-generalstatistics>
    </div>

Error:

core.js:4002 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-generalstatistics' is not a known element:
1. If 'app-generalstatistics' is an Angular component, then verify that it is part of this module.
2. If 'app-generalstatistics' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the 
'@NgModule.schemas' of this component to suppress this message. ("
    </div>
    <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
      [ERROR ->]<app-generalstatistics></app-generalstatistics>
    </div>
  </div>
 "): ng:///DashboardModule/DashboardComponent.html

What exactly am I doing wrong?

Thanks for help.

Upvotes: 0

Views: 2655

Answers (3)

Matt U
Matt U

Reputation: 5118

You can't use a component from a parent module. In this case, the AppModule is the parent and DashboardModule is a child module. Instead, I suggest creating a SharedModule where your Generalstatistics component lives, like this:

shared.module.ts

@NgModule({
    imports: [CommonModule],
    declarations: [Generalstatistics],
    exports: [Generalstatistics]
})
export class SharedModule;

Your Generalstatistics component would be in ./app/shared/ instead of the root ./app.

Import SharedModule in DashboardModule:

dashboard.module.ts

@NgModule({
    imports: [
        CommonModule,
        SharedModule
    ],
    ...
})
export class DashboardModule;

You'd also import SharedModule in any other module that would want to use the Generalstatistics component.

Here is a similar answer to another question.

Upvotes: 1

ChrisY
ChrisY

Reputation: 1783

I assume you should add the app-generalstatistics component to the declarations: [] of your DashboardModule as well (Actually just where you use it)

Afaik the NgModule is the compilation context for the templates. So we have to declare a component in every module in which it is used.

Why? In my thinking: Otherwise the compilation would probably take a while because in that case Angular would have to go searching for the components definition and that could possibly be in any dependency including 3rd parties.

Upvotes: 1

A.khalifa
A.khalifa

Reputation: 2496

You need to add this schemas: [ CUSTOM_ELEMENTS_SCHEMA ] in your module, why because is required to use custom HTML tags

Upvotes: 0

Related Questions