angular - 在 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 serve 正在监听时有效，但当我重新启动 ng serve 时，我收到以下错误:

Tried to find bootstrap code, but could not. Specify either staticallyanalyzable bootstrap code or pass in an entryModule to the pluginsoptions. Error: Tried to find bootstrap code, but could not. Specifyeither statically analyzable bootstrap code or pass in an entryModuleto 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

经过长时间的搜索，我今天找到了解决方案:

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

我创建了一个额外的 .ts 文件 (main-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');
}