CODEWITHSUNDEEP
angular
Eduard Maestro Martinez
Eduard Maestro Martinez

Reputation: 33

Angular 10 - NewComponent is not a known element

Good morning!

I have set up a new angular 10 project. Right know it uses RouteLink to move among 3 routes /dashboard, /movies, and /characters, through clicking a button on a mat-toolbar in the app component.

This works fine and as expected. Now, I want to create a component named movie-card, which is part of what will be shown in the /movies route.

I generate the component in a new folder, create a movies.module.ts which declares and exports that component. After that, I import that module in app.modules.ts.

Then I go to movies.component.html, and after "movies works!", which is the default after generation, I write

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

which is the proper selector name.

I think I have done every step right, however the mythical error shows:

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.

Now, is there something I did wrong?? Here is my repository, it is pushed with the error, on develop branch.

Thank you very much and sorry for this often asked question, I have spend too many hours on this :S

Upvotes: 3

Views: 3847

Answers (1)

Meadow
Meadow

Reputation: 317

I think you forgot to declare MoviesComponent in movies.module.ts

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

Upvotes: 5

Related Questions