Question

在Angular中，我添加了一个新的管理模块，该模块在用户访问管理路由时被延迟加载。

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

该模块位于dist文件夹中，但浏览器无法解析模块.js文件，因为它的位置不正确。

从构建日志开始按角度构建模块：

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

所有构建文件（main.js，polyfills.js等）都存储在名为browser的目录中，因此请求URL应该为http://localhost:8000/browser/admin-admin-module.js，而请求URL为{ {1}}。该模块文件是唯一未正确加载的文件。

我似乎无法弄清楚为什么它突然想要从应用程序的根目录而不是从其余http://localhost:8000/admin-admin-module.js文件中加载文件的位置加载该模块。

Answer 1

如果您像在这种情况下那样在本地网络服务器上运行应用，则必须在angular.json文件中设置baseHref属性，以使用域子路径

或

将其附加到--base-href=/browser/之类的构建命令中

Answer 2

尝试以下操作：-

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

Answer 3

这似乎是服务器问题。您应该能够指定路由http://localhost:8000/或http://localhost:8000/browser/“指向”的目录并静态地提供这些文件。您可以使用此路由在“配置”>“生产”（或其他）部分的 angular.json 文件中设置deployUrl。您还可以设置baseUrl（取决于您的设置，但“ /”或“ ./”应该起作用。）。

Answer 4

对于在此寻求解决方案的任何其他人，将其添加到webpack配置中可以为我解决此问题。我的设置是从Django后端使用Angular前端应用程序，该django-webpack-loader用于从/static/bundles/加载静态文件。我在extra-webpack.config.js中添加了以下内容。

publicPath: "/static/bundles/"

此解决方案记为here

角延迟加载模块从错误的URL加载

4 个答案: