Angular 2.0RC5 compatibility

[jaroslawziolkowski]

Does is required some update to working with RC5? I've been tried more to ngModules ToastyService and ToastyConfig but it doesn't works.

"ngModule is null"
Error getTranstiveModule...

[akserg]

Hi @jaroslawziolkowski Code snippet, please.

[jaroslawziolkowski]

@akserg

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, FORM_PROVIDERS,ReactiveFormsModule } from "@angular/forms";
import { ModalModule } from "angular2-modal/index";
import { BootstrapModalModule } from "angular2-modal/plugins/bootstrap/bootstrap.module";
import { APP_ROUTER_PROVIDERS } from "./app.routes";
import { AppComponent } from "../component/app";

import { RouterModule } from "@angular/router";
import { ToastyService, ToastOptions, Toasty, ToastyConfig, ToastData} from "ng2-toasty/ng2-toasty";

@NgModule({
    imports: [APP_ROUTER_PROVIDERS, BrowserModule, ModalModule.forRoot(),
    BootstrapModalModule, FormsModule, RouterModule],
    declarations: [ AppComponent],
    providers: [FORM_PROVIDERS, ToastyService],
    bootstrap: [ AppComponent ]
})
export class AppModule{}

import { ToastData, ToastOptions, Toasty, ToastyService, ToastyConfig } from "ng2-toasty/ng2-toasty";

...

@Component({
    selector: 'caa-project-headers-list-invoice',
    directives: [DND_DIRECTIVES,Toasty],
    viewProviders: [],
    providers:[ProjectService],
    pipes: [],
    template: `<ng2-toasty></ng2-toasty>`
})

export class CaaProjectHeadersListInvoice{
    protected routeParams: any;

    constructor(protected toastyService: ToastyService, private modal: Modal, viewContainer: ViewContainerRef, private projectService: ProjectService
    , protected route: ActivatedRoute
    ){

    }

showToast(message: string, type: string, time?: number):void{
        if(time == undefined){
            time = 10000;
        }else{
            time = time*1000;
        }
        var options: ToastOptions = {
            title: "Heading",
            msg: message,
            showClose: true,
            timeout: time,
            theme: "material"
        }

        if(type == 'info'){
            this.toastyService.info(options);
        }else if(type == 'success'){
            this.toastyService.success(options);
        }else if(type == 'error'){
            this.toastyService.error(options);
        }

    }

[martinnormark]

I'm seeing this error: Error: Can't resolve all parameters for ToastyService: (?).(…).

My AppModule looks like this, which is enough to trigger the error:

"use strict";

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

import { ToastyService, ToastyConfig, Toasty, ToastOptions, ToastData } from 'ng2-toasty/ng2-toasty';

import { SharedModule }   from './shared/shared.module';
import { TabManagerService } from './workspace/_services/TabManagerService';

let conf = <ToastyConfig> {
    theme: "bootstrap"
};

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        SharedModule.forRoot()
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        TabManagerService,
        { provide: ToastyConfig, useValue: conf },
        ToastyService
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

[akserg]

Changes in version 1.10:

• The component name Toasty renamed into ToastyComponent
• The import changed from ng2-toasty/ng2-toasty into simple ng2-toasty

Don't forget to include the proper style file. Look at README.

You shall register UI components into your application component like that:

import {Component} from '@angular/core';
import {ToastyConfig, ToastyComponent} from 'ng2-toasty';

@Component({
    selector: 'app',
    directives: [ToastyComponent],
    providers: [ToastyService, ToastyConfig],
    template: `
        <div>Hello world</div>
        <ng2-toasty></ng2-toasty>
    `
})
export class AppComponent {

    constructor(private toastyConfig: ToastyConfig) {
        // Assign the selected theme name to the `theme` property of the instance of ToastyConfig. 
        // Possible values: default, bootstrap, material
        this.toastyConfig.theme = 'material';
     }
}

[akserg]

Please use 2.0.0 release to confirm that issue is gone.