Я унаследовал приложение и работаю над его миграцией на поддерживаемую версию. Все началось с Angular 5. Я двигался шаг за шагом, устраняя проблемы и следя за тем, чтобы приложение все еще работало, и добился успеха с Angular 5 по 12. Теперь я столкнулся с проблемой при переходе с Angular 12.0.5 на 13.0.4, которую не знаю, как решить. Я собираю приложение с помощью 'ng build', затем запускаю его. Мне предлагается ввести имя пользователя и пароль, что, по-видимому, является аутентификацией, но затем возникает ошибка "Невозможно задать состояние свойства [object XMLHttpRequest], которое имеет только геттер".
С помощью отладчика JavaScript WebStorm я нашел, где, по моему мнению, возникает проблема в классе Homeguard:
auth-guard.services.ts
Ошибка возникает в "this.authService.user.isLoaded$.then(() => {".
Я прошел по этапам сборки Angular 12 и 13. В сборке 13 this.authservice.user отображается как "undefined", хотя он отображается как объект в тесте "if" в предыдущей строке. В сборке 12 "this.authservice.user" отображается как объект в обеих строках. Я не понимаю, почему есть это разница.
Angular 12 package.json:
Angular 13 package.json:
tsconfig.json для 12 и 13:
Angular 12 "ng version":
Angular 13 "ng version":
Буду признателен за любую помощь. Это мой первый раз, когда я публикую вопрос, поэтому, пожалуйста, дайте мне знать, какая еще информация будет полезна.
import {Injectable} from '@angular/core';
import {CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import {AuthService} from "./auth.service";
import {Observable} from "rxjs";
import "rxjs/add/observable/of";
import "rxjs/add/operator/delay";
import "rxjs/add/operator/do";
import {globals} from "./globals";
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {
}
...
}
@Injectable()
export class HomeGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return new Promise((resolve, reject) => {
if (this.authService.user && globals.accessToken) {
this.authService.user.isLoaded$.then(() => {
if (this.authService.user.hasRole('researcher')) {
this.router.navigate(['/researcher/requests']);
resolve(false);
} else if (this.authService.user.hasRole('employee')) {
this.router.navigate(['/orders/manage']);
resolve(false);
} else {
this.router.navigate(['/pages/login']);
resolve(false);
}
})
} else {
this.router.navigate(['/pages/login']);
resolve(false);
}
});
}
}
{
"name": "coreui-angular",
"version": "1.0.0-alpha.6",
"description": "Open Source Bootstrap Admin Template",
"author": "",
"url": "http://coreui.io",
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/schematics": "12.0.5",
"@angular/animations": "12.0.5",
"@angular/common": "12.0.5",
"@angular/compiler": "12.0.5",
"@angular/core": "12.0.5",
"@angular/forms": "12.0.5",
"@angular/platform-browser": "12.0.5",
"@angular/platform-browser-dynamic": "12.0.5",
"@angular/platform-server": "12.0.5",
"@angular/router": "12.0.5",
"@angular/upgrade": "12.0.5",
"ampersand": "^3.0.6",
"ampersand-rest-collection": "^6.0.0",
"angular2-ladda": "3.2.0",
"angular2-text-mask": "^9.0.0",
"async": "^2.6.0",
"browserslist": "^4.23.3",
"chart.js": "2.6.0",
"core-js": "2.5.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"ngx-bootstrap": "^6.0.0",
"ngx-markdown": "12.1.0",
"q": "^1.5.0",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"ts-helpers": "1.1.2",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.0.5",
"@angular/cli": "^12.0.5",
"@angular/compiler-cli": "12.0.5",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ladda": "2.0.1",
"protractor": "~7.0.0",
"sass": "1.33.0",
"ts-node": "3.3.0",
"tslint": "~6.1.0",
"typescript": "^4.2.4"
},
"engines": {
"node": ">= 6.9.0",
"npm": ">= 3.0.0"
}
}
{
"name": "coreui-angular",
"version": "1.0.0-alpha.6",
"description": "Open Source Bootstrap Admin Template",
"author": "",
"url": "http://coreui.io",
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/schematics": "^13.0.4",
"@angular/animations": "13.0.3",
"@angular/common": "13.0.3",
"@angular/compiler": "13.0.3",
"@angular/core": "13.0.3",
"@angular/forms": "13.0.3",
"@angular/platform-browser": "13.0.3",
"@angular/platform-browser-dynamic": "13.0.3",
"@angular/platform-server": "13.0.3",
"@angular/router": "13.0.3",
"@angular/upgrade": "13.0.3",
"ampersand": "^3.0.6",
"ampersand-rest-collection": "^6.0.0",
"angular2-ladda": "^3.2.2",
"angular2-text-mask": "^9.0.0",
"async": "^2.6.0",
"browserslist": "^4.23.3",
"chart.js": "2.6.0",
"core-js": "2.5.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"ngx-bootstrap": "^6.0.0",
"ngx-markdown": "^13.1.0",
"q": "^1.5.0",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"ts-helpers": "1.1.2",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.4",
"@angular/cli": "^13.0.4",
"@angular/compiler-cli": "13.0.3",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ladda": "^2.0.1",
"protractor": "~7.0.0",
"sass": "^1.33.0",
"ts-node": "3.3.0",
"tslint": "~6.1.0",
"typescript": "~4.4.3"
},
"engines": {
"node": ">= 6.9.0",
"npm": ">= 3.0.0"
}
}
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
],
"module": "es2020",
}
}
Angular CLI: 12.2.18
Node: 16.20.2 (Unsupported)
Package Manager: npm 8.19.4
OS: win32 x64
Angular: 12.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, upgrade
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1200.5
@angular-devkit/build-angular 12.0.5
@angular-devkit/core 12.0.5
@angular-devkit/schematics 12.0.5
@angular/cli 12.2.18
@schematics/angular 12.2.18
rxjs 6.6.7
typescript 4.2.4
Angular CLI: 13.3.11
Node: 16.20.2
Package Manager: npm 8.19.4
OS: win32 x64
Angular: 13.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, upgrade
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1300.4
@angular-devkit/build-angular 13.0.4
@angular-devkit/core 13.0.4
@angular-devkit/schematics 13.3.11
@angular/cli 13.3.11
@schematics/angular 13.3.11
rxjs 6.6.7
typescript 4.4.4
Прокофий
Вопрос задан15 марта 2024 г.