Angular - ERROR ReferenceError: конфигурация не определена

Question

Я следую учебному пособию по аутентификации и авторизации Angular 7 от здесь.

Я добавил все необходимые файлы, и при работе с ng нет ошибок.Учебник также требует добавления

declare var config: any;

в файл typings.d.ts.По умолчанию в моем каталоге src не было файла typings.d.ts, поэтому я вручную создал typings.d.ts и добавил туда необходимое объявление.Config используется в 2 сервисах соответственно

В Authentication.service.ts

login(username: string, password: string) {
        return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    this.currentUserSubject.next(user);
                }

                return user;
            }));

и в user.service.ts

 getAll() {
        return this.http.get<User[]>(`${config.apiUrl}/users`);
    }

    getById(id: number) {
        return this.http.get<User>(`${config.apiUrl}/users/${id}`);
    }

После добавления объявления вВ файле typings.d.ts ошибка компилятора исчезает, но когда я запускаю приложение и пытаюсь войти в систему, я получаю следующую ошибку на консоли:

ОШИБКА ReferenceError: config не определена

Подробный журнал:

ERROR ReferenceError: config is not defined
    at AuthenticationService.push../src/app/auth/_services/authentication.service.ts.AuthenticationService.login (authentication.service.ts:23)
    at LoginComponent.push../src/app/login/login.component.ts.LoginComponent.onSubmit (login.component.ts:51)
    at Object.eval [as handleEvent] (LoginComponent.html:6)
    at handleEvent (core.js:10251)
    at callWithDebugContext (core.js:11344)
    at Object.debugHandleEvent [as handleEvent] (core.js:11047)
    at dispatchEvent (core.js:7710)
    at core.js:9190
    at SafeSubscriber.schedulerFn [as _next] (core.js:3563)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195)

Я пробовал подобные вопросы, но они не указывают никакой помощи.Будем весьма благодарны за любые предложения по исправлению или обходу конфигурации в этом отношении.Спасибо.

Весь код для authentication.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { User } from '../_models';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
    private currentUserSubject: BehaviorSubject<User>;
    public currentUser: Observable<User>;

    constructor(private http: HttpClient) {
        this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
        this.currentUser = this.currentUserSubject.asObservable();
    }

    public get currentUserValue(): User {
        return this.currentUserSubject.value;
    }

    login(username: string, password: string) {
        return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    this.currentUserSubject.next(user);
                }

                return user;
            }));
    }

    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);
    }
}

Весь код для users.service.ts

import { AuthenticationService } from './authentication.service';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../_models';

@Injectable({ providedIn: 'root' })
export class UserService {
    constructor(private http: HttpClient) { }

    getAll() {
        return this.http.get<User[]>(`${config.apiUrl}/users`);
    }

    getById(id: number) {
        return this.http.get<User>(`${config.apiUrl}/users/${id}`);
    }
}

Answer 1

Извините, почему не используйте другой способ .. как это:

поместите ваш config.apiUrl в constant or BETTER in your enviroment.ts file .. чтобы вы могли change the api url for different enviroment as you need ..

что-тонапример:

environment / environment.ts

export const environment = {

  apiUrl: 'http://localhost:3000/api/',

     // <-- HERE PUT OTHER CONFIG THAT CAN CHANGE FROM EENVIROMENT 
};

, затем импортируйте его в свой файл ts (например, в службу или в любое другое место) .. например:

import { AuthenticationService } from './authentication.service';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../_models';
import { environment } from '../environment/environment';


@Injectable({ providedIn: 'root' })
export class UserService {
    constructor(private http: HttpClient) { }

    getAll() {
        return this.http.get<User[]>(`${environment.apiUrl}/users`);
    }

    getById(id: number) {
        return this.http.get<User>(`${environment.apiUrl}/users/${id}`);
    }
}

Надеюсь, это поможет вам ...

Если вам все еще нужна конфиг-константа ... создайте ее так же, как это делает окружающая среда