web-dev-qa-db-fra.com

Angular Erreur de compilation AOT "ne peut pas déterminer le module pour la classe Component ''

J'ai une application Angular (4.3.2) sur laquelle je veux effectuer une génération AOT. L'application a été créée en utilisant @angular/cli. J'ai deux composants échafaudés avec ng generate et un module dans lequel les deux sont inclus comme déclaration:

import {PrivateComponent} from './private.component/private.component';

NgModule({
   imports: [
      // other imports
      PrivateRoutingModule
   ],
   declarations: [
      ...some other components, 
      PrivateComponent, 
      AppTopBarComponent
   ]
   // other stuff 
}) 
export class PrivateModule {}

Le composant privé est également utilisé dans le routage du module:

const routes: Routes = [
  {path: '', component: PrivateComponent, children: // other components}
] 

@NgModule({
   imports: [RouterModule.forChild(routes)] // this is the Angular built-in router module
})
export class PrivateRoutingModule {}

Remarquez comment le routage a été défini dans un autre module et importé dans PrivateModule Le AppTopBarComponent est utilisé dans le modèle PrivateComponent's. Les deux sont donc utilisés et déclarés. Mais lorsque j'utilise "node_modules/.bin/ngc" -p tsconfig-aot.json (Je suis sous Windows 10), j'obtiens ce message d'erreur: Cannot determine the module for class PrivateComponent in (path-to-project)/src/app/pages/private/private.component/private.component.ts! Add PrivateComponent to the NgModule to fix it.Cannot determine the module for class AppTopBarComponent in (path-to-project)/src/app/pages/private/app.topbar.component.ts! Add AppTopBarComponent to the NgModule to fix it.. Mon fichier tsconfig-aot.json Est exactement le même que dans le Angular AOT build guide .

angulartypescriptangular-cliaotangular-aot
15
Armen Vardanyan

J'ai trouvé une solution. Le problème était que PrivateComponent était importé dans un autre fichier, mais pas utilisé, comme ceci:

import { PrivateComponent } from '../private/private.component'; // not used anywhere

Apparemment, ngc essaie de tout lier et est confus par une importation inutilisée

16
Armen Vardanyan

Assurez-vous que vous n'avez pas accidentellement deux fichiers déclarant le même composant

Cela m'arrive souvent si je suis dans le mauvais répertoire lorsque j'exécute ng g c, et ne supprimez pas immédiatement le mauvais fichier généré.

ERREUR dans: Impossible de déterminer le module pour la classe FeatureBoxGroupComponent dans S: /.../ src/app/common-widgets/feature-widgets/feature-box-group/feature-box-group.component.ts! Ajoutez FeatureBoxGroupComponent au NgModule pour le corriger.

Dans cet exemple, j'avais FeatureBoxGroupComponent défini à deux endroits:

src\app\common-widgets\feature-widgets\feature-box-group\feature-box-group.component.ts

src\app\feature-widgets\feature-box-group\feature-box-group.component.ts

Bien sûr, le message d'erreur me dit le fichier exact avec lequel il a un problème - mais il est facile de le parcourir.

Faites juste une recherche dans les fichiers pour le nom du composant pour voir partout où il est référencé et assurez-vous qu'il n'est défini qu'une seule fois.

24
Simon_Weaver

J'ai eu ce problème et il a disparu lorsque j'ai utilisé ng build au lieu de ng build --prod.

Apparemment, j'avais deux modules que je n'utilisais pas mais que je n'avais pas supprimés du dossier de l'application. Ils n'étaient pas non plus déclarés dans le dossier app.module.ts.

Selon la documentation, le --prod flag amène le compilateur à effectuer également une élimination de code mort.

1
kl27driver

Voici comment j'ai résolu ce problème, en supposant que vous utilisez VScode.

  1. Fermez tous les onglets ouverts.
  2. Arrêtez ng serve
  3. Déplacez les dossiers de composants indiqués vers un autre emplacement via VScode.
  4. Si les onglets s'ouvrent après le déplacement, fermez-les et enregistrez les modifications lors de la fermeture (en raison du changement de chemin).
  5. Il devrait maintenant être compilé lorsque vous exécutez ng build avec --aot

Si vous le souhaitez, vous pouvez effectuer le même processus pour ramener les dossiers vers leurs emplacements d'origine.

De plus, après avoir résolu le problème, j'ai vérifié le git diff et a réalisé que le problème était le boîtier. J'ai changé les noms de dossier en majuscules mais cela n'a pas été mis à jour dans le chemin d'accès.

0
nPcomp