J'essaie d'utiliser ng2-toastr dans mon application angular 2. J'ai suivi toutes les instructions mais le toastr ne s'affiche pas sans aucune erreur de console. J'ai également lu quelque part que ng-toastr ne fonctionne plus avec angular 2 mais je n'ai trouvé aucune documentation valide à ce sujet. J'ai recherché des questions similaires mais je n'ai trouvé aucune réponse appropriée à mon problème. Toute aide serait appréciée.

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 { RouterModule } from '@angular/router';
import{ ToastModule} from 'ng2-toastr/ng2-toastr';
import { BrowserAnimationsModule} from '@angular/platform-
browser/animations';
import "hammerjs"

import { CoreModule } from './core/core.module';

import { MODULE_ROUTES, MODULE_COMPONENTS } from './app.router'

@NgModule({
  declarations: [
    MODULE_COMPONENTS
],
imports: [
   BrowserModule,
   FormsModule,
   HttpModule,
   RouterModule.forRoot(MODULE_ROUTES),
   BrowserAnimationsModule,
   CoreModule,
   ToastModule.forRoot()
],
providers: [ ],
bootstrap: [MODULE_COMPONENTS]
})
export class AppModule { }

app.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';

@Component({
  selector: 'wow-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor( public toastr: ToastsManager, private vRef: ViewContainerRef) 
  {
    this.toastr.setRootViewContainerRef(vRef);
    console.log(this.toastr);
  }

}

Voici comment j'appelle la méthode toastr dans l'un de mes composants:

 login() {
   this.user_service.login(this.user).then((response) => {
     console.log(response)
     this.toastrManager.success('Successfully Logged in.')
   }

package.json

"dependencies": {
"@angular/animations": "^4.1.3",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular2-image-upload": "^0.6.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"ng2-toastr": "^4.1.2",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
  "@angular/cli": "1.0.3",
  "@angular/compiler-cli": "^4.0.0",
  "@types/jasmine": "2.5.38" 
}

J'ai également ajouté "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css" dans mon angular-cli.json. il s'agit de console.log

2
waleed ali 9 août 2017 à 10:54

2 réponses

Meilleure réponse

[ MISE À JOUR ]

J'ai finalement réussi à résoudre le problème, pensé à le partager avec tous ceux qui sont coincés dans le même problème. Veuillez changer le code suivant

import { ToastsManager } from 'ng2-toastr/ng2-toastr';

À

import { ToastsManager } from 'ng2-toastr';

Depuis, le ToastsManager est exporté depuis le répertoire parent et non depuis le sous-répertoire (au moins, dans les versions des dépendances que j'utilise).

4
waleed ali 9 août 2017 à 12:16

Dans votre fichier angular-cli.json, ajoutez cette ligne dans une propriété styles

../node_modules/ng2-toastr/bundles/ng2-toastr.min.css
5
Anshuman Singh 10 nov. 2017 à 06:41