HTML文件中的Bootstrap Angular组件

Question

I use Angular on my frontend side with Django. Note that I don't use Angular for SPA, but use Django to serve templates. Problem is that I need to inject some angular components in templates but as I can see I can only bootstrap one root module.

This is my app.module.ts :

@NgModule({
  declarations: [
    ContactComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [ContactComponent, AboutComponent]
})

I want to inject ContactComponent <contact></contact> in contact.html , and AboutComponent <about></about> in about.html .

After ng-build I get following error:

The selector "contact" did not match any elements(…) in about.html The selector "about" did not match any elements(…) in contact.html

How can I achieve this, to exports angular components and use it in html files. Maybe Angular is build only for SPA or I am missing something.

I use Angular version 4 in my project which is generated through angular-cli (don't use SystemJS anymore).

Answer 1

What you are doing is right in programming terms. You can bootstrap multiple modules using declaration metadata as you are doing. So your error is NOT comming because the code you shown. You should check imports, reaches and selectors. Anyways.

The sense of bootstraping one only root component is an agreement that give more sense to modularity. And you have some other ways to bootstrap multiple modules

If the sense of your module is more like an individual app you can isolate them with their main.ts doing the bootstrap (each one) main.ts

import {bootstrap}    from '@angular2/platform/browser'
import {FirstComponent} from './my-first.component'

bootstrap(FirstComponent);

and then import in your HTML.

 System.import('first/main').then(null, console.error.bind(console));
 System.import('second/main').then(null, console.error.bind(console));

If the sense is to have as a "package" you can have a main module that acts as barrel, helper or how you want to name it. It imports your modules

@NgModule({
  declarations: [First],
  exports: [First]
})
export class FirstModule

@NgModule({
  declarations: [Second],
  exports: [Second]
})
export class SecondModule

@NgModule({
 imports: [FirstModule, SecondModule],
 exports: [FirstModule, SecondModule]
})
export class BarrelModule

You can use this only module when you require all of them.