[英]Bootstrap multiple root component in Angular 4
我们有一个JQuery应用程序,需要在Angular 4中实现一些模块。为此,我们需要手动引导Angular应用程序。 但是现在情况是我们创建了多个角度组件,并且当我们引导AppComponent时它们都已加载,这使应用程序加载缓慢。
因此,我想引导多个根组件(即AppComponent,App1Component),以便将基于它相应地使用子组件。
所以下面是我的实现不起作用。
主要
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
尝试也引用此 ,但不起作用
任何帮助,将不胜感激。
好吧,我已经通过在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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.