Uncaught Error: Template parse errors: 'app-home' is not a known element:

Question

When trying to load my home.component.html in my app.component.htmlI’m getting the following error:

compiler.js:1021 Uncaught Error: Template parse errors:
'app-home' is not a known element:

Man app.module.ts and this as follows:

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

import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

my module home.module.ts and home.component.ts are as follows:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";


import { HomeComponent } from "./home.component";


@NgModule({
    declarations:[
        HomeComponent
    ],

    imports:[
        CommonModule
    ]
})

export  class HomeModule{

}

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

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


export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

When trying to perform the following action on app.compoment.html:

<h1>Teste Angular</h1>
<app-home></app-home>

is returned me this error. Someone would know how to solve?

Answer 1

You have to add the Exports tag to the components you want to be visible to other modules.

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";


import { HomeComponent } from "./home.component";


@NgModule({
    declarations:[
        HomeComponent
    ],
   exports:[
        HomeComponent
    ],
    imports:[
        CommonModule
    ]
})

export  class HomeModule{

}