Le module Angular2 n'a pas de membre exporté

Question

Pour un site Web avec authentification en Angular2, je veux utiliser un composant du sous-module d'authentification dans le composant principal de l'application. Cependant, je continue à obtenir 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 avoir exporté SigninComponent.

La structure des dossiers du projet est la suivante :

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 {
}

Answer 1

Je travaille avec atom (1.21.1 ia32)... j'ai obtenu la même erreur, même si j'ai ajouté une référence à mon tube dans le fichier app.module.ts et dans les déclarations au sein de app.module.ts.

La solution était de redémarrer mon instance de nœud... en arrêtant le site web et en faisant ensuite ng servir encore une fois... aller à localhost:4200 a fonctionné comme un charme après ce redémarrage

Answer 2

Vous n'avez pas besoin de la ligne :

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

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

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

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

Answer 3

Quelques cas courants également :

Vous pouvez exporter une classe avec le préfixe "default" comme suit

export default class Module {}

il suffit de l'enlever

export class Module {}

Ceci résout le problème pour moi

Answer 4

Pour moi, ce problème s'est produit lorsque j'ai eu plusieurs export déclarations en une seule fois .ts fichier...

Answer 5

Cette erreur peut également se produire si le nom de votre interface est différent de celui du fichier dans lequel elle est contenue. Lisez la section sur les modules ES6 pour plus de détails. Si l'interface SignInComponent était une interface, comme dans mon cas, alors

SignInComponent

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