Angular 6 Lazy loading route

Question

I wanted to add lazy loaded route for admin in my project. I'm using ASP Net Core backend and Angular 6 frontend, so my output dir for compile code is: wwwRoot/Angular/dist. When I compiled project, I see that file "admin-admin-module-ngfactory.js exists there, but when I try to enter page '/admin/dash', it throw error:

Failed to load resource: the server responded with a status of 404 (Not Found)
Error: Uncaught (in promise): Error: Loading chunk admin-admin-module-ngfactory failed.
(error: http://localhost:5000/admin-admin-module-ngfactory.js)
Error: Loading chunk admin-admin-module-ngfactory failed.
(error: http://localhost:5000/admin-admin-module-ngfactory.js)

Here is my routing modules:

admin-routing.module.ts:

const routes: Routes = [ 
  { path: 'dash', component: AdminDashboardComponent, pathMatch: 'full'}
];


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

and app-routing.module.ts:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'error', component: ErrorComponent },
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
  { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
];

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

UPDATE:

If I run project with dotnet run (with ng build --aot) it doesn't work, but if I launch only Angular app with ng serve --aot it works.

double check the path

Sachila Ranawaka
– Sachila Ranawaka

2018-07-03 10:59:26 +00:00
Commented Jul 3, 2018 at 10:59 — Sachila Ranawaka
– Sachila Ranawaka, Commented Jul 3, 2018 at 10:59
I've checked path, I'm sure that is correct.

Movart
– Movart

2018-07-03 11:04:08 +00:00
Commented Jul 3, 2018 at 11:04 — Movart
– Movart, Commented Jul 3, 2018 at 11:04

Ghanshyam · Accepted Answer · 2018-07-03 11:50:15Z

3

Add below line in .angular-cli.json file.

"apps": [
{
  "deployUrl": "Angular-Build-Path/",

Thanks.

answered Jul 3, 2018 at 11:50

Ghanshyam

2651 gold badge3 silver badges11 bronze badges

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

2 Comments

Movart Over a year ago

I added: "deployUrl": "/Angular/dist/", and it works! Thank you very much.

rp4361 Over a year ago

can you provide here the changes which you have made in your code, It will be easier for others to relate.

Rodrigo · Accepted Answer · 2018-07-05 00:56:32Z

0

According deploy documentation of Angular:

If you copy the files into a server sub-folder, append the build flag, --base-href and set the appropriately.

So, you should use the --base-href parameter in .angular-cli.json file.

Optionally, you can work in development mode without -base-href configuration(in the angular-cli- file) and only set it at aplication production build.

ng build --base-href=/Angular/dist/

References:

https://angular.io/guide/deployment#simplest-deployment-possible

https://angular.io/guide/deployment#the-base-tag

answered Jul 5, 2018 at 0:56

Rodrigo

2,5132 gold badges19 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular 6 Lazy loading route

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related