コンポーネントがNgModuleの一部ではないか、モジュールがモジュールにインポートされていません

Angular 4アプリケーションを構築しています。エラーが発生します

Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

HomeModuleとHomeComponentを作成しました。AppModuleを参照するために必要なものはどれですか？私は少し混乱しています。HomeModuleまたはHomeComponentを参照する必要がありますか？最終的に私が探しているのは、ユーザーが[ホーム]メニューをクリックすると、インデックスページに表示されるhome.component.htmlに移動することです。

App.moduleは：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import { AppRoutingModule } from './app.routing';
import { HomeModule } from './Home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent

  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

HomeModuleは：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

HomeComponentは次のとおりです。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

遅延読み込みを使用していない場合は、app.moduleにHomeComponentをインポートし、宣言でそれを言及する必要があります。また、インポートから削除することを忘れないでください

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http'

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeModule} from './Home/home.module';
// import HomeComponent here

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent,
    // add HomeComponent here
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule  // remove this

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

私の場合、サーバーを再起動するだけです（つまり、を使用している場合ng serve）。

サーバーの実行中に新しいモジュールを追加するたびに発生します。

私の場合、新しい生成されたコンポーネントがdeclarationsat にありませんでしたapp.module.ts：

@NgModule({
  declarations: [
    AppComponent,
    ....
    NewGeneratedComponent, //this was missing
    ....
  ],
  imports: [
    ....

私も同じ問題を抱えていました。その理由は、サーバーがまだ稼働しているときにコンポーネントを作成したためです。解決策は、サーバーを終了してng serveにすることです。

遅延読み込みと関数形式のインポートステートメントを使用している場合の通常の原因は、ページモジュールではなくルーティングモジュールをインポートしていることです。そう：

不正：

loadChildren: () => import('./../home-routing.module').then(m => m.HomePageRoutingModule)

正解：

loadChildren: () => import('./../home.module').then(m => m.HomePageModule)

あなたはしばらくこれでうまくいくかもしれませんが、結局それは問題を引き起こします。

Angular 7での遅延読み込みで、2つの別々の状況でこのエラーメッセージに遭遇しましたが、上記は役に立ちませんでした。以下の両方が機能するためには、ng serveを停止して再起動し、完全に正しく更新する必要があります。

1）初めて、なんらかの方法でAppModuleを遅延読み込みされた機能モジュールに誤ってインポートしました。遅延ロードされたモジュールからこのインポートを削除すると、再び機能し始めました。

2）2回目は、AppModuleにインポートする別のCoreModuleと、＃1と同じ遅延ロードされたモジュールがありました。遅延ロードされたモジュールからこのインポートを削除すると、再び機能し始めました。

基本的に、インポートの階層を確認し、インポートの順序に注意してください（インポートが必要な場所にインポートされている場合）。遅延ロードされたモジュールは、独自のルートコンポーネント/依存関係のみを必要とします。アプリと親の依存関係は、それらがAppModuleにインポートされても、遅延読み込みされずに親モジュールに既にインポートされている別の機能モジュールからインポートされても、継承されます。

私の場合、実際のルートをインポートするとapp.component.spec.ts、これらのエラーメッセージが表示されていました。解決策は、RouterTestingModule代わりにインポートすることでした。

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [RouterTestingModule]
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    console.log(fixture);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

});

角度遅延読み込み

私の場合、routing.tsにインポートされた子モジュールの一部であるコンポーネントを忘れて再インポートしました。

....
...
 {
path: "clients",
component: ClientsComponent,
loadChildren: () =>
  import(`./components/users/users.module`).then(m => m.UsersModule)
}
.....
..

私はこれと同じ問題に遭遇し、私がここで見ているものはどれもうまくいきませんでした。app-routing.moduleの問題でコンポーネントをリストしている場合は、私が抱えていたのと同じ問題に遭遇した可能性があります。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeModule} from './Home/home.module';
// import HomeComponent here

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent,
    // add HomeComponent here
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule  // remove this

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

home / index.ts

export * from './';

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components';

const routes: Routes = [
    { path: 'app/home', component: HomeComponent },
    { path: '', redirectTo: 'app/home', pathMatch: 'full' },
    { path: '**', redirectTo: 'app/home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

home / home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// import { HomeComponent } from './home.component'; This would cause app to break
import { HomeComponent } from './';
@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

これが事実である理由を正確に理解するとは主張しませんが、インデックスを使用してコンポーネントをエクスポートする場合（サービスなどについても同じであると想定します）、別のモジュールで同じコンポーネントを参照する場合は、この問題を回避するために、同じファイル、この場合はインデックス。

私の場合、Angular 6では、モジュールのフォルダーとファイルの名前をgoogle.map.module.tsからgoogle-map.module.tsに変更しました。 古いモジュールとコンポーネント名でオーバーレイなしでコンパイルするために、ngコンパイラはエラーなしでコンパイルされました。

app.routes.tsで：

     {
        path: 'calendar', 
        loadChildren: './views/app-calendar/app-calendar.module#AppCalendarModule', 
        data: { title: 'Calendar', breadcrumb: 'CALENDAR'}
      },

google-map.routing.ts

import { GoogleMapComponent } from './google-map.component';
const routes: Routes = [
  {
    path: '', component: GoogleMapComponent, data: { title: 'Coupon Map' }
  }
];
@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forChild(routes)]
})
export class GoogleMapRoutingModule { }

