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