Angular 角度错误TS2304:找不到名称'；配置'；

根据我找到的教程，在Angular中重建演示登录和注册页面应用程序。现在得到这个

ERROR in src/app/_services/authentication.service.ts(10,35): error TS2304: Cannot find name 'config'

搜索类似的问题和问题。第一个链接解决了webpack的问题，但已经过时，第二个链接完全无关。我已经在tsconfig.app.json和tsconfig.spec.json中添加了“webpack env”，我还更新了webpack和webpack cli

请参阅下面受影响的代码： 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
  }
};

authentication.service.ts

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

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

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

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

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

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

  register(user: User) {
    return this.http.post(`${config.apiUrl}/users/register`, user);
  }

  update(user: User) {
    return this.http.put(`${config.apiUrl}/users/` + user.id, user);
  }

  delete(id: number) {
    return this.http.delete(`${config.apiUrl}/users/` + id);
  }
}

tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": [
      "jasmine",
      "node",
      "webpack-env"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

看

Path:/src/typings.d.ts

自定义类型文件用于声明在angular应用程序之外创建的类型，因此TypeScript编译器可以识别这些类型，并且不会向您提供有关未知类型的错误。此typings文件包含webpack创建的全局配置对象的声明（请参见下面的webpack.config.js）

---

哇！我已经为此工作了好几天，我完全错过了。谢谢。现在我看到了它，如何通过Angular CLI添加它？显然，我可以简单地复制他的示例中的文件，但这对我将来的项目没有帮助？@BrandonBrawley-这是一个打字文件，您可以复制粘贴它，因为它不是一个真正的角度结构，您需要使用cli添加。我要问的是，如何添加typings.d.ts文件？创建文件后，我意识到我必须复制/粘贴。我一直在网上四处寻找，但这似乎并不直观。由于Angular cli，touch命令不起作用。@BrandonBrawley我不知道您的操作系统是什么，但请务必在正确的目录中手动创建文件。Angular将在传输时间自动拾取它。我找到了。再次感谢。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": [
      "jasmine",
      "node",
      "webpack-env"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

// so the typescript compiler doesn't complain about the global config object
declare var config: any;