Question

我在.NET核心项目中有一个Angular 5应用程序，供多个客户使用。所有这些都需要不同的功能和不同的外观。我已经尝试过很少的事情来帮助这个。首先，我让每个公司都有自己的页面和自己的模块的文件夹结构。然后我可以在共享模块中的每个页面上选择共享组件。我仍然会使用AppModule作为根模块和带有条件主标记的App组件来正确加载站点。 scss / Sass / css将在＆＃34; master＆＃34;中定义。每个品牌的页面。

例如...等......

所有这些都正常工作，除了css仍然是从没有加载的品牌中加载的＃34;所以，他们正在编译，虽然他们永远不会被使用。

所以我去了另一个解决方案......跳过AppModule作为根模块并引导选定的品牌模块（并将其用作根模块）代替..希望这可以解决问题。因此，在这个有效的例子中，但是当我将条件添加到bootstrap brand2时（尽管品牌在环境中是品牌1），scss得到编译，我再次在第1方。非常感谢帮助。

import 'zone.js';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Brand1Module } from "./brand/brand1.module";
import { environment } from "./environments/environment";
import { Brand2Module } from "./brand/brand2.module";

if (environment.production == true)
    enableProdMode(); // FOR PRODUCTION

if (environment.brand === "brand1")
{
    platformBrowserDynamic().bootstrapModule(Brand1Module);
}

else if (environment.brand === "brand2") {
// If I leave this part below out, the CSS won't be compiled
    platformBrowserDynamic().bootstrapModule(Brand2Module);
}

Answer 1

我在这里回答了类似的问题：https://stackoverflow.com/a/50090362/2406724

总结：

Angular 5不支持多个根模块，因为AOT的方式（提前编译）目前有效。它似乎只是编译第一个模块及其依赖项。

在您的方案中，您可以使用根模块进行自举和使用Router with Guard延迟加载品牌模块。

品牌模块仍将在捆绑中一起编译，但仅在请求时加载。

参考文献：

相关问题：https://github.com/angular/angular-cli/issues/4624
延迟加载模块：https://angular.io/guide/lazy-loading-ngmodules

如何在Angular（5）中有条件地引导模块？品牌

1 个答案: