【问题标题】:Keep getting Uncaught (in promise): Error: Template parse errors: 'component' is not a known element:不断获得未捕获(承诺):错误:模板解析错误:“组件”不是已知元素:
【发布时间】:2020-03-21 03:35:27
【问题描述】:

这里有一些代码片段。

组件:

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

我到底做错了什么?

感谢您的帮助。

【问题讨论】:

  • 我假设您也应该将 app-generalstatistics 组件添加到您的 DashboardModuledeclaration: [] 中。 NgModule 是模板 afaik 的编译上下文,因此我们必须在使用它的每个模块中声明一个组件。否则编译可能需要一段时间,因为在这种情况下,Angular 将不得不去搜索组件。它可能存在任何依赖关系,包括第 3 方。

标签: angular angular-components


【解决方案1】:

我假设您也应该将app-generalstatistics 组件添加到您的DashboardModuledeclarations: [] 中(实际上就是您使用它的地方)

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

为什么?在我看来:否则编译可能需要一段时间,因为在这种情况下,Angular 将不得不去搜索组件定义,并且可能存在任何依赖项,包括第 3 方。

【讨论】:

    【解决方案2】:

    您不能使用父模块中的组件。在这种情况下,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。

    这是另一个问题的similar answer

    【讨论】:

    • 我有一个 views 文件夹,其中有两个子文件夹。在一个子文件夹中,我有 DashboardModule 模块。那就是我试图实现通用统计组件的地方,它住在另一个子文件夹中。所以,不确定是否要创建共享模块。
    • @Mark 我认为您会为 SharedModule 创建另一个子文件夹,然后将其导入到导入中的 DashboardModule 中,就像我在回答中提到的那样。您不能简单地通过路径导入组件。组件必须由其包含的模块导出,然后必须将该模块导入您要使用该组件的另一个模块中。
    • 我想我刚刚成功了。我将与 Generalstatictics 代码相关的应用程序模块移至 DashboardModule 并开始工作。
    【解决方案3】:

    你需要在你的模块中添加这个schemas: [ CUSTOM_ELEMENTS_SCHEMA ],因为需要使用自定义HTML标签

    【讨论】:

    • 您能解释一下原因吗?什么模块,应用程序?
    • @Mark 希望有用
    • 添加架构:[ CUSTOM_ELEMENTS_SCHEMA ] 到应用模块没有成功。
    猜你喜欢
    • 2018-01-24
    • 2018-05-24
    • 1970-01-01
    • 2021-03-25
    • 1970-01-01
    • 1970-01-01
    • 2018-10-11
    • 2018-01-03
    • 1970-01-01
    相关资源
    最近更新 更多