Laravel Route + Angular 5

Question

私はLaravelとAngularの複雑なハイブリッドアプリケーションを構築しています。私はLaravelルート経由でAngular 5アプリケーションをブートストラップしようとしています。私は別々の角モジュールのために別々のブレードを作成したいので、Angularのルートを本当に使いたいとは思っていません。

次のシナリオが想定されているとします。私は2つの機能をしました：

1. は
2. クライアントのフィードバックを受け取るあなたの友人を参照してください

私はこれらの機能の両方のために別々の角度のモジュールと「ブレード・ビュー」を作成するために行くことになります。

• FeedbackComponent（feedback-app-feedback）を使用したFeedbackModule
• ReferFriendModule（app-selecto r）は今

、私は次のようまし要件：私は別のブレードにロードされた "APP-フィードバック" と "アプリ-参照してください" を持ちたい

• （二つの別々のブートストラップ）

• 私のJSに不要なコードが埋め込まれたくないFeedbackページにはReferralのページJSコードはありません（私はLazy LoadingをAngularで使うことができますが、角度の "loadChildren"を必要とします）（動的コンポーネントローダーを除く）回避する方法があれば教えてください

、私は参照して、フィードバックモジュールに対して個別のJSを得ることができるように

は現在、これを行うために、私は2回私の全体のコードをコンパイルする必要があります。これを達成するための任意の簡単な方法はありますか？

Answer 1

IこれはngOnBootstrap関数で行いました：

Laravelでは、私はweb.phpでルートを作成しました：

Route::get('/service-feedback/{code}', 'ServiceFeedbackController@show'); 
Route::get('/refer-a-friend/{client}', 'ReferController@show'); 

私は別のページに別々のビューを返さ内部コントローラのshowメソッド：ビューインサイド

return view('pages.service-feedback')->with($mydata); 
return view('pages.refer')->with($mydata); 

私は次のコードを書いた：

紹介：

を

@extends('layouts.eng-page') 
@section('content') 
    <section id="app-refer-advocate" class="main"></section> 
@endsection 

フィードバック：

@extends('layouts.eng-page') 
@section('content') 
    <section id="app-feedback" class="main"></section> 
@endsection 

section要素の "id"属性に注目してください。これは、コンポーネントのセレクタと一致させる必要があります。私は次のように書いた

インサイド角度のAppModule：

import { ReferModule } from './../../app/modules/refer/refer.module'; 
import { GlobalsModule } from './../../app/modules/globals/globals.module'; 
import { FeedbackFormComponent } from './../../app/modules/feedback/components/feedback-form/feedback-form.component'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FeedbackModule } from '../../app/modules/feedback/feedback.module'; 
import { Globals } from '../../app/modules/globals/services/globals.service'; 
import { ApplicationRef } from '@angular/core'; 
import { ReferAdvocateComponent } from './../../app/modules/refer/components/refer-advocate/refer-advocate.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FeedbackModule, 
    ReferModule, 
    GlobalsModule.forBrowser() 
    ], 
    entryComponents: [FeedbackFormComponent, ReferAdvocateComponent] 
}) 
export class AppModule { 

    constructor(private global: Globals) { } 

    /** 
    * Bootstraps Application based on laravel blade 
    * @param app 
    * @author Sahil Purav 
    */ 
    ngDoBootstrap(app: ApplicationRef) { 
    const components: Object = { 
     'app-feedback': FeedbackFormComponent, 
     'app-refer-advocate': ReferAdvocateComponent, 
    }; 
    const selector = this.global.nativeDocument.getElementsByClassName('main')[0].id; 
    const element = this.global.nativeDocument.createElement(selector); 
    this.global.nativeDocument.getElementsByClassName('main')[0].appendChild(element); 
    const component = components[selector]; 
    app.bootstrap(component); 
    } 
} 

コードの上には、メインセクション要素の「ID」をベースのアプリケーションをブートストラップします。誰かを助けることを願っています！