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:stackoverflow.com/a/39553713/8757883 — Akber Iqbal
– Akber Iqbal, Commented Dec 16, 2019 at 0:53
Where are you trying to insert this component? Is it in AppModule or you created other modules? — Jorge Mussato
– Jorge Mussato, Commented 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. — Pablo Aguirre de Souza
– Pablo Aguirre de Souza, Commented Dec 16, 2019 at 1:35
I have this problem occasionally. Terminate the dev server and restart. — Jake Shakesworth
– Jake Shakesworth, Commented Dec 16, 2019 at 1:41
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
– ForrestLyman, Commented Dec 16, 2019 at 5:17

Meziane · Accepted Answer · 2020-02-11 08:54:11Z

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

answered Feb 11, 2020 at 8:54

Meziane

1,7071 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't use component in Angular 8

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related