google-map.module.tsで：

import { GoogleMapRoutingModule } from './google-map.routing';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CommonModule,
    GoogleMapRoutingModule,
  ],
  exports: [GoogleMapComponent],
  declarations: [GoogleMapComponent]
})
export class GoogleMapModule { }

同じ問題に遭遇しました。別のフォルダに同じ名前の別のコンポーネントを作成しました。私のアプリモジュールでは、両方のコンポーネントをインポートする必要がありましたが、トリックが必要でした

import {DuplicateComponent as AdminDuplicateComponent} from '/the/path/to/the/component';

次に、宣言で代わりにAdminDuplicateComponentを追加できます。

私はそれを将来の参照のためにそこに残しておくと思いました。

レイジーモジュールを確認してください。レイジーモジュールにAppRoutingModuleをインポートしました。AppRoutingModuleのインポートとインポートを削除した後、Mineは作業を開始しました。

import { AppRoutingModule } from '../app-routing.module'; 

私の場合、コンポーネントUserComponentをあるモジュールappModuleから別のモジュールに移動してdashboardModuleいてappModule、AppRoutingModuleファイル内の前のモジュールのルーティングからルート定義を削除するのを忘れていました。

const routes = [
 { path: 'user', component: UserComponent, canActivate: [AuthGuard]},...]

ルート定義を削除した後、うまくいきました。

遅延読み込みを使用している場合は、app-routing.module.ts {path： 'home'、loadChildren： './ home.module＃HomeModule'}のように、そのモジュールをルーターモジュールに読み込む必要があります。

私の場合は、@ 7guyoと同じです。私はレイジーローディングを使用していて、これを一貫して行っていました：

import { component1Route } from './path/component1.route';

export const entityState: Routes = [
{
   path: 'home',
   children: component1Route
}]

の代わりに：

@NgModule({
imports: [
   RouterModule.forChild([
   {
     path: '',
     loadChildren: () => import('./component1/component1.module').then(m => m.ComponentOneModule)
  },
  {
    path: '',
    loadChildren: () => import('./component2/component2.module').then(m => m.ComponentTwoModule)
  }])
  ]})

  export class MainModule {}

簡単な2つのステップでこれを修正できます。

componnet（HomeComponent）をdeclarations配列entryComponentsarrayに追加します。

このコンポーネントはスローセレクターにもルーターにもアクセスしないため、これをentryComponnets配列に追加することが重要です

方法を見る：

@NgModule({
  declarations: [
    AppComponent,
    ....
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...

  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [HomeComponent]
})
export class AppModule {} 

遅延ロードを使用する場合、コンポーネントのモジュールとルーティングモジュールをアプリモジュールから削除する必要があります。そうでない場合は、アプリの起動時にそれらをロードしようとし、そのエラーをスローします。

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      AppRoutingModule,
      // YourComponentModule,
      // YourComponentRoutingModule
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

私の場合、間違ってインポートしました。モジュール（DemoModule）をインポートする代わりに、モジュールの場所でルーティングモジュール（DemoRoutingModule）をインポートしました

間違ったインポート：

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo-routing.module').then(m => m.DemoRoutingModule)}]
  }
];

正しいコード

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo.module').then(m => m.DemoModule)}]
  }
];

コンポーネントがapp-routing.module.tsに正しくインポートされていることを確認します。私の場合はそれが理由でした

前提条件：1.複数のモジュールがある場合2.別のモジュール（AModuleを想定）のコンポーネント（DemoComponentを想定）を別のモジュール（BModuleを想定）で使用している

次に、あなたのAModuleは

@NgModule({
  declarations: [DemoComponent],
  imports: [
    CommonModule
  ],
  exports: [AModule]
})
export class AModule{ }

そしてあなたのBModuleは

@NgModule({
  declarations: [],
  imports: [
    CommonModule, AModule
  ],
  exports: [],
})
export class BModule { }

場合によっては、HomeComponentのモジュールを作成し、app-routing.moduleで両方を直接指定した場合にも同じことが発生することがあります。

コンポーネント：HomeComponent、loadChildren： "./ modules /.../ HomeModule.module＃HomeModule"（Routes配列）。

遅延読み込みを試みる場合、loadChildren属性のみを指定します。

2つの異なるモジュールに同じ名前のコンポーネントがあるため、このエラーが発生しました。1つの解決策は、共有する場合にエクスポート技術などを使用することですが、私の場合、両方に同じ名前を付ける必要がありましたが、目的が異なっていました。

本当の問題

したがって、コンポーネントBのインポート中に、インテリセンスがコンポーネントAのパスをインポートしたため、インテリセンスからコンポーネントパスの2番目のオプションを選択する必要があり、それによって問題が解決しました。