title: How to conditional bootstrap angular app?
body: <p>I am trying to bootstrap my angular 5 app based on conditions. Basically I have two modules <code>MobileModule</code> and <code>WebModule</code> which contains UI components of web and mobile separately.</p>
  
  <p>I am trying to bootstrap <code>MobileModule</code> if user has opened the app in mobile browser otherwise <code>WebModule</code>.</p>
  
  <p>Here is my <code>main.ts</code> source.  </p>
  
  <pre><code>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 =&gt; console.log(err));
  } else {
  
    platformBrowserDynamic().bootstrapModule(WebModule)
        .catch(err =&gt; console.log(err));
  }
  </code></pre>
  
  <p><code>web.module.ts</code></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><code>mobile.module.ts</code></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>The above approach is working fine with <code>ng serve</code> but when I try to run it using <code>ng serve --aot</code> option its throwing error in chrome console.</p>
  
  <pre><code>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)  
  </code></pre>
  
  <p>My project structure is </p>
  
  <pre><code>|-node_modules
  |-src
     |-app
        |-core
        |-mobile
           |-mobile.module.ts
        |-shared
        |-web
           |-web.module.ts
  </code></pre>
  
  <p>I tried several things to conditionally bootstrap the app but no success. Any suggestion will be appreciated. </p>