Impossible d'injecter un fournisseur dans plus d'une page ionique 3

Question

J'ai un proivder nommé MapProvider

import { Injectable} from '@angular/core'; 
 
import { Http } from '@angular/http'; 
 
//import 'rxjs/add/operator/map'; 
 
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker, CameraPosition, PolylineOptions, ILatLng, Polyline } from "@ionic-native/google-maps"; 
 
import { Platform, AlertController } from "ionic-angular"; 
 
import { Storage } from '@ionic/storage'; 
 

 
import { MarkerProvider } from "../map/marker"; 
 
import { UserLocationProvider } from "../user/user-location"; 
 
import { Geoposition } from "@ionic-native/geolocation"; 
 
import { UserDataProvider } from "../user/user-data"; 
 
import { PolylineProvider } from "../map/polyline"; 
 

 
/* 
 
    Generated class for the MapProvider provider. 
 

 
    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
 
    for more info on providers and Angular DI. 
 
*/ 
 

 
declare var google; 
 

 
@Injectable() 
 
export class MapProvider { 
 

 
    currentLocationMarker: Marker; 
 
    currentOrders; 
 

 
    constructor(private googleMaps: GoogleMaps, 
 
       public http: Http, 
 
       private markerProvider: MarkerProvider, 
 
       private userLocationProvider: UserLocationProvider, 
 
       private userData: UserDataProvider, 
 
       private polylineProvider: PolylineProvider, 
 
       private storage: Storage, 
 
       private alertCtrl: AlertController) {} 
 

 
    convert(data){ 
 
    return data.map(order=>({ 
 
     id : order.id, 
 
     pick : new LatLng(order.pick_lat,order.pick_lng), 
 
     pick_time : order.pick_ex_time, 
 
     drop : new LatLng(order.drop_lat,order.drop_lng), 
 
     drop_time : order.drop_ex_time 
 
    })) 
 
    } 
 

 
    loadMap(navCtrl){ 
 

 
    // create a new map by passing HTMLElement 
 
    let element: HTMLElement = document.getElementById('map'); 
 

 
    let map: GoogleMap = this.googleMaps.create(element); 
 

 
    // listen to MAP_READY event 
 
    // You must wait for this event to fire before adding something to the map or modifying it in anyway 
 
    map.one(GoogleMapsEvent.MAP_READY).then(() => { 
 

 
     this.getCurrentLocation(map,navCtrl) 
 
     .then((userLocationMarker: Marker)=>{ 
 
      this.currentLocationMarker=userLocationMarker; 
 
      console.log(userLocationMarker); 
 

 
     
 
      // Watch User's Current Location 
 
      // Don't forget to unsubscibe this to avoid memory leak 
 
      let userWatchLocation=this.userLocationProvider.watchCurrentLocation(); 
 
      let watchhOptions = { 
 
      enableHighAccuracy: true, 
 
      timeout: 10000, 
 
      maximumAge: 0 
 
      }; 
 
      userWatchLocation.subscribe((position: Geoposition)=>{ 
 
      let userCurrentLatLng: LatLng = new LatLng(position.coords.latitude,position.coords.longitude); 
 
      // Show Marker 
 
      this.markerProvider.addMarker(map,userCurrentLatLng,'Your Current Location','user') 
 
       .then((marker: Marker)=>{ 
 
       this.currentLocationMarker.remove(); 
 
       this.currentLocationMarker=marker; 
 

 
       //this.changeDetectorRef.detectChanges(); 
 
       }); 
 

 
      // console.log("Befor addAllMarker"); 
 
      // console.log(this.currentOrders); 
 
      },error=>console.warn('ERROR(' + error.code + '): ' + error.message), 
 
     ()=>watchhOptions); 
 
     }); 
 
     
 
    }); 
 
    } 
 

 
    getCurrentLocation(map,navCtrl){ 
 
    return new Promise(resolve=>{ 
 
     // Get user's current location and set map's position 
 
     let userCurrentLocation=this.userLocationProvider.getCurrentLocation(); 
 
     userCurrentLocation.then((position: Geoposition)=>{ 
 
     let userCurrentLatLng: LatLng = new LatLng(position.coords.latitude,position.coords.longitude); 
 

 
     // Show Marker 
 
     this.markerProvider.addMarker(map,userCurrentLatLng,'Your Current Location','user') 
 
      .then((marker: Marker)=>{ 
 
      this.currentLocationMarker=marker; 
 
      resolve(this.currentLocationMarker); 
 

 
      // Fetch user session data 
 
      this.storage.get('session').then((val) => { 
 
       // After fetching user's location show all orders points 
 
       let orderArray; 
 
       this.userData.getCurrentOrders(val.id).then(data=>{ 
 
       orderArray=this.convert(data['deliveryOrders']); 
 

 
       // Alert user with number of delivery orders assigned to them 
 
       this.showAlert(orderArray.length,map); 
 
       //alert("You have "+orderArray.length+" Delivery Orders"); 
 

 
       this.currentOrders=orderArray; 
 
       data['deliveryOrders'].map(order=>{ 
 
        // Draw route between pick up and drop points of an order 
 
        this.polylineProvider.drawRoute(map,order.pick_lat,order.pick_lng,order.drop_lat,order.drop_lng,this.polylineProvider); 
 
       }); 
 
       // Show current location marker and order location 
 
       this.markerProvider.addAllMarkers(map,this.currentOrders,navCtrl); 
 
       }); 
 
      }); 
 
      }); 
 
     
 

 
     // create CameraPosition 
 
     let mapPosition: CameraPosition = { 
 
      target: userCurrentLatLng, 
 
      zoom: 25, 
 
      tilt: 30 
 
     }; 
 

 
     // move the map's camera to position 
 
     map.moveCamera(mapPosition); 
 
     }); 
 
    }); 
 
    } 
 

 
    public showAlert(number,map): void { 
 
    // Disable the map 
 
    map.setClickable(false); 
 
    let alert = this.alertCtrl.create({ 
 
     title: 'You have '+number +' Delivery Orders', 
 
     subTitle: '', 
 
     buttons: [ 
 
      { 
 
       text: 'Dismiss', 
 
       role: 'cancel', 
 
       handler:() => { 
 
        // Enable the map again 
 
        map.setClickable(true); 
 
       } 
 
      } 
 
     ] 
 
    }); 
 
    // Show the alert 
 
    alert.present(); 
 
    } 
 
}

