Angular routing not working. Throwing error component is not part of a module

3
votes

I am creating Angular 4 application and trying to implement basic routing. My application compiles fine but my routing isn't working

I am getting the error Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

I am yet to configure routerlinks but presume the routing should work from the requests in the browser.

When i click the home, the contents of home.component.html should load similarly clicking on edit, new , movie should do the same respectively

COuld somebody tell if i am going anywhere wrong in my imports. Specifically

with movie,home,edit & new

Here is the structure of my folders

enter image description here

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {FormsModule} from '@angular/forms';
    import {HttpModule} from '@angular/http'
    import { AppComponent } from './app.component';
    import { NavbarComponent } from './navbar/navbar.component';
    import { TopbarComponent } from './topbar/topbar.component';
    import { FooterbarComponent } from './footerbar/footerbar.component';
    import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
    import {AppRoutingModule} from './approuting.module';
    import {HomeModule} from './home/home.module';
    import {MovieModule} from './movie/movie.module';
    import { MRDBCommonService } from './shared/services/mrdb.common.service';
    import { NotFoundComponent } from './not-found/not-found.component';
    import { SharedModule } from './shared/shared.module';


    @NgModule({
      declarations: [
        AppComponent,
        FooterbarComponent,
        TopbarComponent,
        NavbarComponent,
        NotFoundComponent  
      ],
      imports: [
        BrowserModule,
        HttpModule,
        SharedModule,
        AppRoutingModule
      ],
      providers: [MRDBGlobalConstants,
                  MRDBCommonService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

approuting.module.ts

import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {MovieComponent} from './movie/movie.component';
import {HomeComponent}  from '../app/home/home.component';
import {NotFoundComponent} from './not-found/not-found.component';
import {NewmovieComponent} from './movie/new/newmovie.component';
import {EditmovieComponent} from './movie/edit/editmovie.component';

export const routes: Routes = [
{path : '', component : HomeComponent},
{path: 'movie', component : MovieComponent},
{path : 'new' , component : NewmovieComponent },
{path : 'edit' , component : EditmovieComponent },
{path: '**',component : NotFoundComponent}

];

@NgModule({
     imports: [RouterModule.forRoot(routes,{useHash: true})],
     exports: [RouterModule]

})

export class AppRoutingModule{}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';

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

Home.component.ts

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() {
  }

}
3
angularangular2-routingangular4-router

3 Answers

3
votes

Add the HomeModule inside the imports in your app.module.ts

imports: [
        BrowserModule,
        HttpModule,
        SharedModule,
        HomeModule,
        AppRoutingModule
      ],
1
votes

Create first SharedHomeComponent.ts

import { HomeComponent } from './header/header.component';
import { NgModule,OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    @NgModule({
        imports: [
            CommonModule,RouterModule
        ],
        exports: [HomeComponent],
        declarations: [HomeComponent]
    })
    export class SharedHomeComponent implements OnInit {
        ngOnInit(): void {
            //throw new Error("Method not implemented.");
        }
      constructor() {
       }
    }

Then after, Whenever you want to use HomeComponent then import into component related module e.g. app.module.ts or different module. Then you can use the home component selector into multiple module components.

0
votes

You have to add all the "AlabalaModule" into the imports

 imports: [
    BrowserModule,
    HttpModule,
    SharedModule,
    AppRoutingModule,
    AlabalaModule
  ],

also you need spaces like tis -> { Alabala } , im pretty sure that {Alabala} is not valid syntax