48

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

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

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

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

ここに画像の説明を入力

アプリ/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 {}

アプリ/認証/コンポーネント/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 {
}
4

10 に答える 10

28

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

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

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

表示されるエラーは、Angular のエラーではなく TypeScript エラーです。Angular モジュールのエクスポートではなく、エクスポート用の有効な EC6 構文を検索するため、エクスポートされたメンバーがないことを示すのは正しいことです。したがって、この行は次のように機能しますapp.component.ts。

import { SigninComponent } from './auth/components/signin.component';
于 2016-12-21T21:56:41.533 に答える
10

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

たぶん、「デフォルト」プレフィックスでクラスをエクスポートします

export default class Module {}

取り除くだけ

export class Module {}

これは私にとって問題を解決します

于 2017-05-30T19:32:12.643 に答える
4

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

于 2018-10-16T12:08:01.797 に答える