web-dev-qa-db-ja.com

Angular2モジュールにはエクスポートされたメンバーがありません

Angular2で認証を行うWebサイトの場合、メインアプリコンポーネントの認証サブモジュールのコンポーネントを使用します。ただし、次のエラーが発生し続けます。

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

signinComponentをエクスポートした後でも。

プロジェクトのフォルダー構造は次のとおりです。

enter image description here

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 {
}
javascriptangulartypescriptangular2-modules
36
user2416984

次の行は必要ありません。

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

app.component.tsに既にAuthModuleを含めているので、app.module.tsに。アプリでコンポーネントを使用するには、AutModule importで十分です。

表示されるエラーはAngularのエラーではなく、TypeScriptのエラーです。また、エクスポートされたメンバーが存在しないことを示しているのは正しいことです。したがって、この行はapp.component.tsで機能します。

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

アトム（1.21.1 ia32）の操作... app.module.tsおよびapp.module.ts内の宣言にパイプへの参照を追加しても、同じエラーが発生しました

解決策は、ノードインスタンスを再起動することです... Webサイトを停止してからng serveを再度実行します...この再起動後、localhost：4200に行くのは魅力的でした

46
Akber Iqbal

また、いくつかの一般的なケース：

多分あなたはそのように「デフォルト」の接頭辞を持つクラスをエクスポートします

export default class Module {}

削除するだけ

export class Module {}

これは私のために問題を解決します

8
Hasan Daghash

私にとって、このような問題は、単一の.tsファイルに複数のexportステートメントがあったときに発生します...

5
Tomas

このエラーは、インターフェイス名が含まれているファイルと異なる場合にも発生する可能性があります。詳細については、ES6モジュールについてお読みください。 SignInComponentが私の場合のようにインターフェースだった場合、

SignInComponent

SignInComponent.tsという名前のファイルにある必要があります。

4
ahmadalibaloch

私は同じ問題に直面していたので、新しいポートでアプリを開始したばかりで、すべてがうまく見えます。

ng serve --port 4201

2
Jitendra G2

同様の問題が発生しました。私が犯した間違いは、app.module.tsのプロバイダー配列にサービスを追加しなかったことです。これがお役に立てば幸いです、ありがとう。

1
Rohan Shenoy

App.rounting.tsまたはapp.module.tsでコンポーネント名が間違っていました（大文字と小文字が区別されます）。

0
Manoj