[Angular] Getting error "Multiple components match with the same tagname <bryntum-scheduler> "

[sachidanand]

Hello team ,

I am using Bryntum scheduler and Gantt in the same page so when I register BryntumSchedulerModule and BryntumGanttModule in the same app.module.ts, I get the following error:
"Multiple components match with the same tagname "

Please let me know ,what is the solution to this issue ?

[alex.l]

Hi sachidanand,

Any chance to see the code? Error description here said it may be because of using same selectors https://angular.io/errors/NG0300
But we have to see your code to run and debug it.

[sachidanand]

Hello Alex,

I am not able to attach the zip file over here , getting error file size too large. Please let me know the alternate way , how do I share the runnable code with you?

[saki]

Delete node_modules folder, re-zip and try again, hopefully it helps.

[sachidanand]

Hi Team,

Please find the attached runnable code in zipped fromat.

[saki]

The problem is that both @bryntum/gantt-angular and @bryntum/scheduler-angular include components with the same tags. If they are used as modules in app.module.ts then these names clash (we prepare a solution for next major release of our components).

For now, remove one of the modules from app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppErrorHandler } from './error.handler';

import { AppComponent } from './app.component';
import { BryntumGanttModule } from '@bryntum/gantt-angular';
// import { BryntumSchedulerModule } from '@bryntum/scheduler-angular';

@NgModule({
    declarations : [
        AppComponent
    ],
    imports : [
        BrowserModule,
        BryntumGanttModule,
        // BryntumSchedulerModule
    ],
    providers : [{ provide : ErrorHandler, useClass : AppErrorHandler }],
    bootstrap : [AppComponent]
})
export class AppModule { }

If you then need a component from the other package, import it individually the same way as AppComponent.

[sachidanand]

Hello Team,

I tried importing a component separately but it is throwing some error. Please find attached runnable test case for the same.

Also, could you please let me know when will be the major next release ?

[saki]

Actually, it is even simpler. Your code will run with:

package.json:

    "@bryntum/gantt": "4.2.7",
    "@bryntum/gantt-angular": "4.2.7",

and app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppErrorHandler } from './error.handler';

import { AppComponent } from './app.component';
import {
  BryntumGanttModule,
  BryntumGanttComponent,
} from '@bryntum/gantt-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [BrowserModule, BryntumGanttModule],
  providers: [{ provide: ErrorHandler, useClass: AppErrorHandler }],
  bootstrap: [AppComponent]
})
export class AppModule {}

The reason for it is that Scheduler Pro is included in Gantt package (still licensed separately, though).

[sachidanand]

Hello Team,

I tried that approach but doesn't seem to be working . When I import the component in app.module.ts. I get the error as
"Cannot declare BryntumGanttComponent in an NgModule as it is not part of current compilation."

Please find attached runnable code .

[saki]

Try the attached code. That works for me.