无法通过 Angular 中的路由加载模块答案

【问题标题】：Unable to load Module through routing in Angular无法通过 Angular 中的路由加载模块
【发布时间】：2018-08-07 02:39:33
【问题描述】：

我正在尝试从应用模块加载另一个模块...但它给了我一个错误。

当我尝试加载组件时，它工作正常

这就是我的 app-routing.module.ts 文件的样子

import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import {SignupComponent} from './auth/signup/signup.component'
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './shared';


const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'signup'
    },
    {path: 'signup', component: SignupComponent},
    {path: 'login', component: SignupComponent},
    {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule',
        canActivate: [AuthGuard]},

];

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

如果我加载仪表板的组件或任何模块然后加载完美....但是当我使用 loadChildren (for module) 然后它给我错误

这是我的 app.module.ts 文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthProviders, HttpService, UserAuthService} from './shared';
import { DashboardModule } from './dashboard/dashboard.module';
import { AuthModule } from './auth/auth.module';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    DashboardModule,
    AuthModule
  ],
  providers: [
    AuthProviders,
    HttpService,
    UserAuthService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的 dashboard.module.ts 文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule,Routes } from '@angular/router';
import { UpperNavComponent } from './header_components/upper-nav/upper-nav.component';
import { TabsComponent } from './header_components/tabs/tabs.component';
import { SearchBarComponent } from './header_components/search-bar/search-bar.component';
import { DocumentsComponent } from './sections/documents/documents.component';
import { TransactionsComponent } from './sections/transactions/transactions.component';
import { AlertsComponent } from './sections/alerts/alerts.component';

export const appRoutes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'documents', pathMatch: 'full' },
      { path: 'transactions', component: TransactionsComponent },
      { path: 'alerts', component: AlertsComponent },
      { path: 'documents', component: DocumentsComponent }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    RouterModule.forChild(appRoutes),
  ],
  declarations: [
    DashboardComponent,
    UpperNavComponent,
    TabsComponent,
    DocumentsComponent,
    SearchBarComponent,
    TransactionsComponent,
    AlertsComponent]
})
export class DashboardModule { }

错误是这样的

ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:10:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:10:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

【问题讨论】：

为什么要在主 app-routing.module 中导入 DashboardComponent ？如果你懒加载 Dashboard 模块，你不应该静态导入它的组件
@David 我这样做只是为了检查仪表板组件是否加载正常，然后没有删除它....但是在您发表评论后我删除了它但它仍然无法正常工作：/
您还从主模块中删除了import { DashboardModule } from './dashboard/dashboard.module';？否则我真的看不到..也许在 stackblitz 上创建一个最小的可重现示例？
@David 感谢您抽出宝贵时间...我也将其删除了。但现在我收到此错误 {core.js:1448 ERROR Error: Uncaught (in promise): TypeError: webpack_require.e is not a function}
就像我说的，试着给我们看一个关于 stackblitz 的例子。

标签： angular module routing angular-ui-router

【解决方案1】：

您的 Angular cli 版本是什么？在进行 npm 安装后我的 angular cli 更新到 1.7.1 时遇到了同样的问题（我在 package.json 中将其指定为 @angular/cli": "^1.4.4"）。不得不将其更改为使用 1.4 .x (@angular/cli": "~1.4.4") 并且错误消失了。

【讨论】：