Я использую угловую компиляцию AoT. Когда я пытаюсь создать отложенный компонент загрузки, следуя этому учебнику Я получил ошибку ниже:

ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    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 ScalarObservable._subscribe (ScalarObservable.js:51)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    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 ScalarObservable._subscribe (ScalarObservable.js:51)
    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:4736)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)

Вот часть моих кодов:

< STRONG> приложение - routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'listes', loadChildren: 'app/component/list/list.module#ListModule'}
];

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

< Сильный > список - routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ListComponent } from './list.component';

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

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

< Сильный > list.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ListRoutingModule } from './list-routing.module';

import { ListComponent } from './list.component';

@NgModule({
  imports: [
    CommonModule,
    ListRoutingModule
  ],
  declarations: [ ListComponent ]
})
export class ListModule { }

< Сильный > app.module.ts

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './component/header/header.component';
import { FooterComponent } from './component/footer/footer.component';
import { AppRoutingModule } from './app-routing.module';
import { DetailModule } from './component/detail/detail.module';
import { HomeComponent } from './component/home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Я уже сообщаю об этом как проблема Angular-Cli . Вы можете найти его здесь.

Есть кто-нибудь, кто сталкивался с такой же проблемой и нашел решение для этого?

Связанная ошибка: Угловой 5 с Angular Cli не ленивый загрузка модулей в роутер (Еще не решено).

Предложенное решение: https://github.com/gdi2290/angular-starter/issues/1936 :

{ path: 'listes', loadChildren: () => ListModule }
// it doesn't do lazy loading

Важная информация:

Angular cli: 1.7.0
Angular: 5.2.0

Мое почтение

30
Radonirina Maminiaina 23 Фев 2018 в 14:55

9 ответов

Лучший ответ

Я клонировал и воспроизвел проблему, используя опубликованный вами код GitHub. Для исправления ваши пакеты @ angular / cli global и devDependencies должны быть в 1.7.2

npm remove -g @angular/cli
npm install -g @angular/cli@1.7.2
npm remove @angular/cli
npm add @angular/cli@1.7.2 --save-dev

Теперь пакет @ angular / cli в ваших devDependencies соответствует глобальной версии, и он установлен на 1.7.2, где эта проблема решена.

32
Jesse Moore 30 Авг 2018 в 22:22

У меня та же проблема. Я решаю это, просто остановив сервер Cli и запустив его. Ошибка исчезла, если вы сделали свой код правильно.

57
SURENDRANATH SONAWANE 5 Мар 2018 в 13:35

Я получил ту же проблему. Исправить это с помощью

 {path:'listes' ,loadChildren: ()=>ListModule} not {path:'listes' ,loadChildren: 'app/component/list/list.module#ListModule'}
12
GYaN 30 Мар 2018 в 09:43

В angular-cli 1.7.x существует открытая ошибка: https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510

Понижение до 1.6.8 решит проблему для меня.

11
glucas 7 Мар 2018 в 10:07

Пожалуйста, смотрите этот комментарий об ошибке 1.7.x. Кажется, проблема заключается в импорте лениво загруженного модуля в AppModule. Удаление этого импорта устранило проблему для меня: https://github.com/ угловой / угловой кли / вопросы / 9488 # issuecomment - 374037802

5
leachryanb 16 Апр 2018 в 14:23

Что касается меня, проблема была в импорте ChildModule после AppRoutingModule в AppModule. Изменение порядка их исправило мою проблему.

0
Yaroslav Chapelskyi 2 Мар 2018 в 09:02

По моему мнению, проблема в том, что вы можете лениво загружать более одного модуля по одним и тем же маршрутам в одном и том же файле маршрутизации. Я также столкнулся с подобной проблемой и изменил название одного из маршрутов

0
Geetanshu Gulati 18 Июл 2018 в 08:43

У меня была та же проблема, и мне удалось ее решить, добавив лениво загруженные модули в мой угловой файл конфигурации CLI (angular.json). Смотрите мой ответ здесь: Ошибка угловой загрузки с отложенной загрузкой 5: не удается найти модуль

0
Fredrik_Macrobond 4 Апр 2019 в 20:11

В вашем app.module.ts вы импортировали ListModule?

Я столкнулся с той же проблемой и смог ее исправить, удалив лениво загруженные модули из импорта в app.module.ts

-4
domen 1 Мар 2018 в 08:32