que - Error de módulo de carga diferida Angular2 ''no se puede encontrar el módulo''

que es un modulo en angular

Question

Estaba tratando de encontrar alguna solución para este error, pero nada funciona para mí. Tengo la sencilla aplicación Angular2 creada con Angular-CLI. Cuando publico esta aplicación en el navegador EXCEPTION: Uncaught (in promise): Error: Cannot find module ''/app/test.module''. este error: EXCEPTION: Uncaught (in promise): Error: Cannot find module ''/app/test.module''. Estaba intentando usar una ruta diferente en loadChildren:

''/app/test.module''
''./app/test.module''
''./test.module''
''/src/app/test.module''

Carpetas

src/
app/
app-routing.module.ts
app.component.ts
app.module.ts
test.component.ts
test.module.ts

app.module.ts

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { FormsModule } from ''@angular/forms'';
import { HttpModule } from ''@angular/http'';
import { RoutingModule } from ''./app-routing.module'';
import { AppComponent } from ''./app.component'';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from ''@angular/core'';
import { Routes, RouterModule } from ''@angular/router'';
const routes: Routes = [
{ path: '''', loadChildren: ''/app/test.module'' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class RoutingModule { }

test.module.ts

import { NgModule } from ''@angular/core'';
import { Routes, RouterModule } from ''@angular/router'';
import { CommonModule } from ''@angular/common'';
import { TestComponent } from ''./test.component'';
export const routes: Routes = [
{ path: '''', component: TestComponent }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
exports: [TestComponent],
declarations: [TestComponent]
})
export default class TestModule { }

rastro de pila

 error_handler.js:45EXCEPTION: Uncaught (in promise): Error: Cannot find module ''/app/test.module''.ErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.612 error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.613 error_handler.js:51Error: Uncaught (in promise): Error: Cannot find module ''/app/test.module''.
at resolvePromise (zone.js:429)
at zone.js:406
at ZoneDelegate.invoke (zone.js:203)
at Object.onInvoke (ng_zone_impl.js:43)
at ZoneDelegate.invoke (zone.js:202)
at Zone.run (zone.js:96)
at zone.js:462
at ZoneDelegate.invokeTask (zone.js:236)
at Object.onInvokeTask (ng_zone_impl.js:34)
at ZoneDelegate.invokeTask (zone.js:235)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.614 zone.js:355Unhandled Promise rejection: Cannot find module ''/app/test.module''. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module ''/app/test.module''.(…) Error: Cannot find module ''/app/test.module''.
at webpackEmptyContext (http://localhost:4200/main.bundle.js:49550:8)
at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/main.bundle.js:57952:40)
at SystemJsNgModuleLoader.load (http://localhost:4200/main.bundle.js:57945:60)
at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:22354:128)
at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:22346:81)
at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:61105:111)
at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:32515:27)
at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:32505:18)
at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:7085:18)
at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:48555:24)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.620 zone.js:357Error: Uncaught (in promise): Error: Cannot find module ''/app/test.module''.(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386

Answer 1

Fue trabajado para mí usando.

../app/

Resolví este problema usando la sugerencia emergente en el código VS. También puedes seguir eso. No es necesario ir a ningún lado. (Creo que el camino puede variar en cada proyecto).

Answer 2

En un escenario de caso de uso para segregar una característica distinta (por ejemplo, test.module.ts) desde su aplicación raíz (es decir, app.module.ts) a través de un módulo cargado de forma diferida, podríamos crear el módulo de prueba y sus componentes en un sub -carpeta (por ejemplo, src / app / test /). El test-routing.module se puede configurar de esta manera:

//test-routing.module.ts
//routes to test.component.ts as an example
import { Routes, RouterModule } from ''@angular/router'';
import { TestComponent } from ''./test.component'';
const feature_test_routes: Routes = [
{
path: '''',
component: TestComponent
}
];
export const TestRoutingModule = RouterModule.forChild(feature_test_routes);

El módulo "principal" (app-routing.module.ts), tendría una ruta que se vería así:

//app-routing.module.ts
//routes to http://localhost:4200/test
import { Routes, RouterModule } from ''@angular/router'';
import { AppComponent } from ''./app.component'';
const root_routes: Routes = [
{
path: '''',
component: AppComponent,
children: [
{
path: ''test'',
loadChildren: ''./test/test.module#TestModule''
}
]
}
];
export const AppRoutingModule = RouterModule.forChild(root_routes);

Esto permite que la aplicación raíz y el componente de entrada, cargados de forma imperativa, posteriormente carguen de forma lenta funciones de test.module.ts como elementos secundarios cuando sea necesario.

Answer 3

Finalmente descubrí que tengo que importar el módulo de carga lenta en la configuración de enrutamiento de esta manera:

const routes: Routes = [
{ path: '''', loadChildren: ''app/test.module'' }
];

sin ningún / o ./ en frente de la ruta del módulo.

Answer 4

He estado solucionando este problema durante un par de horas en un proyecto del que acabo de sustituir. Ninguna de las soluciones anteriores funcionaba, pero luego me di cuenta de que todos los módulos con carga diferida tenían la extensión .ts.

Si alguien más tiene problemas, compruebe si necesita cambiar loadChildren: ''app/example.module.ts'' a loadChildren: ''app/example.module'' .

Answer 5

Me encontré con un problema similar cuando trabajaba con Angular 4.4.5 y el paquete web y lo solucioné sin usar cadenas, sino una referencia de tipo de módulo (mucho más fácil de escribir y menos propenso a errores):

const routes: Routes = [
{ path: '''', loadChildren: () => TestModule }
];

No pude encontrar la versión mínima para Angular (cargador) compatible con esta sintaxis.

Una forma que podría funcionar con AOT es reemplazar la sintaxis lambda por una regular:

export function getTestModule() { return TestModule; }
const routes: Routes = [
{ path: '''', loadChildren: getTestModule }
];

Answer 6

Me he enfrentado a este mismo problema. Lo resolví haciendo 2 cosas siguientes:

En la configuración de ruta del módulo raíz, use loadChildren con una ruta relativa al módulo angular con carga diferida. La cadena está delimitada con un # donde el lado derecho de la división es el nombre de la clase del módulo cargado de forma diferida.

He agregado ./ como prefijo a la cadena loadChildren .

{ path:''user'', loadChildren:''./app/user/user.module#UserModule''}

Estoy usando webpack 2 y necesito un cargador para Angular 2 que permita la carga de módulos basados ​​en cadenas con el enrutador angular. Agregar esto al proyecto

yarn add angular-router-loader -D

luego agregue el angular-router-loader de mecanografía

loaders: [
{
test: //.ts$/,
loaders: [
''awesome-typescript-loader'',
''angular-router-loader''
]
}
]

y funciona para mí

Answer 7

Necesitas cambiar

export default class TestModule { }

a

export class TestModule { }

Eso debería arreglar tus problemas

Answer 8

Yo cambio esto

{
path: ''test'',
loadChildren: ''app/tests/test.module#TestModule''
}

para esto

 {
path: ''test'', loadChildren: () => new Promise(resolve => {
(require as any).ensure([], require => {
resolve(require(''app/tests/test.module'').TestModule);
})
})
},

Y resolvió mi problema.

Answer 9

asegúrese de incluir la importación {Routes, RouterModule} desde ''@ angular / enrutador''; en el módulo para cargar lazely

Answer 10

reiniciar el ng serve funcionó para mí