Angular 4 - 带动态模块的引导程序根组件

Question

如何在页面加载中使用动态NgModule引导组件？

背景：我在一个应用程序中有一个由“website.url”或像test.website.url这样的子域调用的页面。当一个子域被调用时，我想根据它自己的NgModule（LpModule）显示一个登陆页。默认模块是AppModule。

我试图存档，在main.ts类似以下内容：

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

import {AppModule} from './app/app.module'; 
import {environment} from './environments/environment'; 
import {LandingpageModule} from "./app-lp/components/landingpage.module"; 

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

const hostname = window.location.hostname; 
const secondLevelDomain = hostname.split('.').reverse()[1]; 

// let module = AppModule; 
// if(secondLevelDomain && secondLevelDomain !== 'www') { 
//  module = LandingpageModule; 
// } 

let module = loadModuleByDomain(); 

platformBrowserDynamic().bootstrapModule(module); 

function loadModuleByDomain() { 
    const hostname = window.location.hostname; 
    const secondLevelDomain = hostname.split('.').reverse()[1]; 

    if(secondLevelDomain && secondLevelDomain !== 'www') { 
     return LandingpageModule; 
    } else { 
     return AppModule; 
    } 
} 

它的工作原理时，“NG服务”是听，但是当我重新启动纳克服务有以下错误：

Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options. Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.

at Object.resolveEntryModuleFromMain (C:\xampp\htdocs\projekte\ontavio\talentstorm\client\node_modules\@ngtools\webpack\src\entry_resolver.js:128:11) 
at AotPlugin._setupOptions (C:\xampp\htdocs\projekte\ontavio\talentstorm\client\node_modules\@ngtools\webpack\src\plugin.js:142:50) 
at new AotPlugin (C:\xampp\htdocs\projekte\ontavio\talentstorm\client\node_modules\@ngtools\webpack\src\plugin.js:26:14) 
at _createAotPlugin (C:\xampp\htdocs\projekte\ontavio\talentstorm\client\node_modules\@angular\cli\models\webpack-configs\typescript.js:55:12) 
at Object.exports.getNonAotConfig (C:\xampp\htdocs\projekte\ontavio\talentstorm\client\node_modules\@angular\cli\models\webpack-configs\typescript.js:70:19) 
at NgCliWebpackConfig.buildConfig (C:\xampp\htdocs\projekte\ontavio\talentstorm\client\node_modules\@angular\cli\models\webpack-config.js:27:37) 
at Class.run (C:\xampp\htdocs\projekte\ontavio\talentstorm\client\node_modules\@angular\cli\tasks\serve.js:37:98) 
at check_port_1.checkPort.then.port (C:\xampp\htdocs\projekte\ontavio\talentstorm\client\node_modules\@angular\cli\commands\serve.js:103:26) 
at <anonymous> 
at process._tickCallback (internal/process/next_tick.js:169:7) 

我该怎么办？

Answer 1

经过漫长的，漫长的寻找我今天发现了一个solutiton：

https://github.com/angular/angular-cli/issues/2887#issuecomment-281168941

我创建了一个额外的TS文件（主lp.ts），并添加以下代码：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {LandingpageModule} from "./app-lp/components/landingpage.module"; 

export function bootstrapLandingpageModule() { 
    platformBrowserDynamic().bootstrapModule(LandingpageModule); 
} 

在main.ts我用下面的代码和它的作品：

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

import {environment} from './environments/environment'; 
import {AppModule} from './app/app.module'; 
import {bootstrapLandingpageModule} from "./main-lp"; 

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

if(!isSubDomain()) { 
    platformBrowserDynamic().bootstrapModule(AppModule); 
} else { 
    bootstrapLandingpageModule(); 
} 

function isSubDomain() { 
    const hostname = window.location.hostname; 
    const secondLevelDomain = hostname.split('.').reverse()[1]; 

    return !!(secondLevelDomain && secondLevelDomain !== 'www'); 
}