Angular 4 – 带动态模块的Bootstrap根组件

发布时间：2020-12-17 10:24:29 所属栏目：安全来源：网络整理

导读：如何在页面加载时使用动态NgModule引导组件？背景：我在一个应用程序中有一个名为“website.url”的页面或一个名为test.website.url的子域名.当调用子域时,我想基于它自己的NgModule(LpModule)显示登陆页面.默认模块是AppModule. 我试图在main.ts中存档,如

如何在页面加载时使用动态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”正在收听时有效,但是当我重新启动服务时,会出现以下错误：

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.

06001

我能做什么？

经过长时间的长时间搜索,我今天找到了一个解决方案：

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');
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!