web-dev-qa-db-fra.com

Le module Angular2 n'a pas de membre exporté

Pour un site Web avec authentification dans Angular2, je souhaite utiliser un composant du sous-module d'authentification dans le composant principal de l'application. Cependant, je continue à avoir l'erreur suivante:

app/app.component.ts(3,10): error TS2305: Module '"<dir>/app/auth/auth.module"' has no exported member 'SigninComponent'.

même après l'exportation de SigninComponent.

La structure du dossier de projet est la suivante:

 enter image description here

app/auth/auth.module.ts: 

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';

import { RegisterComponent }    from './components/register.component';
import { SigninComponent }    from './components/signin.component';
import { HomeComponent }    from './components/home.component';

import { AuthService } from './services/auth.service';
import { AuthHttp } from './services/auth-http';

@NgModule({
  imports: [
      CommonModule,
      FormsModule
  ],
  declarations: [
      RegisterComponent,
      SigninComponent,
      HomeComponent
  ],
  providers: [
      AuthService,
      AuthHttp
  ],
  exports: [
      RegisterComponent,
      SigninComponent,
      HomeComponent
  ]
})
export class AuthModule {}

app/auth/components/signin.component.ts: 

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Component({
    selector: 'signin',
    templateUrl: 'app/auth/signin.html'
})
export class SigninComponent {
    ...
}

app/app.component.ts: 

import { Component, OnInit } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { SigninComponent, RegisterComponent } from './auth/auth.module';
import { AuthHttp } from './auth/services/auth-http';
import { AuthService } from './auth/services/auth.service';

@Component({
    selector: 'myapp',
    templateUrl: 'app/app.html'
})

export class AppComponent implements OnInit {
    ...
}

app/app.module.ts: 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AuthModule } from './auth/auth.module';

import { AppComponent } from './app.component';

import { AuthService } from './auth/services/auth.service';
import { AuthHttp } from './auth/services/auth-http';

@NgModule({
  declarations: [
      AppComponent,
      AuthService,
      AuthHttp
  ],
  bootstrap: [ AppComponent ],
  imports : [
      BrowserModule,
      FormsModule,
      HttpModule,
      AuthModule,
      AppRoutingModule
  ],
  providers: [
      AuthService,
      AuthHttp
  ]
})
export class AppModule {
}
angulartypescriptangular2-modules
28
user2416984

Vous n'avez pas besoin de la ligne:

import { SigninComponent, RegisterComponent } from './auth/auth.module';

dans votre app.component.ts car vous avez déjà inclus la AuthModule dans votre app.module.ts. AutModule import est suffisant pour utiliser votre composant dans l'application.

L'erreur que vous obtenez est une erreur TypeScript, pas une erreur angulaire, et il est correct d'affirmer qu'il n'y a pas de membre exporté, car il recherche une syntaxe EC6 valide pour l'exportation, pas une exportation de module angulaire. Cette ligne fonctionnerait donc dans votre app.component.ts:

import { SigninComponent } from './auth/components/signin.component';
19
Fjut

Travailler avec atome (1.21.1 ia32) ... J'ai eu la même erreur, même si j'ai ajouté une référence à mon tube dans app.module.ts et dans les déclarations dans app.module.ts

la solution consistait à redémarrer mon instance de noeud ... arrêter le site Web puis faire ng serve again ... aller à localhost: 4200 a fonctionné comme un charme après ce redémarrage

38
Akber Iqbal

Aussi quelques cas courants:

vous exportez peut-être une classe avec le préfixe "par défaut" comme 

export default class Module {}

il suffit de l'enlever 

export class Module {}

c'est résoudre le problème pour moi 

7
Hasan Daghash

Pour moi, ce problème se produit lorsque j’avais plusieurs instructions export dans un seul fichier .ts.

4
Tomas

Je faisais face au même problème et je viens de commencer une application avec un nouveau port et tout est beau.

ng serve --port 4201

2
Jitendra G2

Cette erreur peut également se produire si le nom de votre interface est différent de celui du fichier qui le contient. Pour en savoir plus sur les modules ES6. Si la SignInComponent était une interface, comme dans mon cas, alors 

SignInComponent

devrait être dans un fichier nommé SignInComponent.ts.

2
ahmadalibaloch

J'ai un problème similaire. L'erreur que j'ai commise est que je n'ai pas ajouté de service dans le tableau de fournisseurs dans app.module.ts . J'espère que cela aide, merci.

1
Rohan Shenoy

Le nom du composant était incorrect (il est sensible à la casse) dans app.rounting.ts ou app.module.ts.

0
Manoj