7
votes

Non capturé (en promesse): Erreur: StaticInjectorError [Service]

Je suis nouveau à angulaire. J'ai créé une application WebApplication en utilisant VS2015 et les derniers packages angulaires. Lorsque j'essaie d'appeler mon service à partir de la composante sur le bouton Cliquez sur l'événement, je reçois ci-dessous une erreur dans la fenêtre de la console de navigateur.

Erreur: - P>

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~5.0.3",
    "@angular/compiler": "~5.0.3",
    "@angular/core": "~5.0.3",
    "@angular/forms": "~5.0.3",
    "@angular/http": "~5.0.3",
    "@angular/platform-browser": "~5.0.3",
    "@angular/platform-browser-dynamic": "~5.0.3",
    "@angular/router": "~5.0.3",
    "angular-in-memory-web-api": "~0.5.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "ngx-modialog": "^5.0.0",
    "rxjs": "5.5.2",
    "systemjs": "0.20.19",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.6.1",
    "canonical-path": "0.0.2",
    "tslint": "^5.8.0",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.8.0",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.2.0",
    "rimraf": "^2.5.4",
    "@types/node": "^8.0.53",
    "@types/jasmine": "2.8.2"
  },
  "repository": {}
}

typescript angular asp.net angular5 visual-studio-2015

5 commentaires

Essayez d'importer la vueCountService dans ExportTopDF.component.ts Composante

@rohankangale, je l'ai déjà fait. Mais ça ne marche pas.

Veuillez l'ajouter en tant que fournisseur dans le composant. Ce n'est pas ajouté.

@rohankangale, merci après avoir ajouté un fournisseur, il fonctionne maintenant. Mais maintenant je suis coincé avec une autre erreur "TypeError: this.http.get (...). La carte n'est pas une fonction" Avez-vous une idée à ce sujet?

Essayez d'utiliser .Chen (), au lieu de .map ().

5 Réponses :

9
votes

Regardez vos représentants

app.module.ts strong> p> xxx pré>

exporttopdf.component.ts strong> xxx pré>

puisque SystemJs code> est sensible à la casse (voir L'instance de service n'est pas disponible pour les composants enfants en Angular2 ) p>

On dirait que vous importateur. modules p> xxx pré>

alors choisissez une seule option pour importer votre service p>

APP.MODULE.TS FORT> P>

import { ViewCountService } from '../Service/viewsCount.component';
                                             ^
                                         instead of V

0 commentaires

0
votes

Cela ne semble pas encore être résolu: https://github.com/angular/angulaire/issues/20339

En tant que travail autour, essayez de faire tous vos fonctions code> constructeur code> sans paramètres en extrayant les propriétés en tant que propriétés. P>

exportTOPDFComponent: p>

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class ViewCountService {
    private http: Http;
    constructor() {
    }

    getViewCount() {
        return this.http.get('api/Tableau/GetViewsCount')
            .map(response => response.json() as string).toPromise();
    }

    getDataObservable(url: string) {
        return this.http.get('api/Tableau/GetViewsCount')
            .map(data => {
                data.json();
                console.log("I CAN SEE DATA HERE: ", data.json());
            });
    }

}

0 commentaires

6
votes

Si vous utilisez Angular 4.3+ jusqu'à 5, vous devez importer httpClient dans votre application.Module à partir de la nouvelle bibliothèque xxx pré>

dans votre service: p>

 getViewCount(): void {
    this.ViewCountService.getViewCount()
        .subscribe(
           data =>{console.log(data);//your data},
           err=>{console.log(err);},
           () => {console.log("Done loading");}
);
}

0 commentaires

0
votes

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        routing
    ],
add this into your  app.module.ts file

1 commentaires

Bienvenue sur Stackoverflow. S'il vous plaît prendre du temps pour lire comment écrire une bonne réponse. Lire Ce et Ceci

1
votes

Je faisais face au même problème que j'ai ajouté ci-dessous ligne dans App.Module et cela a fonctionné pour moi. XXX PRE>

et ajoutez-le au P>

@NgModule({ imports: [ ...,   HttpClientModule,... ]

0 commentaires