CODEWITHSUNDEEP
javascriptangulartypescriptangular2-modules
user2416984
user2416984

Reputation: 971

Angular2 module has no exported member

For a website with authentication in Angular2, I want to use a component of the authentication submodule in the main app component. However, I keep getting the following error:

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

even after exporting SigninComponent.

The project folder structure is as shown below:

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

Upvotes: 48

Views: 193051

Answers (10)

Amede Angel Aulerien
Amede Angel Aulerien

Reputation: 398

For my case, I restarted the server and it worked.

Upvotes: 0

Andris
Andris

Reputation: 4193

In my module i am exporting classes this way: 

export { SigninComponent } from './SigninComponent';
export { RegisterComponent } from './RegisterComponent';

This allow me to import multiple classes in file from same module: 

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

PS: Of course @Fjut answer is correct, but same time it doesn't support multiple imports from same file. I would suggest to use both answers for your needs. But importing from module makes folder structure refactorings more easier.

Upvotes: 0

Rohan Shenoy
Rohan Shenoy

Reputation: 895

I got similar issue. The mistake i made was I did not add service in the providers array in app.module.ts. Hope this helps, Thank You.

Upvotes: 4

Jitendra G2
Jitendra G2

Reputation: 1206

I was facing same issue and I just started app with new port and everything looks good.

ng serve --port 4201

Upvotes: 2

Manoj
Manoj

Reputation: 541

I had the component name wrong(it is case sensitive) in either app.rounting.ts or app.module.ts.

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15031

Working with atom (1.21.1 ia32)... i got the same error, even though i added a reference to my pipe in the app.module.ts and in the declarations within app.module.ts

solution was to restart my node instance... stopping the website and then doing ng serve again... going to localhost:4200 worked like a charm after this restart

Upvotes: 58

Tomas
Tomas

Reputation: 3436

For me such issue occur when I had multiple export statements in single .ts file...

Upvotes: 7

ahmadalibaloch
ahmadalibaloch

Reputation: 6021

This error can also occur if your interface name is different than the file it is contained in. Read about ES6 modules for details. If the SignInComponent was an interface, as was in my case, then 

SignInComponent

should be in a file named SignInComponent.ts.

Upvotes: 6

Hasan Daghash
Hasan Daghash

Reputation: 1691

Also some of common cases :

maybe you export class with "default" prefix like so 

export default class Module {}

just remove it 

export class Module {}

this is solve the issue for me

Upvotes: 10

Fjut
Fjut

Reputation: 1324

You do not need the line:

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

in your app.component.ts as you already included the AuthModule in your app.module.ts. AutModule import is sufficient to use your component in the app.

The error that you get is a TypeScript error, not a Angular one, and it is correct in stating that there is no exported member, as it searches for a valid EC6 syntax for export, not angular module export. This line would thus work in your app.component.ts:

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

Upvotes: 28

Related Questions