Question

第一次在这里发布：）

我在Angular应用程序中遇到了一个奇怪的问题。首先，我将发布一些我正在使用的代码。

这是我的app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './account/_guards/auth.guard';
import { ModulesModule } from './modules/modules.module'

const routes: Routes = [
   { path: '', loadChildren: () => ModulesModule, canActivate: [AuthGuard] },
   { path: 'account', loadChildren: './account/account.module#AccountModule' },
   { path: '**', redirectTo: '' }
];

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material.module';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { JwtInterceptor } from './account/_helpers/jwt.interceptor';
import { ErrorInterceptor } from './account/_helpers/error.interceptor';
import { AlertComponent } from './account/_components/alert.component';

@NgModule({
   declarations: [
      AppComponent, AlertComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      AngularMaterialModule,
      HttpClientModule
   ],
   providers: [
      HttpClientModule,
      { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
   ],
   bootstrap: [AppComponent]
})
export class AppModule { }

这是我的modules.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AngularMaterialModule } from '../angular-material.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ModulesRoutingModule } from './modules-routing.module';
import { HomeComponent } from './home/home.component';



@NgModule({
   declarations: [
      HomeComponent
   ],
   imports: [
      CommonModule,
      ModulesRoutingModule,
      AngularMaterialModule,
      FormsModule,
      ReactiveFormsModule,
      HttpClientModule,
   ]
})
export class ModulesModule { }

这是我的modules-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    { path: '', component: HomeComponent }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})

export class ModulesRoutingModule { }

现在，我正在尝试进行延迟加载，但这就是我正在经历的。当我执行“ ng s”时，应用程序以错误开始： Error: Cannot find module './modules/modules.module'

但是，如果我在app-routing.module.ts中更改了一个空白空间并保存了该更改，则当应用程序重新加载时（保存更改时），它将路由到应该首先路由的组件（我有已实现身份验证保护，因此它会路由到登录页面，就像启动应用程序时一样）。我尝试了很多谷歌搜索，但是当应用程序路由发生某些变化时，找不到路由的解释。这些是devDependencies：

"devDependencies": {
    "@angular-devkit/build-angular": "~0.803.19",
    "@angular/cli": "~8.3.19",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }

我尝试使用app-routing.module.ts中的modules.module使用不同的路径，但是没有一个可以解决问题。如果你们需要更多代码或数据，请告诉我，我将编辑问题。希望你对我有好处。谢谢。

Answer 1

您是否需要将modules.module导入app.module中？

Answer 2

尝试用更合适的东西代替{ path: '', loadChildren: () => ModulesModule, canActivate: [AuthGuard] }。例如{ path: '', component: SomeComponent, canActivate: [AuthGuard] }。

loadChildren: () => ModulesModule语法错误。

无需延迟加载将有90％机会访问的根路径。但是仍然可以根据需要将语法更改为正确的语法。

loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)

这是Angular 8引入的一种更好的新语法。

这里import('./module/module.module')是常规WebPack的动态导入，它使IDE可以帮助您进行路由声明自动完成和检查。然后，您只需从已加载的包中返回ModuleModule（更多信息请参见webpack的docs）。

以下是Angular官方文档中关于lazy loading的示例。

此外，您可以停止服务器并尝试执行ng build --prod。大多数情况下，它会揭示许多默认开发版本不会发生的隐藏错误。

Answer 3

我认为您导入ModulesModule是错误的。尝试像这样导入：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './account/_guards/auth.guard';
import { ModulesModule } from './modules/modules.module'

const routes: Routes = [
   { path: '', loadChildren: () => import('./modules/Modules.module').then(mod => mod.ModulesModule), canActivate: [AuthGuard] },
   { path: 'account', loadChildren: './account/account.module#AccountModule' },
   { path: '**', redirectTo: '' }
];

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

如果它不起作用，请尝试以与导入AccountModule相同的方式导入ModulesModule。

角延迟加载找不到模块奇怪的问题

3 个答案: