आरसी 5 अपग्रेड

Question

के बाद ngModule पर सर्वर पैरामीटर पास करना मैं अपने आवेदन में पैरामीटर पास करने के लिए फिर कोशिश कर रहा हूं। आरसी 5 के बाद से, मुझे ngModule का उपयोग करना होगा। (यह समाधान: Passing asp.net server parameters to Angular 2 app अब आरसी 5 के बाद से काम नहीं करता है)

ngModule पर पैरामीटर कैसे पास करें? Plunker

index.html:

<script> 
    System.import('app').then(module => module.main('This is RIGHT'), 
       console.error.bind(console) 
      ); 
</script> 

main.ts:

यहाँ समस्या को वर्णन करने के लिए एक plunker है

import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; 
import { provide } from '@angular/core'; 
import { AppModule } from './app.module'; 

export function main(test: string) { 

    browserDynamicPlatform().bootstrapModule(AppModule, [{ providers: provide('Test', { useValue: test, }) }]); 
} 

app.module.ts

import { NgModule, provide }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent }  from './app.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    AppComponent 
    ], 
    providers: [ 
    provide('Test', { useValue: 'This is WRONG' }) 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
} 

Answer 1

अद्यतन 2

Webpack कार्यान्वयन आप यहां पा सकते हैं Passing server parameters to ngModule with Angular 2 and webpack

---

Systemjs

अद्यतन 1:

हम browserDynamicPlatform समारोह के extraProviders संपत्ति में डेटा पास कर सकते हैं:

main.ts

export function main(test: string) { 
    browserDynamicPlatform([{provide: 'Test', useValue: test }]) 
    .bootstrapModule(AppModule); 
} 

इस तरह app.module.ts में createAppModule समारोह अनावश्यक है।

Plunker 2.0 Final

---

पिछला संस्करण

RC.5 के लिए आप इस तरह app.module.ts में एक विधि (यानी createAppModule) जोड़ सकते हैं:

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 

export function createAppModule(test) { 
    @NgModule({ 
    imports: [BrowserModule], 
    providers: [ 
     { provide: 'Test', useValue: test }, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
    }) 
    class AppModule { } 

    return AppModule; 
} 

इस तरह अपने मुख्य मॉड्यूल इस तरह होगा:

main.ts

import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; 

import { createAppModule } from './app.module'; 

export function main(test: string) { 
    browserDynamicPlatform().bootstrapModule(createAppModule(test)); 
} 

और अपने प्रारंभिक बिंदु ही रहता है:

सूचकांक।एचटीएमएल

<script> 
    System.import('app') 
    .then(module => module.main('This is RIGHT'), 
     console.error.bind(console) 
    ); 
</script> 

यहाँ है Plunker Example

Answer 2

कृपया चारों ओर नीचे काम है कि angular2 में काम करता है का उल्लेख 2.0.1

Loading server side settings before loading components

गार्ड एक CanActivate वर्ग एक का उपयोग कर के साथ अपने मार्ग विन्यास सेटिंग्स को लोड करने वाला वादा भी काम करना चाहिए।

सिर्फ एक वादा

getAppSettings(): Promise<any> { 
     var observable = this.http.get(this.ApiUrl, { headers: this.headers }) 
      .map((response: Response) => { 
       var res = response.json(); 
       return res; 
      }); 

     observable.subscribe(config => { 
     this.config= config; 
     console.log(this.config) 
     }); 
     return observable.toPromise(); 
    } 

लौटने एक और नीचे के रूप में CanActivate गार्ड की तरह एक समारोह के साथ appSettings.service का उपयोग करें:

import { Injectable } from '@angular/core'; 
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { AppSettingsService } from './appsettings.service'; 

@Injectable() 
export class CanActivateViaAuthGuard implements CanActivate { 

//router: Router 
    constructor(private appSettingsService: AppSettingsService) 
    { 
    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
       return this.appSettingsService.getAppSettings().then(() => { 
    return true }); 
    } 
} 

यह है कि अपनी सेटिंग्स उपलब्ध जब सुनिश्चित करेंगे संबंधित घटकों का निर्माण किया जाता है। (APP_INITIALIZER का उपयोग करने वाले निर्माता को प्रतिबंधित नहीं किया गया था, इसलिए मुझे इस तकनीक का उपयोग करना पड़ा, कृपया यह भी सुनिश्चित करें कि आप निर्यात में सभी घटकों को निर्यात नहीं करते हैं: [] मॉड्यूल में)

मार्गों की रक्षा करने के लिए और सुनिश्चित सेटिंग्स लोड किए गए हैं कंस्ट्रक्टर्स कहा जाता है से पहले, मार्ग परिभाषा

path: 'abc', 
component: AbcComponent, 
canActivate: [CanActivateViaAuthGuard] 

appSettings AbcComponent के लिए निर्माता से पहले होना चाहिए की आरंभीकरण कहा जाता है के लिए रास्ते में हमेशा की तरह canActivate विकल्प का उपयोग करें, इस परीक्षण किया है और में काम करता है कोणीय 2.0.1