Angular2 module has no exported member

Question

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:

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

Try adding SigninComponent in declaration of app/app.module.ts — lost_in_magento, Dec 21 '16 at 15:02

score 55 · Answer 1 · answered Oct 23 '17 at 09:06

55

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

answered Oct 23 '17 at 09:06

Akber Iqbal

12,257
11
34
52

13

I was busting my brain over the error from the original question here, until I came by this answer... running "ng serve" again made this error go away! Thanks – TheCuBeMan Apr 25 '18 at 12:59
This worked for me too, but not sure about what is this strange behaviour. Maybe there is some issue with change detection scheme, again, not sure though. – nice_dev Oct 12 '18 at 11:55

Fjut · Accepted Answer · 2016-12-21T22:03:26.983

27

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';

edited Dec 21 '16 at 22:03

answered Dec 21 '16 at 21:56

Fjut

1,226
9
23

1

this solved the issue thanks; the fact that the typescript compiler needs an explicit import feels however like the angular app is not fully modular... – user2416984 Dec 22 '16 at 08:14
1

This answer will work but it "hard-codes" the reference to a specific location within the module. I've found a better way is to declare the export at the bottom of the module after export class module: `export class AuthModule {}` `export * from './components/signin.component';` – Marshall-L-D Dec 17 '18 at 19:31

score 10 · Answer 3 · answered May 30 '17 at 19:32

10

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

answered May 30 '17 at 19:32

Hasan Daghash

1,600
1
15
28

What is the meaning of default keyword there? I also saw some examples with default keyword in some articles. If it creates problems for export, is there any real scenario where default keyword would be useful? – rineez Aug 17 '17 at 18:02
1

by adding the default keyword you tilling the route this will be the default Module incase i'm not referring a Module in the route class by using #Module name – Hasan Daghash Aug 20 '17 at 10:48

score 7 · Answer 4 · answered Oct 06 '17 at 09:26

7

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

answered Oct 06 '17 at 09:26

Tomas

2,488
1
21
35

score 6 · Answer 5 · answered Jun 30 '17 at 18:35

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.

score 4 · Answer 6 · answered Oct 16 '18 at 12:08

4

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.

answered Oct 16 '18 at 12:08

Rohan Shenoy

607
6
17

score 2 · Answer 7 · answered Oct 15 '18 at 13:23

2

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

ng serve --port 4201

answered Oct 15 '18 at 13:23

Jitendra G2

1,036
7
14

score 0 · Answer 8 · answered Aug 22 '18 at 17:07

0

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

answered Aug 22 '18 at 17:07

Manoj

531
4
7

Andris · Answer 9 · 2019-11-27T07:36:40.497

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.

score 0 · Answer 10 · answered Apr 21 '20 at 18:13

0

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

answered Apr 21 '20 at 18:13

Amede Angel Aulerien

71
1
4

Angular2 module has no exported member

10 Answers10

Linked