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

Question

这里是一些代码片段。

组件：

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
],

在 DashboardModule/DashboardComponent 中实施。html:

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

错误：

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

我到底做错了什么？

感谢您的帮助。

Answer 1

您需要在您的模块中添加此 schemas: [ CUSTOM_ELEMENTS_SCHEMA ]，因为需要使用 自定义 HTML 标签

Answer 2

我假设您也应该将 app-generalstatistics 组件添加到 DashboardModule 的 declarations: [] 中（实际上就在您使用它的地方）

Afaik NgModule 是模板的编译上下文。所以我们必须在每个使用它的模块中声明一个组件。

为什么？在我看来：否则编译可能需要一段时间，因为在那种情况下 Angular 将不得不去搜索组件定义，并且可能处于任何依赖关系中，包括第 3 方。

Answer 3

您不能使用父模块中的组件。在这种情况下，AppModule 是父模块，而 DashboardModule 是子模块。相反，我建议在您的 Generalstatistics 组件所在的位置创建一个 SharedModule，如下所示：

shared.module.ts

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

您的 Generalstatistics 组件将位于 ./app/shared/ 而不是根目录 ./app。

在 DashboardModule 中导入 SharedModule：

dashboard.module.ts

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

您还可以在任何其他想要使用 Generalstatistics 组件的模块中导入 SharedModule。

这里是另一个问题。

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

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

angular-components

angular