8
votes

impossible de trouver le module dans le chargement paresseux angulaire

J'ai un projet angulaire avec succès sur l'environnement Mac

const rootRoutes: Routes = [
  { path: 'site', loadChildren: './website/site.module#SiteModule' }
];

Maintenant, j'exécute le même code sur ubuntu 18.04 avec la configuration

 const routes: Routes = [    
      {
        path: 'site',
        loadChildren: 'app/website/site.module#SiteModule',
      }
    ]

Cependant, il arrive avec un problème très étrange lorsque vous essayez de charger paresseusement un autre module, je continue à recevoir cette erreur Erreur: Impossible de trouver le module "app / website / site.module"

Voici la structure de mon projet

et app-routing.module.ts

Angular CLI: 7.3.9
Node: 12.9.1
OS: linux x64
Angular: 7.2.15

le routage est utilisé pour fonctionner sous mac mais a échoué sous ubuntu

J'ai recherché une solution différente

Angular CLI: 7.0.5
Node: 8.11.3
OS: darwin x64
Angular: 7.0.3

mais cela n'a toujours pas fonctionné.

angular angular-routing angular-cli-v7

4 commentaires

essayez ceci () => import('./orders/orders.module').then(mod => mod.OrdersModule) source: angular.io/guide/lazy-loading-ngmodules

est-ce la façon de faire sur angulaire 8?

Je vais vous donner une réponse et un guide complet en sec, cela devrait être le même que dans angulaire 7

Angulaire 9: loadChildren: () => import('./app/order/orders.module').then(m => m.NewOrdersModule)

4 Réponses :

11
votes

J'ai créé un exemple de projet sur stackblitz

Explication:

Alors tout d'abord, vous devez créer vos itinéraires comme ceci:

const routes: Routes = [
  { path: 'route1', component: Component2Component },
  { path: '', component: Component3Component }
];

@NgModule({
  imports: [
    // your imports here ... 
    RouterModule.forChild(routes)
  ],
  declarations: [Component2Component, Component3Component]
})
export class ModuleModule { }

Ensuite, ajoutez-le au module d'application (module racine):

@NgModule({
  imports:      [
    // your imports here ...
    // add your routes (forRoot() is only in the root module!)
    RouterModule.forRoot(routes)
  ],
  // your providers, declarations, etc.
})
export class AppModule { }

Ensuite, vous devez ajouter des routes au module enfant (dans ce cas ModuleModule):

const routes: Routes = [
  // this will get lazy loaded
  { 
    path: 'lazyload',
    loadChildren: () => import('./module/module.module').then(mod => mod.ModuleModule) 
  },

  // default route
  { 
    path: '**',
    component: Component1Component
  }
];

maintenant cela devrait fonctionner, si vous avez des problèmes, je serai là :)

0 commentaires

6
votes

J'ai eu un problème similaire, dans mon code c'était le même chemin que votre

  {
      path: 'admin', loadChildren: './admin/admin.module#AdminModule'
  }

et après avoir changé le fichier tsconfig.app.json

il a commencé à fonctionner et à trouver un itinéraire enfant, sur l'image ci-jointe, vous pouvez voir les changements que j'ai faits

3 commentaires

Changer "include": ["src/**/*.d.ts"] en "include": ["src/**/*.ts"] fonctionné pour moi -_- Je n'aurais jamais trouvé ça par moi-même

Cela a fonctionné pour moi aussi .... Mais je reçois maintenant un autre avertissement tel que "... user-news.component.spec.ts fait partie de la compilation TypeScript mais il n'est pas utilisé. Ajoutez uniquement des points d'entrée au ' files 'ou' include 'propriétés dans votre tsconfig. " . Je ne sais pas si je devrais m'inquiéter à leur sujet ou non à ce stade.

ou ajoutez "src / ** / *. module.ts" pour ne pas charger autant

2
votes

Dans mon cas particulier, la solution Pavel B. a fonctionné le mieux. Aucun avertissement à la compilation ou à l'exécution!

@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cli                      9.1.7
@ngtools/webpack                  9.1.7
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

En utilisant:

CLI angulaire: 9.1.7 Nœud: 12.14.0 OS: darwin x64

Angulaire: 9.1.9 ... animations, communs, compilateur, compilateur-cli, noyau, formulaires ... navigateur de plate-forme, navigateur de plate-forme dynamique, routeur Ivy Workspace: Oui

Package et versions

  {
    path: 'users',
    loadChildren: () => import('./users/users.module').then(mod => mod.UsersModule)
  }

1 commentaires

Cela fonctionne pour moi. Version angulaire: 10.0.8.

0
votes

Vous pouvez utiliser comme ceci:

const rootRoutes: Routes = [ { path: 'site', loadChildren: () => SiteModule } ];

1 commentaires

après avoir utilisé cette approche, votre lazy-loading lazy-loading ne sera plus lazy-loading