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.

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