Angular 延迟加载的模块是从错误的地方加载的url

Question

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

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

模块存在于 dist 文件夹中，但浏览器无法解析模块 .js 文件，因为它在错误的位置查找。

该模块由 angular 构建，截至构建日志：

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 文件的加载位置加载此模块。

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/ "points" 的目标目录并静态提供这些文件。您将使用此路由在 angular.json 文件的 "configurations" > "production"（或其他）部分中设置 deployUrl。您还可以设置 baseUrl（取决于您的设置，但“/”或“./”应该有效。）。

Answer 4

对于来到这里寻找此问题解决方案的任何其他人，将其添加到 webpack 配置中为我解决了此问题。我的设置是一个 Angular 前端应用程序，由 django 后端提供服务，django-webpack-loader 用于从 /static/bundles/ 加载静态文件。我将以下内容添加到我的 extra-webpack.config.js.

publicPath: "/static/bundles/"

此解决方案已注明

Answer 5

在angulor.json中添加deployUrl。

angular.json -> 项目 -> [项目名称] -> 架构师 -> 构建 -> 选项 -> "deployUrl": "[生产路径]"

代码示例

"options": {
 "deployUrl": "/hello-project/browser/",
 "outputPath": "dist/hello-project/browser",
 "index": "src/index.html",
}

就我而言，我的 Angular 项目生产文件来自 Spring 后端。 Spring 从名为 Frontend/dist/[项目名称]/browser/* 的文件夹中提供文件。 Angular 一个模块开发没有问题。但是 Angular 对 multi-modules 的延迟加载发现了这个问题。浏览器从浏览器文件夹中找到 main.js、runtime.js、common.js 等其他文件。但是找不到懒加载模块文件。因为浏览器在运行时从根级别而不是从浏览器文件夹路径找到惰性模块。所以，像这种情况需要在Angular的懒加载模块开发中添加deployUrl

Angular 延迟加载的模块是从错误的地方加载的url

Angular lazy loaded module is loaded from wrong url

angular

angular-module