Estoy actualizando de Angular 4.0.0 a Angular 5.2.6

Me enfrento a un problema para que funcione la carga lenta del módulo.

Con angular 4.0.0 , funciona bien, pero ahora, con 5.2.6 , aparece un error al hacer clic en el botón de redireccionamiento:

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)

mi archivo de enrutamiento se ve así:

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 { }

sugerencias ??

32
firasKoubaa 26 feb. 2018 a las 18:00

10 respuestas

La mejor respuesta

He resuelto este problema actualizando mt angular-cli localmente en devDependenices (package.json) de 1.2.0 a 1.6.7

3
firasKoubaa 28 feb. 2018 a las 15:40

No importe su módulo cargado lentamente dentro de su app.module.ts principal. Esto provocará una dependencia circular y arrojará el error que está recibiendo.

40
jetset 17 abr. 2018 a las 23:59

Use ng serve --aot en su lugar. Por lo general, es la CLI angular la que agregó el módulo angular cargado lentamente a AppModule cuando se generó.

0
user10793582 15 dic. 2018 a las 05:06

Solución 1

El orden de importación sí importa import lazy loaded module en la parte superior y router module en último lugar. Debido a que estamos haciendo una carga diferida, ese módulo con carga diferida debe existir antes de realizar el enrutamiento.

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

    AppRoutingModule
  ],

Solución 2

Por lo general, Angular CLI importará module a app-module cuando se generó. así que asegúrese de que el módulo lazy-loaded no se haya importado en app-module

13
Ram Chandra Neupane 2 nov. 2019 a las 21:06

ng service --aot mientras compila su código, no es una solución, es solo un encubrimiento. Si determinó que no era la versión CLI, intente la siguiente solución.

Lo que debe hacer es asegurarse de que en su app.module.ts no esté cargando su módulo cargado lentamente.

Por ejemplo:

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

Asegúrese de que YourFeatureMOdule se esté cargando a través de routes es decir:

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

Espero que esto ayude

7
Nosniw 8 oct. 2018 a las 22:36

Estaba enfrentando el mismo problema. Reiniciar el servidor angular ng-serve funcionó para mí.

3
User0706 3 abr. 2018 a las 12:40

Estoy experimentando el mismo problema. Esto podría ser un error con el angular-cli. ¡Todavía no estoy seguro de si el error está en el cli o en nuestro código! Según lo mencionado por Gerrit todavía es posible compilar con aot: ng serve --aot

También resolví el problema bajando mi angular-cli de 1.7.2 a 1.6.8 , que es la última versión CLI que parece funcionar en nuestro caso .

11
Alex T 6 mar. 2018 a las 15:56

Como se menciona en https://github.com/angular/angular-cli/ Issues / 9488 # issuecomment-368871510 parece funcionar con ng serve --aot

11
Gerrit 4 mar. 2018 a las 05:28

He cambiado el orden de las importaciones en mi app.module.ts como se menciona aquí

Por lo tanto, debe tenerlo, por ejemplo, así:

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]

Lo más importante es tener Primero BrowserModule y al final AppRoutingModule.

18
Paul Roub 30 may. 2018 a las 00:11

Tuve exactamente el mismo problema, pero simplemente reiniciar el servidor de nodos (ng s) me ayudó.

Como regla general: si angular comienza a comportarse de manera extraña, primero intente reiniciar el servidor de nodos

2
unkreativ 13 mar. 2018 a las 13:38