CODEWITHSUNDEEP
angulartypescript
yozawiratama
yozawiratama

Reputation: 4328

Angular service error in injectable

I tried to follow angular tutorial, to make service in my project.

this is my auth service :

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {environment} from '../../environments/environment';

const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable({providedIn: 'root'})
export class AuthService {

    private authUrl = environment.apiUrl + 'auth/';

    constructor(private http: HttpClient) {
    }

    login(username, password) {
        return this.http.post(this.authUrl + 'login', {username: username, password: password}, httpOptions);
    }

}

and in app.module I add AuthService in providers.

In app.module also I import :

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

This is the error I got :

ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:20), <anonymous>:302:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:20), <anonymous>:302:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

I use a premium template that I bought from internet, its use lazy route.

Where I am wrong and how to solve this case? When I add new service I got same errors.

Upvotes: 1

Views: 78

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68685

If you have used providedIn: 'root' - you don't need to add it into the providers. Your service will be as a singleton for whole application. Remove service from the providers.

providedIn lets us to not add it into the providers. We can just specify to which module we want it to provide.

Upvotes: 2

Related Questions