Angular 加载的模块从错误的url加载

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

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

模块存在于dist文件夹中，但浏览器无法解析module.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是

http://localhost:8000/admin-admin module.js

。此模块文件是唯一未正确加载的文件

---

我似乎不明白为什么它突然想从应用程序的根目录加载此模块，而不是从加载其余

*.js

文件的位置加载此模块。

如果您在本地Web服务器上运行应用程序，就像您的情况一样，您必须在angular.json文件中设置

baseHref

属性以使用域子路径

或

将其附加到构建命令中，如

--base href=/browser/

尝试以下操作：-

应用程序路由.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 });

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

app.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 });

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

---

这似乎是一个服务器问题。您应该能够指定路由

http://localhost:8000/

或

http://localhost:8000/browser/

“指向”并以静态方式提供这些文件。此路径用于在“配置”>“生产”（或其他）部分的angular.json文件中设置

deployUrl

。此外，您还可以设置

baseUrl

（取决于您的设置，但“/”或“/”应该可以工作）。

对于任何其他在此处搜索此问题解决方案的人，将此添加到网页包配置可为我解决此问题。我的设置是一个有角度的前端应用程序，由django后端提供，

django webpack loader

用于从

/static/bundles/

加载静态文件。我将以下内容添加到我的

额外的webpack.config.js

publicPath: "/static/bundles/"

---

此解决方案值得注意

我将此选项添加到我的

ng build

命令中，但对于模块文件强制重新加载或应用程序，仍然在错误的目录中查找，这是您的问题所在。。。编辑：…别忘了用dist文件夹中的新版本替换文件。在我的索引文件中，头部有一个标记

，我将其更改为

，但现在应用程序将

浏览器

添加到每个路径。这不是我想要的。只有模块需要加载

/browser/

前缀，这是不可能的。。。您必须使用

baseHref

属性构建您的应用程序，并使用所有模块将其完全部署到该路径下，然后我必须为我的案例找到不同的解决方案。我会接受这个答案，因为它解决了如何更改模块加载路径的问题。但对我来说，这不是一个理想的情况。谢谢