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

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 是 http://localhost:8000/admin-admin-module.js。这个模块文件是唯一被错误加载的文件。

我似乎不明白为什么它突然想从应用程序的根目录加载这个模块，而不是在其他 *.js 文件的加载位置。

Answer 1

在angulor.json中添加deployUrl。

angular.json -> 项目 -> [项目名称] -> 架构师 -> 构建 -> 选项 -> "deployUrl": "[Production Path]"

代码示例

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

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

Answer 2

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

publicPath: "/static/bundles/"

此解决方案注明here

Answer 3

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

Answer 4

试试这个：-

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 5

如果您在本地网络服务器中运行您的应用程序，就像您的情况一样，您必须在 angular.json 文件中设置 baseHref 属性以使用域子路径

或

将其附加到您的构建命令中，例如 --base-href=/browser/