lazy loading module does not load module js file

Question

I have two Modules that i am loading those modules with lazy loading.

AppModule
PassangerModule

AppModule is defined as follow

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        CabModule,
        RouterModule.forRoot([
            { path: '', component: CabComponent },
            { path: 'Cabs', component: CabComponent },
            { path: 'Passanger', loadChildren: 'App/Passanger/passanger.module#PassangerModule' }
        ])
    ],
    declarations: [
        AppComponent,
        CabComponent,
        CabFilterPipe,
        CabAddComponent
    ],
    bootstrap: [AppComponent],
    providers: [
        CabService
    ]
})
export class AppModule { }

and ProductModule is defined as follow:

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild([
            {
                path: '', component: PassangerComponent
            }
        ])
    ],
    declarations: [
        PassangerComponent
    ],
    providers: [
        PassangerService
    ]
})
export class PassangerModule {
}

Now when I navigated to /Products it does not work and tries GET request on http://localhost:3000/App/Passanger/passanger.module which is not valid path instead it should apply GET on passanger.module.js

I doubled checked that it is having defaultExtension as js in systemjs.config.js

Jenish Rabadiya · Accepted Answer · 2017-06-27 10:47:20Z

1

I changed the route module path and make App/... to lower case app/... and it worked.

I don't know why that string is case sensitive but it worked for me.

RouterModule.forRoot([
            { path: '', component: CabComponent },
            { path: 'Cabs', component: CabComponent },
            { path: 'Passanger', loadChildren: 'app/Passanger/passanger.module#PassangerModule' }
        ])

answered Jun 27, 2017 at 10:47

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

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

3 Comments

Fredrik Lundin Grande Over a year ago

Interesting! So it looks like the path is case sensitive then

Jenish Rabadiya Over a year ago

@FredrikLundin folder name is App not app. Don't know why but it only works with lowercase name.

Ashish Kadam Over a year ago

Reason for this tsconfig.json has option --forceConsistentCasingInFileNames by defaulse false. you can check this on below link typescriptlang.org/docs/handbook/compiler-options.html

Collectives™ on Stack Overflow

lazy loading module does not load module js file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related