angular - 错误参考错误:未定义配置
问题描述
我正在构建一个带有登录和注册页面的基本应用程序(在 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');
}
}
包.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
}
};
请参阅下面的错误图像。
解决方案
我在完全相同的教程中遇到了完全相同的错误。
正如 OP 所指出的,问题在于 TS (AuthorizationService.ts) 正在读取 Webpack 变量 (config) 以将成员变量 (apiUrl) 传递给 HTTP“POST”:
return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })
如果这是“严重”的事情,我会利用 Angular 环境文件:
由于它只是一个教程(一个非常好的教程,尽管有这个小问题),我只是删除了“${config.apiUrl}”......一切都“正常工作”。
供参考...
推荐阅读
- python - 使用 base 2 python 将十六进制转换为十六进制
- ionic-framework - Ionic API 请求未完成 - 保持待处理状态
- c# - 如何使用已经在 FlowLayoutPanel 内的面板内的控件?
- mysql - 更改订阅 bbpress 论坛的每个 wordpress 用户的电子邮件
- sql - 计算两个日期之间的天数,不包括周末
- swift - 在核心数据中存储经常更改的图像数组的最有效方法
- c - C套接字 - 客户端在服务器端关闭文件描述符后继续读取
- typescript - Typescript 通用接口参数赋值
- html - 渐变在 Microsoft Edge 中未正确显示
- c# - C# 提取/解压缩 .EXE 文件