Thành phần không phải là một phần của bất kỳ NgModule nào hoặc mô-đun chưa được nhập vào mô-đun của bạn

Tôi đang xây dựng một ứng dụng 4 góc. Tôi đang gặp lỗi

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

Tôi đã tạo HomeModule và HomeComponent. Tôi cần tham khảo cái nào trong AppModule? Tôi la một chut Nhâm lân. Tôi có cần tham khảo HomeModule hoặc HomeComponent không? Cuối cùng những gì tôi đang tìm kiếm là khi người dùng nhấp vào menu Trang chủ, họ sẽ được chuyển hướng đến home.component.html sẽ được hiển thị trên trang chỉ mục.

App.module là:

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 là:

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 là:

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

}

Nếu bạn không sử dụng tính năng tải chậm, bạn cần nhập HomeComponent của mình vào app.module và đề cập đến nó trong phần khai báo. Ngoài ra, đừng quên xóa khỏi mục nhập

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

Trong trường hợp của tôi, tôi chỉ cần khởi động lại máy chủ (đó là nếu bạn đang sử dụng ng serve).

Nó xảy ra với tôi mỗi khi tôi thêm một mô-đun mới trong khi máy chủ đang chạy.

Trong trường hợp của tôi, tôi đã thiếu thành phần được tạo mới của mình trong declarationstại app.module.ts:

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

Tôi đã từng gặp vấn đề tương tự. Lý do là vì tôi đã tạo một thành phần trong khi máy chủ của tôi vẫn đang chạy. Giải pháp là thoát khỏi máy chủ và phục vụ lại.

Nguyên nhân thông thường NẾU bạn đang sử dụng câu lệnh nhập biểu mẫu hàm và tải chậm là nhập mô-đun định tuyến thay vì mô-đun trang . Vì thế:

Không chính xác :

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

Đúng :

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

Bạn có thể thoát khỏi điều này một thời gian, nhưng cuối cùng nó sẽ gây ra vấn đề.

Trong trường hợp của tôi, việc nhập các tuyến đường thực vào app.component.spec.tsđã gây ra các thông báo lỗi này. RouterTestingModuleThay vào đó, giải pháp là nhập .

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();
  }));

});

Tôi gặp phải thông báo lỗi này trong hai trường hợp riêng biệt, với tải chậm trong Angular 7 và những điều trên không giúp được gì. Để cả hai điều dưới đây hoạt động, bạn PHẢI dừng lại và khởi động lại để nó cập nhật hoàn toàn chính xác.

1) Lần đầu tiên, bằng cách nào đó tôi đã nhập sai AppModule của mình vào mô-đun tính năng được tải chậm. Tôi đã xóa quá trình nhập này khỏi mô-đun được tải chậm và nó bắt đầu hoạt động trở lại.

2) Lần thứ hai, tôi có một CoreModule riêng biệt mà tôi đang nhập vào AppModule VÀ cùng một mô-đun được tải chậm như # 1. Tôi đã xóa quá trình nhập này khỏi mô-đun được tải chậm và nó bắt đầu hoạt động trở lại.

Về cơ bản, hãy kiểm tra phân cấp hàng nhập khẩu của bạn và chú ý đến thứ tự của hàng nhập khẩu (nếu chúng được nhập ở đâu). Các mô-đun được tải lười biếng chỉ cần thành phần / phụ thuộc tuyến đường riêng của chúng. Ứng dụng và các phụ thuộc gốc sẽ được chuyển cho dù chúng được nhập vào AppModule hay được nhập từ mô-đun tính năng khác KHÔNG được tải chậm và đã được nhập trong mô-đun mẹ.

Tải lười góc

Trong trường hợp của tôi, tôi đã quên và nhập lại một thành phần đã là một phần của mô-đun con được nhập trong routing.ts.

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

Tôi gặp phải vấn đề tương tự và không có gì trong số những gì tôi thấy ở đây đang hoạt động. Nếu bạn đang liệt kê Thành phần của mình trong vấn đề app-routing.module, bạn có thể gặp phải vấn đề tương tự mà tôi đang gặp phải.

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

Tôi sẽ không khẳng định hiểu chính xác lý do tại sao lại như vậy, nhưng khi sử dụng lập chỉ mục để xuất các thành phần (và tôi sẽ giả sử điều này cho các dịch vụ, v.v.), khi tham chiếu cùng một thành phần trong các mô-đun riêng biệt, bạn cần nhập chúng từ cùng một tệp, trong trường hợp này là chỉ mục, để tránh vấn đề này.