J'injecté ce fournisseur dans mon HomePage comme suivre

import { Component, ViewChild, ElementRef } from '@angular/core'; 
 
import { NavController, Platform, AlertController } from 'ionic-angular'; 
 
import { Geolocation } from '@ionic-native/geolocation'; 
 

 
import { GoogleMap, GoogleMapsEvent, LatLng, GoogleMaps, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps'; 
 
import { MapProvider } from "../../providers/map/map"; 
 
import { SignaturePage } from "../signature/signature"; 
 

 
//declare var google; 
 
//declare var service; 
 

 
@Component({ 
 
    selector: 'page-home', 
 
    templateUrl: 'home.html' 
 
}) 
 
export class HomePage { 
 
    //map: GoogleMap; 
 
    
 
    constructor(private mapProvider: MapProvider,public navCtrl: NavController, 
 
    public platform: Platform, private alertCtrl: AlertController) { 
 
    platform.ready().then(() => { 
 
     //const mapElement=document.getElementById('map'); 
 
     //this.mapProvider.loadMap(this.navCtrl); 
 
    }); 
 
    
 
    } 
 

 
    ngOnInit(){ 
 
    this.mapProvider.loadMap(this.navCtrl); 
 
    } 
 

 
    openPad(){ 
 
    this.navCtrl.push(SignaturePage); 
 
    } 
 
}

Mais quand j'injecte ce fournisseur dans « OrderDropDetailsPage` comme suit j'obtiens une erreur

import { Component, ChangeDetectorRef } from '@angular/core'; 
 
import { NavController, NavParams, AlertController } from 'ionic-angular'; 
 
import { OrderDataProvider } from "../../providers/order/order-data"; 
 
import { ItemListPage } from "../item-list/item-list"; 
 
import { MapProvider } from "../../providers/map/map"; 
 

 
/** 
 
* Generated class for the OrderDropDetailsPage page. 
 
* 
 
* See http://ionicframework.com/docs/components/#navigation for more info 
 
* on Ionic pages and navigation. 
 
*/ 
 

 
@Component({ 
 
    selector: 'page-order-drop-details', 
 
    templateUrl: 'order-drop-details.html', 
 
}) 
 
export class OrderDropDetailsPage { 
 

 
    order_id; 
 
    order_personal_data: any={}; 
 
    
 

 
    constructor(private mapProvider: MapProvider,public navCtrl: NavController, 
 
    public navParams: NavParams, 
 
    private orderDataProvider: OrderDataProvider, 
 
    private changeDetectorRef: ChangeDetectorRef, 
 
    private alertCtrl: AlertController) { 
 

 
    this.order_id=navParams.get("order_id"); 
 

 
    // Get details of customer and display 
 
    this.orderDataProvider.getDropPersonalDetails(this.order_id) 
 
     .then(data=>{ 
 
     console.log(data); 
 
     this.order_personal_data=data; 
 
     // To display new changes call detectChanges() 
 
     this.changeDetectorRef.detectChanges(); 
 
     console.log(this.order_personal_data); 
 
     }); 
 
    } 
 

 
    // Show ordered items list in another page 
 
    showItems(){ 
 
    this.navCtrl.push(ItemListPage,{order_id : this.order_id}); 
 
    } 
 

 
    // Item is dropped - update order status and save time 
 
    dropped(){ 
 
    // Confirm user action to change status 
 
    let alert = this.alertCtrl.create({ 
 
     title: 'Confirm Your Action', 
 
     message: 'Your about to change the status of this order to DROPPED. Do you wish to proceed?', 
 
     buttons: [ 
 
     { 
 
      text: 'Cancel', 
 
      role: 'cancel', 
 
      handler:() => { 
 
      console.log('Cancel clicked'); 
 
      } 
 
     }, 
 
     { 
 
      text: 'Update Status', 
 
      handler:() => { 
 
      this.orderDataProvider.updateOrderStatus(this.order_id,"DROPPED") 
 
       .then(data=>{ 
 
       
 
       // Update delivery status to DROPPED in detail page 
 
       this.order_personal_data.delivery_status='DROPPED'; 
 
       
 
       // To display new changes call detectChanges() 
 
       this.changeDetectorRef.detectChanges(); 
 
       
 
       console.log('Dropped'); 
 
       }); 
 
      } 
 
     } 
 
     ] 
 
    }); 
 
    alert.present(); 
 
    } 
 

 
    ionViewDidLoad() { 
 
    console.log('ionViewDidLoad OrderDropDetailsPage'); 
 
    } 
 

 
}

erreur est le suivant

Uncaught Error: Can't resolve all parameters for OrderDropDetailsPage: (?, [object Object], [object Object], [object Object], [object Object], [object Object]). 
at syntaxError (http://localhost:8100/build/vendor.js:98171:34) 
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/vendor.js:111508:35) 
at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/vendor.js:111376:26) 
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:8100/build/vendor.js:110985:24) 
at CompileMetadataResolver._getEntryComponentMetadata (http://localhost:8100/build/vendor.js:111629:45) 
at http://localhost:8100/build/vendor.js:111201:55 
at Array.map (native) 
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:111201:18) 
at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:122261:66) 
at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:122220:52) 

Je ne sais pas pourquoi je suis Impossible d'injecter ce fournisseur dans plus d'une page. S'il vous plaît aider

Answer 1

Cela se produit généralement lorsque vous avez des dépendances circulaires entre les fournisseurs. Pour plus de détails, voir this

Pour résoudre ce problème, vous pouvez le faire en suivant OrderDropDetailsPage construtor:

import { forwardRef } from '@angular/core'; 

constructor(@Inject(forwardRef(() => MapProvider)) private mapProvider, public navCtrl: NavController, 
    public navParams: NavParams, 
    private orderDataProvider: OrderDataProvider, 
    private changeDetectorRef: ChangeDetectorRef, 
    private alertCtrl: AlertController)