Начальная загрузка множественного корневого компонента в Angular 4

Question

У нас есть приложение JQuery, где у нас есть требование для реализации некоторых модулей в Angular 4. Поэтому для этого мы вручную запускаем приложение Angular.Но теперь дело в том, что мы создали несколько угловых компонентов, и теперь все они загружаются, когда мы загружаем AppComponent, что замедляет загрузку приложения.

Итак, я хочу загрузить несколько корневых компонентов (т.е. AppComponent, App1Component), чтобы и соответственно использовать дочерние компоненты на их основе.

Итак, моя реализация не работает.

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule,App1Module } from './app.module';
import { enableProdMode } from '@angular/core';

platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic().bootstrapModule(App1Module)

app.module.ts

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { AppugComponent }   from './appug.component';

import { AppChild1Component }   from './profile/appchild1.component';
import { AppChild2Component }   from './profile/appchild2.component';
import { AppChild3Component }   from './profile/appchild3.component';
import { AppChild4Component }   from './profile/appchild4.component';

import { UgChild1Component }   from './ug/ugchild1.component';
import { UgChild2Component }   from './ug/ugchild2.component';
import { UgChild3Component }   from './ug/ugchild3.component';
import { UgChild4Component }   from './ug/ugchild4.component';

@NgModule({
  imports:      [BrowserAnimationsModule, BrowserModule, FormsModule,HttpModule],
  declarations: [ 
                    AppComponent,
                    AppChild1Component, 
                    AppChild2Component,
                    AppChild3Component,
                    AppChild4Component,
                ],  
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


@NgModule({
  imports:      [BrowserAnimationsModule, BrowserModule, FormsModule,HttpModule],
  declarations: [
                  AppugComponent,
                  UgChild1Component, 
                  UgChild2Component,
                  UgChild3Component,
                  UgChild4Component,
                ],
  bootstrap:    [ AppugComponent ]
})
export class App1Module { }

app.component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-app,
  template:`<h1>app</h1>`,  
})
export class AppComponent implements OnInit {}

appug.component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-appug,
  template:`<h1>appug</h1>`,    
})
export class AppugComponent implements OnInit {}

Вот ошибка, которую я получаю на консоли:

Unhandled Promise rejection: The selector "my-app" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "my-app" did not match any elements

Пробная ссылка это также, но не работает

Любая помощь будет оценена.

Answer 1

Что ж, я решил сам, просто выполнив некоторые настройки в main.ts и tsconfig.json

Шаг 1. Создайте свой модуль и объявите корневые компоненты, которые вы хотите загрузить при загрузке этого модуля.

отл.Здесь я создал user.module.ts

import { NgModule }      from '@angular/core';

// root component of usermodule
import { UserAppComponent }   from './userapp.component';

@NgModule({
  imports:[FormsModule,HttpModule],
  declarations:[UserAppComponent],
  providers:[],
  bootstrap:[UserAppComponent]
})
export class UserModule { }

Шаг 2. Перейдите на main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { UserModule } from './user.module';

window.platform = platformBrowserDynamic();
window.AppModule = AppModule;
window.UserModule = UserModule;

Шаг 3. Перейдите на tsconfig.json и вставьте только что созданный модуль и компонент.в "files" массиве

"files":[
    //....your other components ...//
    "myapp/user.module.ts",  
    "myapp/userapp.component.ts",           
  ]

Шаг 4: Теперь вы готовы к загрузке углового модуля в любом месте из вашего файла .js.Как будто я загрузился так из моего файла .js.Самозагрузка может отличаться в зависимости от ваших требований, но шаги с 1 по 3 должны быть такими же.

window.platform.bootstrapModule(window.UserModule);