Trong trường hợp của tôi, Angular 6, tôi đã đổi tên thư mục và tên tệp của các mô-đun của mình từ google.map.module.ts thành google-map.module.ts. Để biên dịch không có lớp phủ với tên mô-đun và thành phần cũ, trình biên dịch được biên dịch không có lỗi.

Trong app.routes.ts:

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

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

Trong google-map.module.ts:

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

Tôi gặp phải vấn đề tương tự. Tôi đã tạo một thành phần khác có cùng tên trong một thư mục khác. vì vậy trong mô-đun ứng dụng của tôi, tôi phải nhập cả hai thành phần nhưng với một thủ thuật

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

Sau đó, trong các khai báo, tôi có thể thêm AdminDuplicateComponent để thay thế.

Chỉ nghĩ rằng tôi sẽ để đó ở đó để tham khảo trong tương lai.

Kiểm tra mô-đun Lazy của bạn, tôi đã nhập AppRoutingModule trong mô-đun lười biếng. Sau khi loại bỏ nhập và nhập AppRoutingModule, Mine bắt đầu hoạt động.

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

Trong trường hợp của tôi, tôi đang di chuyển thành phần UserComponenttừ mô-đun này appModulesang mô-đun khác dashboardModulevà quên xóa định nghĩa tuyến khỏi định tuyến của mô-đun trước đó appModuletrong tệp AppRoutingModule.

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

Sau khi tôi xóa định nghĩa tuyến đường, nó hoạt động tốt.

nếu bạn đang sử dụng tính năng tải chậm thì phải tải mô-đun đó trong bất kỳ mô-đun bộ định tuyến nào, chẳng hạn như trong app-routing.module.ts {path: 'home', loadChildren: './ home.module # HomeModule'}

Trường hợp của tôi cũng giống như @ 7guyo đã nêu. Tôi đang sử dụng lazyloading và đã vô tình làm điều này:

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

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

Thay vì:

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

Bạn có thể sửa lỗi này bằng hai bước đơn giản:

Thêm componnet của bạn (HomeComponent) vào declarationsmảng entryComponentsmảng.

Vì thành phần này không truy cập vào bộ chọn ném hay bộ định tuyến, nên việc thêm thành phần này vào mảng entryComponnets là quan trọng

xem cách làm:

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

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

Khi bạn sử dụng tải chậm, bạn cần xóa mô-đun và mô-đun định tuyến của thành phần khỏi mô-đun ứng dụng. Nếu bạn không, nó sẽ cố gắng tải chúng khi ứng dụng bắt đầu và xử lý lỗi đó.

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

Trong trường hợp của tôi, tôi đã nhập sai, Tại vị trí mô-đun thay vì nhập mô-đun (DemoModule) đã nhập mô-đun định tuyến (DemoRoutingModule)

Nhập sai:

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

Mã phải

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

Xác minh rằng thành phần của bạn được nhập đúng cách trong app-routing.module.ts. Trong trường hợp của tôi đó là lý do

Điều kiện tiên quyết: 1. Nếu bạn có nhiều Mô-đun 2. Và bạn đang sử dụng một thành phần (giả sử DemoComponent) từ một mô-đun khác (giả sử AModule), trong một mô-đun khác (giả sử BModule)

Sau đó, AModule của bạn nên

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

và BModule của bạn phải

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

Trong một số trường hợp, điều tương tự có thể xảy ra khi bạn đã tạo một mô-đun cho HomeComponent và trong app-routing.module, bạn đã trực tiếp cung cấp cả hai

component: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" trong mảng Routes.

khi chúng tôi thử tải chậm, chúng tôi chỉ cung cấp thuộc tính loadChildren.

Tôi gặp lỗi này vì tôi có cùng tên của thành phần trong 2 mô-đun khác nhau. Một giải pháp là nếu nó được chia sẻ sử dụng kỹ thuật xuất khẩu, v.v. nhưng trong trường hợp của tôi, cả hai đều phải được đặt tên giống nhau nhưng mục đích khác nhau.

Vấn đề thực sự

Vì vậy, trong khi nhập thành phần B, intellisense đã nhập đường dẫn của Thành phần A, vì vậy tôi phải chọn tùy chọn thứ 2 của đường dẫn thành phần từ intellisense và điều đó đã giải quyết được vấn đề của tôi.