2017-06-24 11 views
1

データベースにはURLが格納されています。このURLはモジュール 'dist'からモジュールをロードする必要があります。コンパイル済みAngularファイルをルーティングに動的にロードする方法は?

{ 
    "personal-area": "js/compile-module.js", 
    "product": "js/compile-module2.js" 
} 

応用例:次に

http://localhost:8282/#/personal-area 

怠惰なアプリケーション(非同期| |動的いずれも)からモジュールをロード:

http://localhost:8282/js/compile-module.js 

モジュールは、予めの段階でプリコンパイルされています彼らが参加していないメインアプリケーションを構築するので、私は角モジュールのソースへの道を持っていません。

ルーティング(app.routers.ts)のファイルでは、データベースから(URLに基​​づいて)サーバー上のモジュールファイルへのパスをプルするコンポーネントハンドラを保存します。メインハンドラで

export const ROUTES: Routes = [ 

    { 
     path: '**', 
     component: WorkspaceOutletComponent 
    }, 

]; 

そこにモジュールをロードしようとする方法があるが、私は理解していない理由のために、私は角度がワシや仕事のためにコンパイルされたモジュールを接続するようにする方法を知りません。

@Component({ ... }) 
export class WorkspaceOutletComponent { 

    constructor() { 
    } 

    ngOnInit() { 
     // detect routing and exec init 
    } 

    public init(workSpaceUrl: string, workSpacePathModule: string) { 
     console.log(`url: ${workSpaceUrl} path: ${workSpacePathModule}`); 

     this.router.resetConfig([ 
      { 
       path: workSpaceUrl, loadChildren: workSpacePathModule 
      } 
     ]); 

     this.router.navigate([workSpaceUrl]) 
      .then(() => console.log('Navigate to')) 
      .catch((e) => console.error('Error', e)); 
    } 

} 

アプリケーションはWebPACKの2を使用して構築されている。しかし、私は、ルーティングを交換する瞬間に、彼は私に間違いを書き込み、私もどこ動的にモジュールをロードするために掘ることを知らない(私が来るする必要がありますデータベースから)、私はアセンブリ中のモジュールへの参照を知らない、何も、私はソースコードを持っていないので、実行時に読み込むサードパーティのモジュールが必要です。私は間違って何をしていますか?

enter image description here

私はSystemJSを使用している場合。また、それは(ソースから)ディスクからモジュールを読み込もうとしません。ここで

this.router.resetConfig([ 
      { 
       path: workSpaceUrl, loadChildren: SystemJS.import(workSpacePathModule).then(function (m) { 
        console.log(m); 
       }) 
      } 
     ]); 

enter image description here

少しはモジュールのロードがどのように機能するかについて語られている: https://github.com/angular/angular-cli/issues/4234#issuecomment-275345763

は、私は彼がハッシュマップをコンパイルするように角度が正確な名前を必要としていることを正しく理解しています。それで、私はそれを渡すことができませんが、私はソースコードを持っていないので、ディスク上のパスの対応がわからないとどうしたらいいですか?

答えて

2

リセットルートの方法が有効かどうかはわかりませんが、使用するすべてのモジュールに遅延ルートを生成する必要があることはわかっています。

loadChildrenの値は、スタティックstringである必要があります。あなたはそれを得るためにそこに関数を呼び出すことはできませんstring。それでも、Webpackで動作するAngular CLIの魔法が混乱して、遅延経路が生成されます。

とにかくすべての遅延ルートのように生成してから、実行時に興味のあるものをロードしても問題ありません。resetConfigが設定全体をリセットする可能性があるので注意してください。

また、NgComponentOutletで使用できるモジュールファクトリのインスタンス(ブラウザまたはAoTのいずれかでモジュール化したモジュールからAngularが作成するもの)を得ることができるlinkNgModuleFactoryもあります。

+0

あなたのケースでは、「使用するすべてのモジュールに遅延ルートを生成する必要がある」とはどういう意味ですか? – splincode

+0

loadChildrenの静的な文字列ではなく、動的な文字列を実現できる例はありますか? – splincode

+0

データがデータベースから来た場合は、どのルートとモジュールをダウンロードできますか? – splincode

関連する問題