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

angular 9 routing not working
angular 8 router
angular generate routing module
app routing module ts is not a module
angular/router navigate with params
angular routing redirect
angular/router pathmatch
angular route data

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

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

}

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

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

Component is not part of any NgModule or the module has not been , If your are not using lazy loading, you need to import your import { BrowserModule } from '@angular/platform-browser'; import In my case the imports of real routes in app.component.spec.ts were causing these error messages. As this component is accesses neither throw selector nor router, adding� subscribe to router events in the routing module, and based on which route is subscribed to, dispatch an action that will reload the data sources (via NGRX adapter addAll) relevant to that page. I think this would be desirable dev experience to subscribing to the router once instead of subscribing to it in each component and filtering the events.

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.

lazy loading not working in Angular 6 � Issue #10673 � angular , 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 � Why your Angular App is not Working: 11 common Mistakes. Resolving problems of your angular application can be very challenging. When your angular app is not working and all it gives you are some cryptic red lines in a console. Especially when you are a beginner, these problems can turn the development process with angular into a real pain.

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

Angular upgrade to version 7 lazy loaded module cannot be found , ERROR Error: Uncaught (in promise): Error: Cannot find module loadChildren: 'app/login/login.module#LoginModule', }, { path: '', component: Parts of the docs are not yet aligned with Angular CLI and I suspect this is one of them. I just started a new Angular 7 project and can't get routing to work with� The Angular Router is an optional service that presents a particular component view for a given URL. It is not part of the Angular core and thus is in its own library package, @angular/router. Import what you need from it as you would from any other Angular package.

Add in-app navigation with routing, GitHub is home to over 50 million developers working together to Error at the console after clicking on Login, that the module is not const routes: Routes = [ { path: 'login', component: LoginComponent } Am I missing an upgrade or Angular 7 implies us to change routing urls for a specific new form? Prerequisites: This guide assumes some basic knowledge of Angular routing ( <base href>, <router-outlet> etc. If you are not familiar with those, you can read more about it here.; An Angular 4

Entry components, Lazy Loading Feature Modules heroes/heroes.component'; const routes: Routes = [ { path: 'heroes', The next part of the file is where you configure your routes. If you manually created app-routing.module.ts or used a tool other than the The browser should refresh and display the app title but not the list of heroes. How to create an Angular Module for routing and import it; How to add routes to different components; How to add the router outlet. First, let’s start by creating a routing module in an app-routing.module.ts file. Inside the src/app create the file using: $ cd angular7-router-demo/src/app $ touch app-routing.module.ts

Angular NgModule, A component can also be bootstrapped imperatively in the module's The second kind of entry component occurs in a route definition like this: does not imply that they will necessarily be included in the final bundle. If a component isn't an entry component and isn't found in a template, the tree shaker will throw it away. The default answer is No so type y to tell the CLI to install the @angular/router package in the project and generate a src/app/app-routing.module.ts file and will also add a <router-outlet> in the src/app/app.component.html file which will the shell of our Angular application. In previous versions of Angular CLI, you would need to create this