Angular2 模块没有导出成员答案

【问题标题】：Angular2 module has no exported memberAngular2 模块没有导出成员
【发布时间】：2017-05-07 00:08:34
【问题描述】：

对于在 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 {}

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

【问题讨论】：

尝试在 app/app.module.ts 的声明中添加 SigninComponent
你可能在那个模块中有一些错误。

标签： javascript angular typescript angular2-modules

【解决方案1】：

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

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

【讨论】：

我正在为原始问题的错误而绞尽脑汁，直到我得到这个答案......再次运行“ng serve”使这个错误消失了！谢谢
这对我也有用，但不确定这是什么奇怪的行为。也许变化检测方案存在一些问题，但不确定。

【解决方案2】：

你不需要这条线：

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

在您的app.component.ts 中，因为您已经在您的app.module.ts 中包含了AuthModule。 AutModule import 足以在应用中使用您的组件。

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

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

【讨论】：

这解决了这个问题，谢谢；打字稿编译器需要显式导入这一事实感觉就像 Angular 应用程序不是完全模块化的......
这个答案会起作用，但它会“硬编码”对模块内特定位置的引用。我发现一个更好的方法是在导出类模块之后在模块底部声明导出：export class AuthModule {}export * from './components/signin.component';

【解决方案3】：

还有一些常见的情况：

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

export default class Module {}

删除它

export class Module {}

这是为我解决问题

【讨论】：

这里的default关键字是什么意思？我还在一些文章中看到了一些带有默认关键字的示例。如果它给导出带来问题，是否存在默认关键字有用的实际场景？
通过添加默认关键字你耕种路由，这将是默认模块，因为我没有使用#Module name 引用路由类中的模块

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

SignInComponent

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

ng serve --port 4201

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

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

这允许我从同一个模块导入多个文件中的类：

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

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

【讨论】：

【解决方案10】：

就我而言，我重新启动了 服务器 并且它工作了。

【讨论】：