时间戳

首页 > 解决方案 > Angular 10 - NewComponent 不是已知元素

angular - Angular 10 - NewComponent 不是已知元素

问题描述

早上好！

我已经建立了一个新的 angular 10 项目。知道它使用 RouteLink 在 3 条路线 /dashboard、/movies 和 /characters 之间移动，方法是单击应用程序组件中 mat-toolbar 上的按钮。

这可以正常工作并且符合预期。现在，我想创建一个名为movie-card 的组件，它是/movies 路由中显示内容的一部分。

我在一个新文件夹中生成组件，创建一个 movies.module.ts 声明并导出该组件。之后，我将该模块导入 app.modules.ts 中。

然后我去movies.component.html，在“movies works！”之后，这是生成后的默认值，我写

<app-movie-card></app-movie-card>

这是正确的选择器名称。

我认为我已经正确完成了每一步，但是神秘的错误显示：

1. If 'app-movie-card' is an Angular component, then verify that it is part of this module.
2. If 'app-movie-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3 <app-movie-card></app-movie-card>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/screens/movies/movies.component.ts:10:16
    10   templateUrl: './movies.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MoviesComponent.

现在，是不是我做错了什么？？这是我的存储库，它在开发分支上被错误推送。

非常感谢你，很抱歉这个经常被问到的问题，我在这上面花了太多时间：S

标签： angular

解决方案

我想你忘了在 movies.module.ts 中声明 MoviesComponent

import { NgModule } from '@angular/core';
import { MovieCardComponent } from '../../components/movie-card/movie-card.component';
import { MoviesComponent } from './movies.component';

@NgModule({
  imports: [],
  exports: [MovieCardComponent, MoviesComponent],
  declarations: [MovieCardComponent, MoviesComponent],
  providers: [],
})
export class MoviesModule {}

推荐阅读