I have an Angular project that works with MVC WEB API. This error is coming since the moment I added AuthService.
X [ERROR] Could not resolve "rxjs/Observable" [plugin angular-rxjs-resolution]
node_modules/@angular/http/@angular/http.js:7:27:
7 │ import { Observable } from 'rxjs/Observable';
╵ ~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/Observable" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
X [ERROR] Could not resolve "rxjs/Observable" [plugin angular-rxjs-resolution]
node_modules/angular2-jwt/angular2-jwt.js:21:27:
21 │ var Observable_1 = require("rxjs/Observable");
╵ ~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/Observable" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
X [ERROR] Could not resolve "rxjs/add/observable/fromPromise" [plugin angular-rxjs-resolution]
node_modules/angular2-jwt/angular2-jwt.js:22:8:
22 │ require("rxjs/add/observable/fromPromise");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/add/observable/fromPromise" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
X [ERROR] Could not resolve "rxjs/add/observable/defer" [plugin angular-rxjs-resolution]
node_modules/angular2-jwt/angular2-jwt.js:23:8:
23 │ require("rxjs/add/observable/defer");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/add/observable/defer" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to
handle this failure at run-time instead of bundle-time.
X [ERROR] Could not resolve "rxjs/add/operator/mergeMap" [plugin angular-rxjs-resolution]
node_modules/angular2-jwt/angular2-jwt.js:24:8:
24 │ require("rxjs/add/operator/mergeMap");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/add/operator/mergeMap" as external to exclude it
from the bundle, which will remove this error and leave the unresolved path in
the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
Application bundle generation failed. [0.242 seconds]
X [ERROR] Could not resolve "rxjs/Observable" [plugin angular-rxjs-resolution]
node_modules/@angular/http/@angular/http.js:7:27:
7 │ import { Observable } from 'rxjs/Observable';
╵ ~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/Observable" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
X [ERROR] Could not resolve "rxjs/Observable" [plugin angular-rxjs-resolution]
node_modules/angular2-jwt/angular2-jwt.js:21:27:
21 │ var Observable_1 = require("rxjs/Observable");
╵ ~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/Observable" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
X [ERROR] Could not resolve "rxjs/add/observable/fromPromise" [plugin angular-rxjs-resolution]
node_modules/angular2-jwt/angular2-jwt.js:22:8:
22 │ require("rxjs/add/observable/fromPromise");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/add/observable/fromPromise" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
X [ERROR] Could not resolve "rxjs/add/observable/defer" [plugin angular-rxjs-resolution]
node_modules/angular2-jwt/angular2-jwt.js:23:8:
23 │ require("rxjs/add/observable/defer");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/add/observable/defer" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to
handle this failure at run-time instead of bundle-time.
X [ERROR] Could not resolve "rxjs/add/operator/mergeMap" [plugin angular-rxjs-resolution]
node_modules/angular2-jwt/angular2-jwt.js:24:8:
24 │ require("rxjs/add/operator/mergeMap");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "rxjs/add/operator/mergeMap" as external to exclude it
from the bundle, which will remove this error and leave the unresolved path in
the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
My authService:
import { Injectable } from '@angular/core';
import { LoginUser } from '../models/loginUser';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { JwtHelper, tokenNotExpired } from 'angular2-jwt';
import { Router } from '@angular/router';
import { AlertifyService } from './alertify.service';
import { RegisterUser } from '../models/registerUser';
@Injectable({
providedIn: 'root',
})
export class AuthService {
constructor(
private httpClient: HttpClient,
private router: Router,
private alertifyService: AlertifyService
) {}
path = 'http://localhost:4200/api/auth/';
userToken: any;
decodedToken: any;
jwtHelper: JwtHelper = new JwtHelper();
TOKEN_KEY = 'token';
login(loginUser: LoginUser) {
let headers = new HttpHeaders();
headers = headers.append('Content-Type', 'application/json');
this.httpClient
.post(this.path + 'login', loginUser, { headers: headers })
.subscribe((data) => {
this.saveToken(data);
this.userToken = data;
this.decodedToken = this.jwtHelper.decodeToken(data.toString());
this.alertifyService.success('Sisteme giriş yapıldı');
this.router.navigateByUrl('/city');
});
}
register(registerUser: RegisterUser) {
let headers = new HttpHeaders();
headers = headers.append('Content-Type', 'application/json');
this.httpClient
.post(this.path + 'register', registerUser, {
headers: headers,
})
.subscribe((data) => {});
}
saveToken(token) {
localStorage.setItem(this.TOKEN_KEY, token);
}
logOut() {
localStorage.removeItem(this.TOKEN_KEY);
}
loggedIn() {
return tokenNotExpired(this.TOKEN_KEY);
}
getCurrentUserId() {
return this.jwtHelper.decodeToken(localStorage.getItem(this.TOKEN_KEY))
.nameid;
}
}
I just tried using it on my navbar.
my nav.component.ts:
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
constructor(private authService:AuthService) { }
loginUser:any={}
ngOnInit() {
}
login(){
this.authService.login(this.loginUser);
}
logOut(){
this.authService.logOut()
}
isAuthenticated(){
return this.authService.loggedIn();
}
}
I don’t understand why I’m getting an Observable error even though I don’t use Get. I’m new to Angular.
package.json :
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/platform-server": "^17.3.0",
"@angular/router": "^17.3.0",
"@angular/ssr": "^17.3.5",
"alertifyjs": "^1.14.0",
"angular2-jwt": "^0.2.3",
"bootstrap": "^5.3.3",
"bootswatch": "^5.3.3",
"express": "^4.18.2",
"font-awesome": "^4.7.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.5",
"@angular/cli": "^17.3.5",
"@angular/compiler-cli": "^17.3.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
}