错误参考错误：未定义配置

Question

我正在构建一个带有登录和注册页面的基本应用程序（在 Angular 6 中）。我遵循了我在网上找到的登录/注册教程，但由于某种原因，当我尝试登录时，我得到了

错误参考错误：未定义配置。

据我所知，我认为身份验证服务存在错误，因此会弄乱登录组件。我只是不确定为什么身份验证服务会给我带来问题。

请参阅下面的身份验证服务中的代码。

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

 @Injectable()
 export class AuthenticationService {
   constructor(private http: HttpClient) { }

   login(username: string, password: string) {
     return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { 
     username: username, password: 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));
    }

    return user;
    }));
  }

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

package.json

 {
      "name": "angular-login-and-registration",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "^6.0.3",
        "@angular/common": "^6.0.3",
        "@angular/compiler": "^6.0.3",
        "@angular/core": "^6.0.3",
        "@angular/forms": "^6.0.3",
        "@angular/http": "^6.0.3",
        "@angular/platform-browser": "^6.0.3",
        "@angular/platform-browser-dynamic": "^6.0.3",
        "@angular/router": "^6.0.3",
        "core-js": "^2.5.4",
        "rxjs": "^6.0.0",
        "zone.js": "^0.8.26"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.6.6",
        "@angular/cli": "~6.0.7",
        "@angular/compiler-cli": "^6.0.3",
        "@angular/language-service": "^6.0.3",
        "@types/jasmine": "~2.8.6",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.2.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.0",
        "karma-jasmine": "~1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.3.0",
        "ts-node": "~5.0.1",
        "tslint": "~5.9.1",
        "typescript": "~2.7.2",
        "webpack": "^4.15.1",
        "webpack-cli": "^3.0.8"
      },
      "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.7.",
      "main": "index.js",
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader', 'angular2-template-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.(html|css)$/,
        loader: 'raw-loader'
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body'
    }),
    new webpack.DefinePlugin({
      // global app config object
      config: JSON.stringify({
        apiUrl: 'http://localhost:4000'
      })
    })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    runtimeChunk: true
  },
  devServer: {
    historyApiFallback: true
  }
};

请参阅下面的错误图像。

Answer 1

我在完全相同的教程中遇到了完全相同的错误。

正如 OP 所指出的，问题在于 TS (AuthorizationService.ts) 正在读取 Webpack 变量 (config) 以将成员变量 (apiUrl) 传递给 HTTP“POST”：

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

如果这是“严重”的事情，我会利用 Angular 环境文件：

• Becoming an Angular Environmentalist

因为它只是一个教程（一个非常GOOD的教程，尽管有这个小问题），我只是删除了“${config.apiUrl}”......一切都“正常工作”。

仅供参考...

Answer 2

尝试编辑您的 package.json 的脚本部分

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development --open"
  "ng": "ng",
  "e2e": "ng e2e"
  "lint": "ng lint",
  "test": "ng test",
},

然后运行npm run build，然后运行npm start（或Unix 中的npm run build && npm start）

Answer 3

您引用的教程 (https://jasonwatmore.com/post/2018/05/16/angular-6-user-registration-and-login-example-tutorial) 使用 Angular + Webpack，而您的项目看起来使用 Angular CLI。

要将 Webpack 版本迁移到 Angular CLI 项目，您可以：

1. 将 webpack 配置变量复制到环境配置中
2. 在服务中将“config.apiUrl”替换为“environment.apiUrl”

我在https://jasonwatmore.com/post/2019/06/13/angular-7-tutorial-part-7-migrating-to-an-angular-cli-project#update-app-config发布了完整的说明，包括一个显示步骤的视频

注意：删除对 ${config.apiUrl} 的引用也将修复错误，但这将删除在一个地方配置 apiUrl 的能力。