Я обновляюсь с Angular 4.0.0 до Angular 5.2.6 .

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

С угловой 4.0.0 он работает нормально, но теперь, с 5.2.6 , я получаю такую ошибку при нажатии на кнопку перенаправления:

core.js:1448 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:27), <anonymous>:13: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:27), <anonymous>:13: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 ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)

мой файл маршрутизации выглядит следующим образом:

const homeRoutes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
        ....
      {
        path: 'admin',
        loadChildren: 'app/home/admin/admin.module#AdminModule',
        canActivate: [AuthGuardAdmin]
      },
    ]
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class HomeRoutingModule { }

предложения ??

32
firasKoubaa 26 Фев 2018 в 18:00

10 ответов

Лучший ответ

Я решил эту проблему путем локального обновления mt angular-cli в devDependenices (package.json) с 1.2.0 до 1.6.7 .

3
firasKoubaa 28 Фев 2018 в 15:40

Не импортируйте ваш лениво загруженный модуль в ваш основной app.module.ts. Это вызовет циклическую зависимость и выдаст ошибку, которую вы получаете.

40
jetset 17 Апр 2018 в 23:59

Используйте вместо этого ng serve --aot. Обычно Angular CLI добавляет модуль Angular с ленивой загрузкой в AppModule при его создании.

0
user10793582 15 Дек 2018 в 05:06

Решение 1

Порядок импорта имеет значение, поэтому import lazy loaded module вверху и router module на последнем месте. Поскольку мы выполняем отложенную загрузку, этот загруженный модуль должен существовать до того, как мы осуществим маршрутизацию.

imports: [
    BrowserModule,       
    HeroModule, // Lazy-loaded module

    AppRoutingModule
  ],

Решение 2

Обычно Angular CLI импортирует module в app-module при его создании. поэтому убедитесь, что lazy-loaded модуль не был импортирован в app-module

13
Ram Chandra Neupane 2 Ноя 2019 в 21:06

ng service --aot, хотя он компилирует ваш код, это не решение, а просто сокрытие. Если вы определили, что это не версия CLI, попробуйте следующее решение.

Что вам нужно сделать, это убедиться, что в вашем app.module.ts вы не загружаете свой лениво загруженный модуль.

Например:

app.module.ts
 imports: [
   ...
   AppRouterModule,
   FormsModule,
   YourFeatureModule, <--- remove this
   ...
 ]

Убедитесь, что YourFeatureMOdule загружается через routes то есть:

app-routing.module.ts
 loadChildren: '../app/feature.module#YourFeatureModule'

Надеюсь это поможет

7
Nosniw 8 Окт 2018 в 22:36

Столкнулся с той же проблемой. Перезапуск углового сервера ng-serve работал на меня.

3
User0706 3 Апр 2018 в 12:40

Я испытываю ту же проблему. Это может быть ошибкой в angular-cli. Я все еще не уверен, есть ли ошибка в cli или в нашем коде! Как упомянуло Gerrit, все еще можно скомпилировать с помощью aot: ng serve --aot

Я также решил эту проблему, понизив мой angular-cli с 1.7.2 до 1.6.8 , который является последней версией CLI, которая работает в нашем случае. ,

11
Alex T 6 Мар 2018 в 15:56

Как уже упоминалось в https://github.com/angular/angular-cli/ Issues / 9488 # IssueComment-368871510 Кажется, он работает с ng serve --aot

11
Gerrit 4 Мар 2018 в 05:28

У меня была точно такая же проблема, но простой перезапуск сервера узлов (ng s) помог мне.

Как правило: если angular начинает вести себя странно, сначала попробуйте перезагрузить сервер узлов

2
unkreativ 13 Мар 2018 в 13:38