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 err

Answer 1

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

Answer 2

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.

Answer 3

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

ng serve --port 4201

Answer 4

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

Answer 5

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

Answer 6

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.