Angular2 处理公共和管理应用程序、一个应用程序或多个应用程序的最佳方式答案

【问题标题】：Angular2 best way to handle public and admin application, one app or multiple appsAngular2 处理公共和管理应用程序、一个应用程序或多个应用程序的最佳方式
【发布时间】：2016-10-19 08:39:18
【问题描述】：

我正在开发一个 Angular 应用程序，该应用程序有一个可供公众访问的前端和一个受保护的后端。该应用程序按预期工作但是我有一个关于如何为公共组件和管理组件使用单独资产的问题。

app.module.ts

@NgModule({
  imports: [
    BrowserModule
    ,AdminModule
    ,CMSModule
    ,routing
  ]
  ,declarations: [
    AppComponent
  ]
  ,bootstrap: [AppComponent]
  ,providers: [

  ]
})
export class AppModule { }

管理模块 - admin.component.ts 使用styleUrls 和encapsulation NONE 加载样式

CMSModule cms.component.ts 也使用与上述完全相同的过程加载它自己的样式。

我注意到的是 AdminModule 和 CMSModules 组件 css 都已加载，这是有道理的，因为我告诉 Angular 加载模块，这些模块都具有 encapsulation NONE 的组件加载样式

现在我的问题是，以 Angular 实际开发 CMS 和 Admin 应用程序的最佳方法是什么，是否应该将它们视为两个独立的应用程序，并配置基于 url 的 Web 服务器路由到已部署的应用程序，例如

http://.../admin 使用它自己的 index.html 以及配置和路由 e.t.c 加载管理应用程序

http://.../ 使用它自己的 index.html 以及配置和路由等加载 cms 应用程序或者使用一个应用程序和一些 angular/js 魔术很容易解决这个用例，以前有没有人这样做过，你是如何解决这样一个用例而不引起不必要的维护问题的。

【问题讨论】：

我在这里找到了帖子，我必须说这可能是解决这个问题的一个非常好的解决方案stackoverflow.com/questions/39278689/… 也许他们是使用 systemjs/webpack 等的另一种可能的解决方案。

标签： angular

【解决方案1】：

我最终创建了使用 jQuery 操作 head 标签的 Angular 服务，模块组件将负责执行此服务方法 addStyles，因此可以将样式直接注入到每个模块的 head 中。可能有更好的方法来做到这一点，但我对现在下面的实现感到满意。

import { Injectable } from '@angular/core';

declare var jQuery:any;

@Injectable()
export class DOMService{
  addStyles(styles:Array<string>):void{
    //remove all links from head that had been added by previous modules
    let head = jQuery("head");
    let styleElements = head.find( "[data-module-added]" );
    console.debug("current elements", styleElements)
    //add new styles passed to DOMService
    for( var i=0; i<styles.length; i++){
      let styleSheet =  styles[ i ];
      console.debug( "adding style %s", styleSheet );
      //FIXME: Maybe readfile contents and dump into head, might provide better functionality
      head.append("<link data-module-added rel='stylesheet' href='" + styleSheet + "'/>");
    }
  }
}

【讨论】：