Angular lazy loaded module is loaded from wrong url

问题

In Angular I added a new admin module which is lazy loaded when the user visits the admin routes.

{
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule',
}

The module is present in the dist folder but the browser can't resolve the module .js file because it is looking in the wrong place.

The module is build by angular as of the build log:

chunk {admin-admin-module} admin-admin-module.js, admin-admin-module.js.map (admin-admin-module) 293 kB  [rendered]

All build files (main.js, polyfills.js etc.) are stored in a directory named browser so the request URL should be http://localhost:8000/browser/admin-admin-module.js but instead the request URL is http://localhost:8000/admin-admin-module.js. This module file is the only file that is incorrectly loaded.

I can't seem to figure out why it suddenly wants to load this module from the root of the application and not in the location the rest of the *.js files are loaded from.

回答1:

If you run your app in a local webserver like in your case you have to set the baseHref attribute in your angular.json file to work with a domain sub-path

append it to your build command like --base-href=/browser/

回答2:

Try to this:-

app-routing.module.ts:-

import { Routes, RouterModule } from '@angular/router';
import { UserDashboardLayoutComponent } from './layout/dashboard-layout/user-dashboard-layout.component';
import { AuthGuard } from './core/services/auth-guard.service';


const appRoutes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },

//routes : start
{ path: 'login', loadChildren: './pages/login/login.module#LoginModule' },
{ path: '', loadChildren: './pages/login/login.module#LoginModule', pathMatch: 'full' },
{ path: 'signup', loadChildren: './pages/signup/signup.module#SignupModule' },
//routes : End

{
    path: 'dashboard',
    loadChildren: './pages/dashboard/dashboard.module#DashboardModule',
    canActivate: [AuthGuard],
}

];

export const routing = RouterModule.forRoot(appRoutes, { useHash: false });

app.module.ts:-

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientService } from './core/services/http-client.service';
import { AuthService } from './core/services/auth.service';
import { AuthGuard } from './core/services/auth-guard.service';


@NgModule({
 declarations: [
   AppComponent
 ],
imports: [
  routing,
  RouterModule,
  BrowserModule,
  BrowserAnimationsModule,
  HttpModule,
  HttpClientModule
],
providers: [
  HttpClientService, AuthService, AuthGuard
],
  bootstrap: [AppComponent]
})
export class AppModule { }

回答3:

This seems to be a server issue. You should be able to specify the directory to which the route http://localhost:8000/ or http://localhost:8000/browser/ "points" to and serve those files statically. This route you would use to set the deployUrl inside the angular.json file in the "configurations" > "production" (or whatever) section. Also you can set the baseUrl (depending on your settings but "/" or "./" should work.).

回答4:

For anyone else that lands here in search of a solution to this issue, adding this to the webpack config resolved this issue for me. My setup is an Angular frontend app being served from a django backend with django-webpack-loader employed to load the static files from /static/bundles/. I added the following to my extra-webpack.config.js.

publicPath: "/static/bundles/"

This solution is noted here

来源：https://stackoverflow.com/questions/57181820/angular-lazy-loaded-module-is-loaded-from-wrong-url

标签

angular

angular-module