Angular crashes with url parameters code and state-CodePudding

I am making an Angular website and when the following parameters are placed in the url strange things happen. Cases:

?code=sommeText -> nothin happens
?state=sommeText -> nothin happens
?session_state=sommeText -> nothin happens
?code=sommeText&state=someText -> menu-bar disapears
?code=sommeText&state=someText&randomParam=RansomText -> menu-bar disapears
?code=sommeText&session_state=someText -> nothin happens
?state=sommeText&session_state=someText -> nothin happens
?code=sommeText&session_state=someText&randomParam=RansomText -> nothin happens
?code=sommeText&state=someText&session_state=someText -> menu-bar disapears

The navigation bar disapears the only thing it contains is my name and a logout button. I use microsoft and OAuth to login (this is how my name gets filled in) I also get 400's back from Microsoft, this is how the url gets filled in.

The url of my application is "localhost:{port}/item"
There is no point in the application I accept url parameters.

I am not looking for a solution but for an explenaition why it happens only with those 2 parameters, is it a known problem or bug?

If I need to place code: just ask. I do not know wicht files to add here (I wont post my full project).

package.json

{
  "name": "dds-fe",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular-builders/jest": "~13.0.0",
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^14.1.2",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/localize": "^14.1.2",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@ngrx/effects": "^14.1.0",
    "@ngrx/router-store": "^14.1.0",
    "@ngrx/store": "^14.1.0",
    "@ngrx/store-devtools": "^14.1.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "ajv": "^8.11.0",
    "angular-oauth2-oidc": "^13.0.1",
    "jwt-decode": "^3.1.2",
    "ngx-extended-pdf-viewer": "^15.0.2",
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primeng": "^14.0.1",
    "rxjs": "~7.5.6",
    "shallow-render": "^14.1.0",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.1",
    "@angular/cli": "~14.2.1",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "@types/jest": "^27.0.3",
    "jest-preset-angular": "^11.0.1",
    "jasmine-core": "~4.4.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-jest": "^29.0.0",
    "typescript": "~4.7.2"
  }

app.component.html

<app-menu-bar
  *ngIf="user$ | async as user"
  [username]="user.name"
></app-menu-bar>
<router-outlet></router-outlet>

app-routing.module.ts

@Component({
  selector: 'app-menu-bar',
  templateUrl: './menu-bar.component.html',
  styleUrls: ['./menu-bar.component.scss']
})
export class MenuBarComponent implements OnInit {
  @Input()
  username: string;

  items: MenuItem[];

  constructor(private readonly translateService: TranslateService, private readonly router: Router,
              private readonly oauthService: OAuthService) {
  }

  ngOnInit(): void {
    this.items = [
      {
        label: this.translateService.instant('MENU.DASHBOARD.LABEL'),
        icon: 'pi pi-fw pi-home',
        command: () => this.router.navigate([ROUTE_ITEM]),
      },
      {
        label: this.username,
        icon: 'pi pi-fw pi-user',
      },
    ];
  }
  onLogoutClicked() {
    this.oauthService.logOut();
  }

}

app-routes.ts

export const ROUTE_ITEM = 'item';
export const ROUTE_NOT_FOUND = 'not-found';
export const ROUTE_UNAUTHORIZED = 'unauthorized';
export const ROUTE_SERVER_ERROR = 'error';
export const ROUTE_SERVER_UNAVAILABLE = 'server-unavailable';

app.component.ts

@Injectable({
  providedIn: 'root',
})
export class AppFacade {

  constructor(private store: Store<State>) {
  }

  get user(): Observable<User> {
    return this.store.select(appSelectors.user);
  }
}

app.component.html

<app-menu-bar
    *ngIf="user$ | async as user"
    [username]="user.name"
  ></app-menu-bar>
<router-outlet></router-outlet>

manu-bar.component.html

<p-menubar [model]="items" styleClass="menubar" >
  <ng-template pTemplate="start">
    <img src="assets/images/LOGO.png" height="40" width="132.875"  alt="logo">
  </ng-template>
  <button pButton  label="{{'MENU.LOGOFF' | translate}}" icon="pi pi-power-off" (click)="onLogoutClicked()"></button>
</p-menubar>

menu-bar.component.ts

@Component({
  selector: 'app-menu-bar',
  templateUrl: './menu-bar.component.html',
  styleUrls: ['./menu-bar.component.scss']
})
export class MenuBarComponent implements OnInit {
  @Input()
  username: string;

  items: MenuItem[];

  constructor(private readonly translateService: TranslateService, private readonly router: Router,
              private readonly oauthService: OAuthService) {
  }

  ngOnInit(): void {
    this.items = [
      {
        label: this.translateService.instant('MENU.DASHBOARD.LABEL'),
        icon: 'pi pi-fw pi-home',
        command: () => this.router.navigate([ROUTE_DDS]),
      },
      {
        label: this.username,
        icon: 'pi pi-fw pi-user',
      },
    ];
  }
  onLogoutClicked() {
    this.oauthService.logOut();
  }

}

CodePudding user response：

I have found why this happens:
We use OAuth 2.0 to authenticate. When these the parameters code and state are being placed in the url, OAuth takes the value to handle them. but the values are not the data it expects and throws an error. Therefor the user is undefined and angular is unable to compile the menu-bar (user.name does not exists).