CODEWITHSUNDEEP
angular
banneh
banneh

Reputation: 77

Angular 8 - Module not being discovered on application launch

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

Upvotes: 1

Views: 34

Answers (1)

luismiguelss
luismiguelss

Reputation: 312

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.

Upvotes: 1

Related Questions