错误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

在Webpack的配置上使用的config道具与在http客户端中使用的道具之间没有链接。

您可以将配置存储为传递给webpack的对象的外部常量。像这样：

    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 })

Answer 2

一种可能的方法是在“ environment.ts”文件中声明您的“ apiUrl：'http://localhost:4000'”，如下所示：

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

文件位于您的项目下：“ src / environments / environment.ts”。也有产品版本。

像这样访问代码中的值：

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

然后在您的课程中（app.component.ts）：

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