Search code examples
angulartypescriptcomponents

Angular NG8001 error. component just works on one page, not tohers

Yesterday I finished working on one of my project pages "home.component" and today when I want to use some of the components on other pages but they don't work, the only ones that work is "home" and the app.component.html. Ther error:

ERROR
src/app/pages/sign-in/sign-in.component.html:2:1 - error NG8001: 'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <app-header></app-header>
  ~~~~~~~~~~~~

  src/app/pages/sign-in/sign-in.component.ts:5:16
    5   templateUrl: './sign-in.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignInComponent.

My folders follow this order:

-- /src
|-- /app
| | -- /core
| | | -- /components
| | | | -- /header
| | | | | -- /header.component.css
| | | | | -- /header.component.html
| | | | | -- /header.component.ts
| | | |
| | | | -- /slider
| | | | | -- /slider.component.css
| | | | | -- /slider.component.html
| | | | | -- /slider.component.ts
| | | 
| | | -- /pages
| | | | -- /home
| | | | | -- /home.component.css
| | | | | -- /home.component.html
| | | | | -- /home.component.ts
| | | |
| | | | -- /sign-in
| | | | | -- /sign-in.component.css
| | | | | -- /sign-in.component.html
| | | | | -- /sign-in.component.ts

header.component.ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  title = 'travel-blog';
}

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  title = 'travel-blog';
}

home.component.html

<app-header></app-header>
/*a bunch of code about this site*/
<app-slider></app-slider>
<app-footer></app-footer>

sign-in.component.ts

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

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})
export class SignInComponent {
  title = 'travel-blog';
}

app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactFormComponent } from './core/components/contact-form/contact-form.component';
import { FooterComponent } from './core/components/footer/footer.component';
import { HeaderComponent } from './core/components/header/header.component';
import { SliderComponent } from './core/components/slider/slider.component';
import { AboutUsComponent } from './pages/about-us/about-us.component';
import { AsiaComponent } from './pages/asia/asia.component';
import { EuropeComponent } from './pages/europe/europe.component';
import { ItalyComponent } from './pages/europe/italy/italy.component';
import { SpainComponent } from './pages/europe/spain/spain.component';
import { HomeComponent } from './pages/home/home.component';
import { LastBlogsComponent } from './pages/last-blogs/last-blogs.component';
import { PatreonComponent } from './pages/patreon/patreon.component';
import { SignInComponent } from './pages/sign-in/sign-in.component';
import { SignUpComponent } from './pages/sign-up/sign-up.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sign-in', component: SignInComponent },
  { path: 'sign-up', component: SignUpComponent },
  { path: 'spain', component: SpainComponent },
  { path: 'italy', component: ItalyComponent },
  { path: 'europe', component: EuropeComponent },
  { path: 'asia', component: AsiaComponent },
  { path: 'last-blogs', component: LastBlogsComponent },
  { path: 'patreon', component: PatreonComponent },
  { path: 'about-us', component: AboutUsComponent },
]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SliderComponent,
    ContactFormComponent,
    FooterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

app.component.html

<router-outlet></router-outlet>

I think the problem might be with the router-outlet because in the app.component.html i can use the components.

Thanks for your time and help.

I have tryed the following:

  • Restarting server, closing terminal and opening server with a new terminal
  • Importing the component manually with th exact route, but angular doesn't "find" it
Solution

  • The rule of thumb is when you want to use your component you need to define the component in the declarations list

    Since you already defined the SignInComponent in your route you should add it inside your code like this

    @NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SliderComponent,
    ContactFormComponent,
    FooterComponent,
    HomeComponent,
    SignInComponent // add here
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }