Angular2公開アプリケーションと管理アプリケーション、1つのアプリまたは複数のアプリケーションを処理する最良の方法

Question

保護されている公開とバックエンドによってアクセス可能なフロントエンドを持つ角度アプリケーションに取り組んでいます。アプリケーションは正常に動作しますが、パブリックコンポーネントと管理コンポーネントに別々のアセットを使用する方法に関する問題があります。

app.module.ts

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

    ] 
}) 
export class AppModule { } 

AdminModule - styleUrlsを使用してadmin.component.ts負荷のスタイルとencapsulation NONE

CMSModule cms.component.tsも、それは自分だロードスタイルは上記と全く同じプロセスを使用します。私はAdminModuleとCMSModules両方のコンポーネントのCSSがロードされていることである両者が今私が持っている疑問、何をencapsulation NONE

とコンポーネントのロードスタイルを持っているモジュールをロードするために、角言っていますので、これは理にかなって気づいた何

CMSとAdminアプリケーションを実際に開発する最善の方法は、URLに基​​づいてデプロイされたアプリケーションへのWebサーバールーティング上の構成を持つ2つの別個のアプリケーションとして扱われるべきです。

http://.../admin負荷それ自身のindex.htmlと構成およびルートと、それ自身のindex.htmlと構成及び経路等

http://.../ロードCMSアプリケーションと管理アプリケーションなど または容易に1つのアプリを使用して解かこのユースケースであるといくつかの角度/ jsの魔法は、誰もが前にこれをやったことがあり、どのように不要なメンテナンスの問題を引き起こすことなくそのようなユースケースを解決しました。

Answer 1

jQueryを使ってheadタグを操作する角度サービスを作成しました。このサービスメソッドaddStylesを実行するのはモジュールコンポーネントであり、スタイルはモジュールごとに直接挿入できます。おそらくこれを行うより良い方法は、今のところ以下の実装に満足しています。

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