两个模块上的相同 bootstrap 组件

Question

我的应用程序包含以下模块，其中我有与 bootstrap.

相同的组件 (AppComponent)

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        MoreComponents
    ],
    imports: [BrowserModule, MoreModule],
    providers: [
        ModulesService, MoreServices,
    ],
    entryComponents: [SomeComponent],
    bootstrap: [AppComponent, BarTopComponent],
})
export class AppModule { }

newApp.module.ts

@NgModule({
    declarations: [
        AppComponent,
        MoreComponents
    ],
    imports: [
        BrowserModule, MoreModule
    ],
    providers: [
        ModulesService, MoreServices,  
    ],
    entryComponents: [SomeComponent],
    bootstrap: [AppComponent, OtherComponent],
})
export class AppNewModule { }

根据参数加载正确的模块。像

main.ts

if (Utils.someParameter()) {
    platformBrowserDynamic().bootstrapModule(AppModule).then((module: { injector: { get: (arg0: any) => { (): any; new(): any; components: any[]; }; }; }) => {

    }).catch(err => console.error(err));

} else {
    platformBrowserDynamic().bootstrapModule(AppNewModule).then((module: { injector: { get: (arg0: any) => { (): any; new(): any; components: any[]; }; }; }) => {
    }).catch(err => console.error(err));
}

这导致我出现错误“AppComponent 是 2 个模块声明的一部分”。

处理这个问题的最佳方法是什么？

我创建了一个这样的分享模块：

shared.module.ts

@NgModule({
    declarations: [
        // Components
        AppComponent,
    ],
    exports: [
        AppComponent
    ],

})
export class SharedModule { }

app.module.ts

@NgModule({
    declarations: [
        MoreComponents
    ],
    imports: [
        SharedModule, BrowserModule, MoreModule
    ],
    providers: [
        ModulesService, MoreServices,
    ],
    entryComponents: [SomeComponent],
    bootstrap: [AppComponent, ApplicationBarTopComponent],
})
export class AppModule { }

newApp.module.ts

@NgModule({
    declarations: [
        MoreComponents
    ],
    imports: [
        SharedModule, BrowserModule, MoreModule
    ],
    providers: [
        ModulesService, MoreServices,  
    ],
    entryComponents: [SomeComponent],
    bootstrap: [AppNewModule , OtherComponent],
})
export class AppNewModule { }

但我仍然遇到同样的问题。

我还尝试创建一个包含与 AppComponent 相同代码的新 NewAppComponent，但这也不起作用，因为我在控制器上注入了 AppComponent。

例如：

@Component({
    selector: 'someSelector',
    templateUrl: './random.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RandomComponent  {
    
    constructor(public application: AppComponent) {
    }
}

我该如何解决？

Answer 1

很确定记下了明确的方法，但我找到了解决方案。我现在有两个 bootstrap 控制器（AppController 和 AppNewController）和其他控制器

@Component({
    selector: 'someSelector',
    templateUrl: './random.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RandomComponent  {
    public app: any;
    
    constructor(@Optional() public tempApp: AppComponent,
                @Optional() public tmpNewApp: AppNewComponent) 
    {
        if (someConditions) {
            this.app = tempApp;
        } else {
            this.app = tmpNewApp;
        }
    }}

两个模块上的相同 bootstrap 组件

Same bootstrap Component on two modules

dependency-injection

module

angular