Angular2模块没有导出成员。

Question

对于一个具有身份验证的Angular2网站，我想在主应用程序组件中使用身份验证子模块的组件。 但是，即使导出了SigninComponent，我仍然会收到以下错误：

app / app.component.ts（3,10）：错误TS2305：模块““<dir>/app/auth/auth.module””没有导出成员“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 {}

应用程序/身份验证/组件/登录.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组件.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 {
}

- user2416984

---

尝试在 app/app.module.ts 的声明中添加 SigninComponent。 - lost_in_magento

你的那个模块可能存在一些错误。 - Rohith K P

Answer 1

在使用Atom（1.21.1 ia32）时...我遇到了相同的错误，尽管我已经在app.module.ts中添加了对我的pipe的引用以及在app.module.ts的声明中添加了它。

解决方法是重新启动我的node实例...停止网站，然后再次执行ng serve... 在此重启后访问localhost:4200一切正常。

- Akber Iqbal

---

在原始问题中，我一直在苦思冥想如何解决错误，直到看到了这个答案……重新运行“ng serve”后，错误消失了！谢谢 - TheCuBeMan

这对我也起作用了，但不确定这是什么奇怪的行为。也许与变更检测方案有关，但也不确定。 - nice_dev

Answer 2

您不需要这行代码：

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

在您的app.component.ts文件中，由于您已经在app.module.ts中包含了AuthModule，因此只需导入AuthModule即可在应用程序中使用该组件。

您遇到的错误是TypeScript错误而不是Angular错误，并且正确地指出不存在导出的成员，因为它搜索有效的EC6语法以进行导出，而不是Angular模块导出。因此，这行代码可以在您的app.component.ts中工作：

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

- Fjut

---

这解决了问题，谢谢；然而，TypeScript编译器需要显式导入的事实让人感觉Angular应用程序并不是完全模块化的... - user2416984

这个答案可以工作，但是它“硬编码”了模块内特定位置的引用。我发现一个更好的方法是在导出类模块底部声明导出： export class AuthModule {} export * from './components/signin.component'; - Marshall-L-D

Answer 3

以下是一些常见情况：

可能您使用了 "default" 前缀导出类，像这样：

export default class Module {}

只需删除它

export class Module {}

这解决了我的问题。

- Hasan Daghash

---

那里的default关键字是什么意思？我在一些文章中也看到了一些使用default关键字的示例。 如果它对导出造成问题，那么是否存在任何实际场景，其中default关键字会有用呢？ - rineez

通过添加默认关键字，您可以填充路由，这将是默认模块，以防我在路由类中不引用模块，使用＃模块名称。 - Hasan Daghash

Answer 4

对我而言，当我在单个.ts文件中有多个export语句时，就会出现这样的问题...

- Tomas

Answer 5

如果您的接口名称与包含它的文件名称不同，也会出现此错误。了解有关ES6模块的详细信息。如果 SignInComponent 是一个接口，就像我遇到的情况一样，那么

SignInComponent

应该在名为SignInComponent.ts的文件中。

- ahmadalibaloch

Answer 6

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

- Rohan Shenoy

Answer 7

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

ng serve --port 4201

- Jitendra G2

Answer 8

我在 app.routing.ts 或 app.module.ts 中组件名称写错了（大小写敏感）。

- Manoj

Answer 9

对于我的情况，我重新启动了服务器，然后它就正常工作了。

- Amede Angel Aulerien

Answer 10

在我的模块中，我是这样导出类的：

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

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

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

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

- Andris