Cách tải các mô-đun có điều kiện trong Angular 2

Question

Mã dưới đây có thể tải một dịch vụ giả dựa trên các biến môi trường Angular-cli khác nhau. Tuy nhiên, nó có một tác dụng phụ là các dịch vụ giả lập được tích hợp vào các tệp đầu ra được chuyển mã và rút gọn cuối cùng.

Có cách nào tốt hơn để hoàn thành mô-đun tải chậm trong angular2 không?

app.module.ts:

import {BrowserModule} from "@angular/platform-browser"; 
import {NgModule} from "@angular/core"; 
import {FormsModule} from "@angular/forms"; 
import {HttpModule} from "@angular/http"; 
import {AppComponent} from "./app.component"; 
import {environment} from "../environments/environment"; 
import {XService} from "./xxx.service"; 
import {XMockService} from "./xxx-mock.service"; 

let importedModules: Array<any> = [ 
    XService 
]; 

if (environment.mock) { 
    importedModules.push(
    {provide: XService, useClass: XMockService} 
); 
} else { 
    importedModules.push(
    XService 
); 
} 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: importedModules, 
    bootstrap: [AppComponent] 
}) 

export class AppModule {} 

Answer 1

Bạn có thể thử một cái gì đó tương tự như sau.

main.ts

platformBrowserDynamic().bootstrapModule(RootModule); 

root.module.ts

@NgModule({ 
    imports: [ 
    LandingModule, 
    UserModule 
    ], 
    entryComponents: [PageComponent, UserComponent], 
}) 
export class RootModule { 

    constructor(private router: Router .....) { 
    } 

    ngDoBootstrap(ref: ApplicationRef) { 
    const isUserPageRequested = this.shouldGoToUser(); 
    if (isUserPageRequested) { 
     this.router.resetConfig(userRoutes); 
     ref.bootstrap(UserComponent); 
    } else { 
     ref.bootstrap(PageComponent); 
    } 
    } 
} 

PageComponent được khai báo trong LandingModule và UserComponent được khai báo trong UserModule. Bằng cách này, có thể tải module theo điều kiện trong khi nó hoạt động khi được biên dịch với aot.