Can't use component in Angular 8

Question

I'm learning Angular 8 and even after searching for an hour on other questions I couldn't solve this. The solution seems to be under my nose but I can't see it. I keep getting this error:

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

This is my app.module.ts code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { ServerComponent } from './servers/server.component';
import { SubServerComponent } from './sub-server/sub-server.component';
import { GreenComponent } from './green/green.component';



@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    SubServerComponent,
    GreenComponent,


  ],
  imports: [
    BrowserModule, 
    FormsModule, 

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and this is the component code:

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

@Component({
  selector: 'app-green',
  templateUrl: './green.component.html',
  styleUrls: ['./green.component.css']
})
export class GreenComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Any help will be appreciated.

in your `module.ts`, add `import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';` and then `@NgModule({ ...schemas: [ CUSTOM_ELEMENTS_SCHEMA ] })` -- for more info:https://stackoverflow.com/a/39553713/8757883 — Akber Iqbal, Dec 16 '19 at 00:53
Where are you trying to insert this component? Is it in `AppModule` or you created other modules? — Jorge Mussato, Dec 16 '19 at 00:53
Apparently Visual Studio Code got confused. A programmer friend told me to reload using Cmd+Shit+P and select Developer:reload window and the error disappeared. — Pablo Aguirre de Souza, Dec 16 '19 at 01:35
I have this problem occasionally. Terminate the dev server and restart. — Jake Shakesworth, Dec 16 '19 at 01:41
I occasionally have to reload the VS Code window as well to eliminate false errors. It's annoying sometimes. — Matt U, Dec 16 '19 at 01:42
I strongly recommend against using the CUSTOM_ELEMENTS_SCHEMA for anything other than shallow unit testing; hiding the error is not the best solution. — ForrestLyman, Dec 16 '19 at 05:17

score 1 · Answer 1 · answered Feb 11 '20 at 08:54

You must also import the GreenComponent in the AppComponent, what you abviously didn't. It is not sufficient to import the GreenComponent in the AppModule as one could believe.

import { Component } from '@angular/core';
import { GreenComponent } from './green/green.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],  

})
export class AppComponent  {
  ...
}

Can't use component in Angular 8

1 Answers1