如何有条件地引导角度的应用程序? [英] How to conditional bootstrap angular app?

问题描述

我正在尝试根据情况引导我的angular 5应用程序.基本上，我有两个模块 MobileModule 和 WebModule ，分别包含web和mobile的UI组件.

I am trying to bootstrap my angular 5 app based on conditions. Basically I have two modules MobileModule and WebModule which contains UI components of web and mobile separately.

如果用户已在移动浏览器中打开应用程序，否则我将尝试引导 MobileModule ，否则，将启动 WebModule .

I am trying to bootstrap MobileModule if user has opened the app in mobile browser otherwise WebModule.

这是我的 main.ts 来源.

import { enableProdMode }         from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { environment }    from './environments/environment';

import { AppSettings }    from './app/core/app-settings';
import { MobileModule }   from './app/mobile/mobile.module';
import { WebModule }      from './app/web/web.module';


if (environment.production) {
    enableProdMode();
}


/*
 * Bootstrap mobile or web module based on mobile
 * or desktop client.
 */
if (AppSettings.isMobileDevice) {

  platformBrowserDynamic().bootstrapModule(MobileModule)
      .catch(err => console.log(err));
} else {

  platformBrowserDynamic().bootstrapModule(WebModule)
      .catch(err => console.log(err));
}

web.module.ts

import { BrowserModule }  from '@angular/platform-browser';
import { NgModule }       from '@angular/core';

import { AppRoutingModule } from './app-routing/app-routing.module';
import { CoreModule }       from '../core/core.module';
import { SharedModule }     from '../shared/shared.module';
import { AuthModule }       from './auth/auth.module';

import { SignupComponent }  from './auth/signup/signup.component';


@NgModule({
  imports: [
    BrowserModule,        // Support for common angular directives and services
    AppRoutingModule,     // Web routing controller module.
    CoreModule,           // Core modules
    SharedModule,         // Shared modules
    AuthModule,           // App authentication module (signup and login)
  ],
  declarations: [],
  providers: [],
  bootstrap: [SignupComponent]    // Bootstrap Signup component
})
export class WebModule { }

mobile.module.ts

import { BrowserModule }  from '@angular/platform-browser';
import { NgModule }       from '@angular/core';

import { AppRoutingModule } from './app-routing/app-routing.module';
import { CoreModule }       from '../core/core.module';
import { SharedModule }     from '../shared/shared.module';
import { AuthModule }       from './auth/auth.module';

import { SignupComponent }  from './auth/signup/signup.component';


@NgModule({
  imports: [
    BrowserModule,        // Support for common angular directives and services
    AppRoutingModule,     // Mobile app routing controller module
    CoreModule,           // Core modules
    SharedModule,         // Shared modules
    AuthModule,           // App authentication module (signup and login)
  ],
  declarations: [],
  providers: [],
  bootstrap: [SignupComponent]    // Bootstrap Signup component
})
export class MobileModule { }

上面的方法在 ng serve 上工作正常，但是当我尝试使用 ng serve --aot 选项运行它时，它在chrome控制台中的抛出错误.

The above approach is working fine with ng serve but when I try to run it using ng serve --aot option its throwing error in chrome console.

Uncaught Error: No NgModule metadata found for 'WebModule'.  
    at NgModuleResolver.resolve (compiler.js:20242)  
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15195)  
    at JitCompiler._loadModules (compiler.js:34405)  
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)  
    at JitCompiler.compileModuleAsync (compiler.js:34260)  
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)  
    at PlatformRef.bootstrapModule (core.js:5567)  
    at eval (main.ts:26)  
    at Object../src/main.ts (main.bundle.js:53)  
    at __webpack_require__ (inline.bundle.js:55)  

我的项目结构是

|-node_modules
|-src
   |-app
      |-core
      |-mobile
         |-mobile.module.ts
      |-shared
      |-web
         |-web.module.ts

我尝试了几种方法来有条件地引导应用程序，但未成功.任何建议将不胜感激.

I tried several things to conditionally bootstrap the app but no success. Any suggestion will be appreciated.

推荐答案

经过大量研究，我发现我们一次只能引导一个模块.这意味着每个角度应用程序只有一个根模块.

After a lot research I found that we can only bootstrap single module at a time. Which means single root module per angular app.

但是，自模块的角度延迟加载以来，我们可以加载所有动态功能模块.因此，我们的想法是加载一个根模块，并根据条件可以动态加载任何子模块.

However, since the time of angular lazy loading of modules we can load all feature modules dynamically. Hence, the idea is to load one root module and based on conditions you can load any sub-module dynamically.

让我们考虑上面的例子.

Let's consider above example.

import { enableProdMode }         from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { environment }    from './environments/environment';
import { AppModule }      from './app/app.module';


if (environment.production) {
    enableProdMode();
}


/*
 * Bootstrap single root module
 */
platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.log(err));

app.module.ts

import { BrowserModule }  from '@angular/platform-browser';
import { NgModule }       from '@angular/core';
import { RouterModule, Routes }     from '@angular/router';

import { CoreModule }       from '../core/core.module';
import { SharedModule }     from '../shared/shared.module';

import { AppComponent }  from './app.component';


const isMobileDevice = true; // Mobile device condition    


const routes: Routes = [
  {
    path        : 'app',
    loadChildren: isMobileDevice ? './mobile/mobile.module#MobileModule' : './web/web.module#WebModule'    // Conditionally load mobile or web module
  }
];


@NgModule({
  imports: [
    BrowserModule,        // Support for common angular directives and services
    RouterModule.forRoot(routes),
    CoreModule,           // Core modules
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent]    // Bootstrap Signup component
})
export class AppModule { }

希望这对希望在其有角度的应用程序中实现这种行为的其他人有所帮助.

Hope this helps to some other folks who wanted such behaviour in their angular app.

这篇关于如何有条件地引导角度的应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！