Angular 8 - Module not being discovered on application launch

Question

I'm new to Angular and I'm having some troubles with module discovery in my project. Upon launching application I always get following error:

ERROR Error: Uncaught (in promise): Error: Cannot find module './home/home.module'

The error disappears when the file is saved in VsCode while app is running (gets recompiled). But then again on first launch it comes back. I'd appreciate help with identifying the issue.

loadChildren: './home/home.module#HomeModule'

In my application i have following structure (not included everything here).

 app
     home
         home.component.html
         home.component.ts
         home.routing.module.ts
         home.module.ts

     app-routing.module.ts
     app-module.ts
     app-component.ts

Here is my app-routing.module.ts:

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

import { SidebarComponent } from './shared';
import { ContactComponent } from './contact/contact.component';
import { AboutComponent } from './about/about.component';


const routes: Routes = [
  { 
    path: '',
    component: SidebarComponent,
    outlet: 'sidebar'
  },
  {
    path: 'part',
    loadChildren: './part/part.module#PartModule'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'contact',
    component: ContactComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch:'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And home routing module:

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule {}

Why are you exporting RouterModule ?

SoCo
– SoCo

2020-01-25 19:46:19 +00:00
Commented Jan 25, 2020 at 19:46 — SoCo
– SoCo, Commented Jan 25, 2020 at 19:46

luismiguelss · Accepted Answer · 2020-01-25 15:22:01Z

1

1. If you head over Angular Docs you will be able to see an example of how to load a module using loadChildren.

For a simple example:

const routes: Routes = [
    {
      path: 'home',
      loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
    }
 ];

Notice the .then(m => m.HomeModule) which is required in order to load it. This is also called Lazy Loading.

2. I wouldn't recommend redeclaring a const Routes, it should stick to the app.module.ts file.

edited Jan 25, 2020 at 15:22

answered Jan 25, 2020 at 15:16

luismiguelss

3124 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 8 - Module not being discovered on application launch

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related