Upgraded angular versions and now getting error: "The AppComponent component is not marked as...

I recently updated angular because Angular Fire bugs were fixed in a much newer version. My previous version was before the "standalone" changes. As a result, I'm getting this error in the console (this is after converting my whole project to newer angular which uses standalone as default)

The AppComponent component is not marked as standalone, but Angular expects to have a standalone component here. Please make sure the AppComponent component has the `standalone: true` flag in the decorator.


Some processes I went through after updating included changing the default component to standalone:false because I am using a one-page project with routing. However, the AppComponent is complaining. When I change it to standalone:true, though, I get a host of new problems. I get errors about how the appcomponent should not be included as a module declaration if it is standalone... but removing it and moving it to imports breaks everything to do with routing and cross-component-referencing (it has no clue what to do with <app-component-name> as an example).

The app runs fine with this error, but I don't like having it sit around when there might be a solution.

This is my first question on Stack Overflow, so I apologize if this is not up to scratch with all the info you need. Let me know if I can provide anything that might help troubleshoot this. I couldn't find any other posts with my keywords, "standalone, appcomponent" and search terms.
If you find anything I missed that'd be helpful too.

Here's my package.json: https://pastebin.com/KdZX3RA1

module: https://pastebin.com/4ipapG5r

angular.json https://pastebin.com/7snFEkrj

app.component.ts https://pastebin.com/ZdXMcNUt

EDIT: main.ts https://pastebin.com/xXYeRsd4

I tried: to update my angular project and disable standalone as the default...

what happened: error about the app component standalone flag

Edit: app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserAuthService } from './services/auth/user-auth.service';
import { Location } from '@angular/common';
import { GlobalService } from './services/global.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
// standalone:true,
})
export class AppComponent implements OnInit {
title = 'Drennen Dooms';

constructor(
private router: Router,
private userAuth: UserAuthService,
private globalService: GlobalService,
private location: Location,
) {
// router.navigate(['work']);
}
ngOnInit(): void {
console.log(`path: ${this.location.path()}`);

if (this.location.path().replaceAll('/', '') == 'logout') {
this.userAuth.logout();
this.globalService.setRoute('home');
}

if (
(this.location.path() === '/' ||
this.location.path() == '' ||
this.location.path() == undefined) &&
(this.globalService.routeSubject.getValue() == undefined ||
this.globalService.routeSubject.getValue() == '')
) {
console.log('routing', this.globalService.routeSubject.getValue());
this.globalService.setRoute('home');
} else {
if (this.location.path() == '') {
this.globalService.setRoute('home');
} else {
console.log(`routing to ${this.location.path()}`);
this.globalService.setRoute(this.location.path().replaceAll('/', ''));
}
}

this.globalService.routeSubject.subscribe((route) => {
this.router.navigate([route]);
console.log('from', this.router.url, 'to', route);
});

// _route.queryParams.subscribe((params) => {console.log(`route
params\n${params}`)});
}
}

Continue reading...