Passing server parameters to ngModule after RC5 upgrade

Update 2

Webpack implementation you can find here
Passing server parameters to ngModule with Angular 2 and webpack


Systemjs

Update 1:

We can pass data in the extraProviders property of browserDynamicPlatform function:

main.ts

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

This way the createAppModule function in app.module.ts is redundant.

Plunker 2.0 Final


Previous version

For RC.5 you can add a method (i.e. createAppModule) in app.module.ts like this:

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;
}

This way your main module would be like this:

main.ts

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

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

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

And your starting point remains the same:

index.html

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

Here is Plunker Example

Leave a Comment