Question

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

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

即使在导出SigninComponent之后。

项目文件夹结构如下所示：

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

应用/ AUTH /组件/ 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.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.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 {
}

Answer 1

使用atom（1.21.1 ia32）...我得到了同样的错误，即使我在app.module.ts和app.module.ts中的声明中添加了对我的管道的引用

解决方案是重新启动我的节点实例...停止网站然后再次执行 ng serve ...转到localhost：4200在重启后像魅力一样工作

Answer 2

您不需要该行：

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

app.component.ts中的{{1>}，因为您已在AuthModule中加入了app.module.ts。 AutModule导入足以在应用中使用您的组件。

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

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

Answer 3

还有一些常见情况：

也许你用“默认”前缀导出类，如此

export default class Module {}

删除它

export class Module {}

这可以解决我的问题

Answer 4

对于我来说，当我在单个export文件中有多个.ts语句时会出现此问题...

Answer 5

如果您的接口名称与其所包含的文件不同，也会发生此错误。有关详细信息，请阅读ES6模块。如果SignInComponent是一个界面，就像我的情况一样，那么

SignInComponent

应位于名为SignInComponent.ts的文件中。

Answer 6

我遇到了同样的问题，我刚刚使用新端口启动了应用程序，一切看起来都很好。

ng serve --port 4201

Answer 7

我遇到类似的问题。我犯的错误是我没有在app.module.ts的providers数组中添加服务。希望对您有所帮助，谢谢。

Answer 8

在app.rounting.ts或app.module.ts中，组件名称错误（区分大小写）。

Answer 9

在我的模块中，我以这种方式导出类：

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

这使我可以从同一模块中导入文件中的多个类：

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

PS：@Fjut答案当然是正确的，但同时它不支持从同一文件进行多次导入。我建议您同时使用这两个答案。但是从模块导入使文件夹结构重构更加容易。

Answer 10

对于我来说，我重新启动了服务器，并且该服务器正常工作。

Angular2模块没有导出的成员

10 个答案: