Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 RC4 to RC5 bootstrapping

Tags:

angular

I have the following main.ts file since Angular 2 RC4:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode,provide } from '@angular/core';
import {disableDeprecatedForms, provideForms} from '@angular/forms'; 
import {RequestOptions,HTTP_PROVIDERS} from '@angular/http';
import { AppComponent, environment } from './app/';
import { appRouterProviders } from './app/app.routes';
import {CustomRequestOptions} from "./app/custom-request-options";
import { Title } from '@angular/platform-browser';

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [
  appRouterProviders,
  disableDeprecatedForms(),
  provideForms(),
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: CustomRequestOptions}),
  Title
])
.catch(err => console.error(err));

Now.. I need to have it all as a module. so I created app.module.ts file

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

@NgModule({
    declarations: [AppComponent],
    imports:      [BrowserModule],
    bootstrap:    [AppComponent],
})
export class AppModule {}

How I can import all my providers and declrations from the following line:

bootstrap(AppComponent, [
  appRouterProviders,
  disableDeprecatedForms(),
  provideForms(),
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: CustomRequestOptions}),
  Title
])

to work in the module?

like image 462
TheUnreal Avatar asked Aug 12 '16 13:08

TheUnreal


1 Answers

With RC5, you need to bootstrap this way:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Just move your providers to the ones of the module (providers attribute):

@NgModule({
  (...)
  providers: [
    provide(RequestOptions, {useClass: CustomRequestOptions}),
    Title
  ]
})

For forms, HTTP,routing, simply include the corresponding modules from Angular2:

@NgModule({
  (...)
  imports: [
    BrowserModule, 
    RouterModule.forRoot(config), 
    FormsModule, 
    HttpModule, // provides HTTP_PROVIDERS
  ]
})

See the migration doc for more details:

  • https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
like image 176
Thierry Templier Avatar answered Nov 07 '22 04:11

Thierry Templier