title: ERROR ReferenceError: config is not defined
body: <p>I am building a basic app with a login and registration page (in Angular 6). I followed a login/registration tutorial I found online, but for some reason when I attempt to login, I get</p>
  
  <blockquote>
    <p>ERROR ReferenceError: config is not defined. </p>
  </blockquote>
  
  <p>As far as I can see, I believe there is an error with the authentication service which is, therefore, messing up the login component. I'm just not sure why the authentication service is giving me an issue.</p>
  
  <p>See the code in the authentication service below.</p>
  
  <pre><code>   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&lt;any&gt;(`${config.apiUrl}/users/authenticate`, { 
       username: username, password: password })
         .pipe(map(user =&gt; {
      // login successful if there's a jwt token in the response
      if (user &amp;&amp; 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');
     }
   }
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code> {
        "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"
      }
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>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
    }
  };
  </code></pre>
  
  <p>See the image of the error below.
  <img src="https://i.stack.imgur.com/roPV0.png" alt="enter image description here"></p>