错误ReferenceError:未定义配置 [英] ERROR ReferenceError: config is not defined
问题描述
我正在构建一个带有登录和注册页面的基本应用程序(在Angular 6中).我遵循了我在网上找到的登录/注册教程，但是由于某种原因，当我尝试登录时，我得到了
ERROR ReferenceError:未定义配置.
据我所知，我认为身份验证服务存在错误，因此导致登录组件混乱.我只是不确定为什么身份验证服务会给我一个问题.
请参阅下面的身份验证服务中的代码.
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
}
};
请参见下面的错误图片.
我在完全相同的教程中遇到了完全相同的错误.
正如OP所指出的那样，问题在于TS(AuthorizationService.ts)正在读取Webpack变量(配置)以将成员变量(apiUrl)传递给HTTP"POST":
return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })
如果这是严重"的事情，我将利用Angular环境文件:
由于这只是一个教程(尽管有一点点打cc，但它是一个很好的 GOOD 教程)，所以我只是删除了"$ {config.apiUrl}"……而所有内容都正常"./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
ERROR ReferenceError: config is not defined.
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.
See the code in the authentication service below.
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
}
};
See the image of the error below.
I encountered exactly the same error on exactly the same tutorial.
As the OP noted, the problem was that the TS (AuthorizationService.ts) was reading a Webpack variable (config) to pass a member variable (apiUrl) to an HTTP "POST":
return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })
If this were anything "serious", I would leverage the Angular environment files:
Since it was only a tutorial (a very GOOD tutorial, despite this little hiccough),I simply deleted "${config.apiUrl}" ... and everything "just worked".
FYI...
这篇关于错误ReferenceError:未定义配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
