1

I have an existing Angular application with a single module which is part of a bigger django application. As of now, I have an editor component (the root component) which are included like this:

<!-- edit.html -->
<editor></editor>

I now have to implement detail component which shall be completely independent from the editor component, but also include some of the components the editor uses as child components.

<!-- detail.html -->
<detail></detail>

But when I create a new components and add it to the [bootstrap] section of the app.module.ts file, I'll get an Error: 

'The selector <editor> did not match any elements'.

So this alone seems not to be sufficient. Do I need a whole new application? A new module? Can I still use any existent non-root components with either solution?

Oh, and if this makes a difference: I use webpack.

Mohl
  • 405
  • 2
  • 16
  • 1
    this might help clarify the questions you have: https://stackoverflow.com/questions/41681346/bootstrapping-multiple-components-in-angular2 – Akber Iqbal Aug 04 '19 at 04:16

1 Answers1

0

I've found a sort-of solution to this:

app.modules.ts:

import {ApplicationRef, DoBootstrap, NgModule} from '@angular/core';

@NgModule({
  entryComponents: [EditorComponent, DetailComponent],
  declarations: [
    EditorComponent,
    DetailComponent
  ],
  //bootstrap: [],
}]
export class AppModule implements DoBootstrap{
  ngDoBootstrap(appRef: ApplicationRef) {
    switch ((<any>window).Mode) {
      case 'editor':
         appRef.bootstrap(EditorComponent, 'editor');
        break;
      case 'detail':
         appRef.bootstrap(DetailComponent, 'detail');
        break;
    }
  }

and set the appropriate window variable both in editor.html & detail.html.

Mohl
  • 405
  • 2
  • 16