ОШИБКА ReferenceError: конфигурация не определена Angular 7

Question

Я перепробовал все решения в стеке с похожим вопросом:

Ошибка возникает в этой точке:

 return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })

webpack.config.js

new webpack.DefinePlugin({
            // global app config object
            config: JSON.stringify({
                apiUrl: 'http://localhost:4000'
            })
        })

typings.d.ts

declare var config: any;

authentication.service.ts

login(username: string, password: string) {
    debugger;
    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;
        }));
}

Answer 1

Один из возможных способов - объявить ваш файл "apiUrl: 'http://localhost:4000'" внутри" environment.ts "следующим образом:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:4000'
};

Файл находится в вашем проекте:" src / Environment/environment.ts ". Существует также версия prod.

Доступ к значению в вашем коде выглядит следующим образом:

import { environment } from '../environments/environment';

Затем в вашем классе (app.component.ts):

  constructor() {
    console.log('config.apiUrl', environment.apiUrl);
  }

Answer 2

Нет связи между config реквизитом, который вы используете в конфигурации webpack, и между тем, который вы используете в http-клиенте.

Вы можете сохранить конфигурацию как внешнюю константу для передаваемого вами объектав веб-пакет.Примерно так:

    export const config = JSON.stringify({
        apiUrl: 'http://localhost:4000'
    })

    new webpack.DefinePlugin({
        config, // this is same as `config: config,`
    })

и тогда к вашим услугам вы будете

import { config } from 'path/to/webpack/config/file';

... your stuff here ...

return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })