Angular エラー "複数のモジュールが一致します" を回避する3つの方法
2024-04-02
Angular エラー: 複数のモジュールが一致します。コンポーネントを最も近いモジュールにインポートしないようにするには、skip-import オプションを使用します。
このエラーを解決するには、以下の方法があります。
コンポーネントを最も近いモジュールにインポートする
コンポーネントが複数のモジュールで宣言されている場合、コンポーネントを最も近いモジュールにインポートする必要があります。
例:
@NgModule({
declarations: [
AppComponent,
MyComponent,
],
imports: [
BrowserModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
@NgModule({
declarations: [
MyOtherComponent,
],
imports: [
CommonModule,
],
})
export class MyOtherModule {}
この例では、MyComponent は AppModule で宣言されています。これは、MyComponent が AppModule で使用されるためです。
skip-import オプションを使用する
コンポーネントを最も近いモジュールにインポートできない場合は、skip-import オプションを使用できます。
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
@NgModule({
declarations: [
MyComponent,
],
imports: [
CommonModule,
],
})
export class MyOtherModule {}
このエラーを解決するには、MyComponent を AppModule にインポートする際に、skip-import オプションを使用できます。
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MyOtherModule.withComponent(MyComponent, { skipImport: true }),
],
bootstrap: [AppComponent],
})
export class AppModule {}
skip-import オプションを使用すると、Angularは MyComponent を AppModule にインポートしません。
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
@NgModule({
declarations: [
MyComponent,
],
imports: [
CommonModule,
],
})
export class MyOtherModule {}
@NgModule({
declarations: [
MyOtherComponent,
],
imports: [
CommonModule,
],
})
export class MyOtherOtherModule {}
このエラーは、コンポーネントが複数のモジュールで宣言されている場合に発生します。このエラーを解決するには、以下の方法があります。
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my.component';
@NgModule({
declarations: [
AppComponent,
MyComponent,
],
imports: [
BrowserModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
// my.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent {
}
// my.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';
@NgModule({
declarations: [
MyComponent,
],
imports: [
CommonModule,
],
})
export class MyModule {}
このコードを実行すると、以下のエラーが発生します。
Error: Error encountered resolving symbol values statically. Calling function 'withComponent' of NgModule class 'MyModule'. Function call does not support this.
Reference:
- AppModule in /Users/username/projects/angular-error/src/app/app.module.ts
- MyModule in /Users/username/projects/angular-error/src/app/my/my.module.ts
1. Is 'MyComponent' a directive/component?
2. Is 'MyModule' an NgModule?
3. Is 'MyComponent' imported into 'AppModule'?
4. Is 'MyModule' imported into 'AppModule'?
このエラーを解決するには、上記の解説で説明した方法を使用する必要があります。
Angular エラー: 複数のモジュールが一致します。コンポーネントを最も近いモジュールにインポートしないようにするには、skip-import オプションを使用します。
コンポーネントを別のファイルに移動する
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
// my.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent {
}
// my.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent {
}
この例では、MyComponent は app.component.ts ファイルに記述されています。MyComponent を別のファイルに移動することで、このエラーを解決できます。
コンポーネントを共有モジュールに移動する
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
// my.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent {
}
// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';
@NgModule({
declarations: [
MyComponent,
],
imports: [
CommonModule,
],
exports: [
MyComponent,
],
})
export class SharedModule {}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
SharedModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
この例では、MyComponent は shared.module.ts ファイルに記述されています。SharedModule を AppModule にインポートすることで、MyComponent を AppModule で使用することができます。
コンポーネントを Factory に移動する
// app.component.ts
import
angular
