Angular2模块没有导出的成员 [英] Angular2 module has no exported member

问题描述

对于在Angular2中具有身份验证的网站，我想在主应用程序组件中使用身份验证子模块的组件。但是，我一直收到以下错误：

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）：错误TS2305：模块'< ; dir> /app/auth/auth.module'没有导出成员'SigninComponent'。

即使在导出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 {
}

推荐答案

您不需要该行：

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

在 app.component.ts 中你已经在 app.module.ts 中加入了 AuthModule 。 AutModule import足以在应用程序中使用您的组件。

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.

您得到的错误是TypeScript错误，不是Angular的，并且说明没有导出的成员是正确的，因为它搜索有效的EC6语法以进行导出，而不是角度模块导出。因此，此行将在您的 app.component.ts 中有效：

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

这篇关于Angular2模块没有导出的成员的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！