CODEWITHSUNDEEP
angularlazy-loading
Fahad Subzwari
Fahad Subzwari

Reputation: 2325

Cannot find module './modules/shipper/shipper.module' in angular9?

I have an angular app in which i am doing lazy loading. My folder structure is like this

app
 modules
   shipper
     addshipper
     shipper
     shipper.module.ts
     shipper.routing.module.ts
   transporter
app.routing.module.ts
app.module.ts

in my app-routing.module.ts i have lazyload my shipper module like this

{ path: 'addshipper', loadChildren : './modules/shipper/shipper.module#ShipperModule'}

in my shipper.module.ts i have following

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AddshipperComponent } from './addshipper/addshipper.component';
import { ShipperRoutingModule } from './shipper-routing.module';

export const options: Partial<IConfig> | (() => Partial<IConfig>) = null;
@NgModule({
    declarations: [
        AddshipperComponent
    ],
    imports: [
        BrowserModule,
        ShipperRoutingModule
    ],
    providers: []
})
export class ShipperModule { }

Inside of my shipper.module.ts i have following child routes

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '@app/authguard.guard';
import { AddshipperComponent } from './addshipper/addshipper.component';
const routes: Routes = [
  {
      path: '',
      children: [
        { path: '', component: AddshipperComponent,canActivate: [AuthGuard] } 
      ]
  }
];

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

and in the side nave of my app i have the link like this

<a  routerLink="/addshipper" class="nav-link">
   <i class="fa fa-circle nav-icon"></i>
   <p>Add Shipper</p>
</a>

But the problem is that when i click on the Add Shipper link so i am getting this error in console

Uncaught (in promise): Error: Cannot find module './modules/shipper/shipper.module'

Upvotes: 1

Views: 23

Answers (1)

Ismail Diari
Ismail Diari

Reputation: 519

I think that you need to import CommonModule within your shipper.module.ts

imports: [CommonModule,
 BrowserModule, ShipperRoutingModule ],

and you need to export your public components

exports:[AddshipperComponent]

Upvotes: 1

Related Questions