2

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.

6
  • 1
    in your module.ts, add import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; and then @NgModule({ ...schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) -- for more info:stackoverflow.com/a/39553713/8757883 Dec 16, 2019 at 0:53
  • 1
    Where are you trying to insert this component? Is it in AppModule or you created other modules? Dec 16, 2019 at 0: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. Dec 16, 2019 at 1:35
  • I have this problem occasionally. Terminate the dev server and restart. Dec 16, 2019 at 1:41
  • 1
    I strongly recommend against using the CUSTOM_ELEMENTS_SCHEMA for anything other than shallow unit testing; hiding the error is not the best solution. Dec 16, 2019 at 5:17

1 Answer 1

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.