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:

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:

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

user_6795572 · Answer

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.

Angular 4 can't find component created inside a module

3 Answers