4
votes

Les déclarations individuelles dans la déclaration fusionnée 'DepartmentListComponent' doivent être toutes exportées ou tous les composants locaux.ts (2395) de routage

J'ai un problème avec ce code, je le fais exactement comme le didacticiel vidéo (j'apprends), mais cela ne fonctionne pas et nécessite des déclarations. Il est possible que le code écrit dans le guide soit dans une méthodologie plus ancienne? Son code dur sans service.

app-routing.module.ts

<h1> Welocme in routing</h1>

<router-outlet></router-outlet>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
    routingComponents
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentListComponent } from './department-list/department-list.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';


const routes: Routes = [
  { path: 'departments', component: DepartmentListComponent },
  { path: 'employees', component: EmployeeListComponent }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents  [DepartmentListComponent, EmployeeListComponent ]

J'ai besoin de voir l'application en cours d'exécution avec le formulaire d'URL changeant http: // localhost: 4200 / employés et http: // localhost: 4200 / départements . Je suis débutant, alors soyez compréhensif.

typescript angular routing

8 commentaires

Quelle erreur vous obtenez

Impossible de GET / - dans le navigateur La déclaration d'importation est en conflit avec la déclaration locale de 'DepartmentListComponent'. Les déclarations individuelles dans la déclaration fusionnée 'DepartmentListComponent' doivent être toutes exportées ou toutes locales. Les déclarations individuelles dans la déclaration fusionnée 'EmployeeListComponent' doivent être toutes exportées ou toutes locales. La déclaration d'importation est en conflit avec la déclaration locale de «EmployeeListComponent». Variable à portée de bloc 'DepartmentListComponent' utilisée avant sa déclaration. Variable de type bloc 'EmployeeListComponent' utilisée avant sa déclaration. ',' attendu. - c'est étrange; p

Les déclarations individuelles dans la déclaration fusionnée 'DepartmentListComponent' doivent être toutes exportées ou toutes locales. Les déclarations individuelles dans la déclaration fusionnée 'EmployeeListComponent' doivent être toutes exportées ou toutes locales.

On dirait que la dernière ligne de votre app-routing.module.ts est à l'origine de l'erreur. Essayez de supprimer l' routingComponents exportation de l' app-routing.module.ts fichier et les importer explicitement dans les app.module.ts

Il n'y a aucun moyen de créer un tableau à partir d'eux pour importer tous les composants dans un seul paquet?

vous pouvez utiliser .concat sur votre tableau de déclarations. déclarations: [AppComponent] .concat (routingComponents),

dans app.module.ts? mais il a 9 erreurs dans app-routing.module.ts @up

Je pense que le problème ici est avec votre const routingComponents dans app-routing.module.ts parce que vous définissez une variable const mais ne lui attribuez pas de valeur, essayez donc d'attribuer une valeur avec = et cela devrait résoudre votre problème

4 Réponses :

3
votes

Même problème ici avec une résolution encore plus étrange: supprimez la ligne d'exportation (dernière ligne). Compilez (normalement sans erreur) Ajoutez à nouveau la dernière ligne. Compilez ... Terminé. Ne me demandez pas pourquoi. Je suis également un débutant en apprentissage dactylographié et angulaire en cours de route ;-)

4 commentaires

Veuillez rendre plus évidente la partie qui peut être considérée comme une solution au problème décrit. Je crois qu'il y en a un, mais dans la formulation actuelle, cela risque d'être confondu avec un «moi aussi».

@Yunnosch Je ne pense pas que "l'éteindre et le rallumer" soit de toute façon une réponse. VTD.

Ce n'est pas une question de "bonne réponse ou pas". Il s'agit de ne pas être signalé pour ne même pas avoir essayé de répondre. @ miken32 Et j'accepte cela comme une tentative honnête de répondre.

@ miken32 Je fais les mêmes étapes ici, la recherche de la même erreur sur Webstorm IDE et fonctionne, est certainement une bonne réponse.

7
votes

Vous exportez DepartmentListComponent dans ce fichier qui est importé localement dans le même module de fichiers.

0 commentaires

0
votes

J'ai eu le même problème en utilisant Webstorm, un redémarrage + nettoyage du cache a résolu le problème pour moi.

0 commentaires

0
votes

Sur les IDE intellij, j'ai trouvé que supprimer l'exportation et l'ajouter à nouveau (avant l'instance, pas la classe) fonctionnait.

j'avais

// y.ts
import {X} from "./x.ts"
export const instance = new X();  // the export to be removed in my case

// x.ts
export class X {}

0 commentaires