Angular 4 can't find component created inside a module

Question

I have a pretty simple question.

I created a new angular project using the cli. I then created a module and component called home-page. Within homepage, I created a component called banner.

My main application can import the component just fine. But home page can't seem to import .

Here's my project structure :

├── app.component.html
├── app.component.sass
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── home-page
│   ├── banner
│   │   ├── banner.component.html
│   │   ├── banner.component.sass
│   │   ├── banner.component.spec.ts
│   │   └── banner.component.ts
│   ├── home-page.component.html
│   ├── home-page.component.sass
│   ├── home-page.component.spec.ts
│   ├── home-page.component.ts
│   └── home-page.module.ts
└── simple-grid.scss

Here's the home-page.component.ts:

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

@Component({
  selector: 'home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.sass']
})
export class HomePageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Here's the home-page.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BannerComponent } from './banner/banner.component';
import { HomePageComponent } from './home-page.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    BannerComponent,
    HomePageComponent
  ]
})
export class HomePageModule { }

home-page.component.html:

<div>
  <banner></banner>

</div>

banner.component.ts:

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

@Component({
  selector: 'banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.sass']
})
export class BannerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

banner.component.html:

<div id="app" class="container">
  <div class="row">
    <div class="col-4 center"><p>1</p></div>
    <div class="col-4 center"><p>2</p></div>
    <div class="col-4 center"><p>3</p></div>
  </div>
</div>

I know this type of question has been asked before, but they looked like they were asking about stranger imports. I think mine should be a lot more basic, so I'd like to know which step I missed or if I have a typo or something.

Thanks

Answer 1

Sometimes the issues are so petty that we do not care to look into that.

Check whether folder names are proper or not. Path provided in the module.ts for importing that component is proper or not.

e.g. import { SomeComponent } from './Some-Folder/'; However, SomeComponent is present in 'some-folder' not in 'Some-Folder' then it can give that issue. Character case must be same.

In windows, it may compile successfully but in linux environment it will definitely fail.

Provided this answers to those who have spent hours for this issue and came here after seeing the issue mentioned in the header.

Hope this is helpful to someone.

P.S. Just make sure to create the component using cli command only. It will save others valuable time.

Answer 2

I found the solution!

So Basically,

I was importing home-page.component into app.module and couldn't get banner.component to load because the home-page.component wasn't exporting it.

Importing home-page.module into app.module allowed me export its child components and worked without issue.

reposting the file structure for clarity:

├── app.component.html
├── app.component.sass
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── home-page
│   ├── banner
│   │   ├── banner.component.html
│   │   ├── banner.component.sass
│   │   ├── banner.component.spec.ts
│   │   └── banner.component.ts
│   ├── home-page.component.html
│   ├── home-page.component.sass
│   ├── home-page.component.spec.ts
│   ├── home-page.component.ts
│   └── home-page.module.ts
└── simple-grid.scss

TLDR; I lack experience with this framework and I hope this helps somebody.

Answer 3

You are missing an export statement in your HomePageModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BannerComponent } from './banner/banner.component';
import { HomePageComponent } from './home-page.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    BannerComponent,
    HomePageComponent
  ],
/////////////// added  below    ////////////////////////////////////
exports: [
    BannerComponent,
    HomePageComponent
  ]
})
export class HomePageModule { }