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

Question

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}`)});
 }
}

Saguaro

Please include all relevant code and files (if small enough) as text rather than as easily-outdated links. – Kone

@HereticMonkey easily outdated? I just made them? These are entire files and won't fit on this page. – Saguaro

The question (and answer) is for everyone who has the same question; we presume all questions are going to stick around because they're all expected to be that high quality. That's why we want the information on this site, so that if someone finds the issue, we have the reference here, and no one's hunting down old files five years from now. – Kone

Okay, I understand what you mean... but the amount of code I've included is probably close to 300 lines.. I don't know which bit of that code is the relevant bit... I can do my best to update the original post once I have an answer. – Saguaro

... you're allowed something like 30,000 characters, I think 300 lines will fit :). Also consider only including the bare minimum. Reduce the amount of code until you have a minimal reproducible example and post that code. – Kone

Answer 1

Please just change the main.ts.

You should either use platformBrowserDynamic().bootstrapModule(AppModule) (modules flow - non standalone) or bootstrapApplication(AppComponent,...) (standalone flow).

We cannot use both of them together, since you are using bootstrapApplication it is asking why the app component is not standalone!

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
import { AppModule } from './app/app.module';
import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Tupungato

Answer 2

For anyone who found their way to this with both, bootstrapModule and bootstarpApplication, as the issue resolution with this question was, adding providers with

bootstrapApplication(AppComponent, {
    providers: [provideAnimations()],
});

and still bootstrapping the appModule like

platformBrowserDynamic().bootstrapModule(AppModule)
   .catch((err) => console.log(err));

causes the same problem, of Angular thinking there stand alone components.

The way to add providers in bootstrappModule is

platformBrowserDynamic().bootstrapModule(AppModule, {
    providers: [provideAnimations()],
})
    .catch((err) => console.log(err));

Hope it helps whoever finds their way to this question.

Kelula

Answer 3

I would double check that everything is imported properly in the module file. Also that your component does not have any local imports and only uses imports from the ngModule.

It sounds like a @Component decorator property that only works on standalone is being used.

And also dont have standalone: false in your component, just omit it

Udine

I guess that's the part I'm asking for help with... I'm not sure what's correct. Outside of my imported libraries this is a very straightforward app. I didn't add or remove anything other than the standalone:true line, which I removed from all of my components – Saguaro

Answer 4

To fix the standalone issue just change the app.component.ts file in the component write "standalone: true"

<pre> 
 @Component({
  selector: 'app-root',
   templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
   })
  export class AppComponent {

Cruzcruzado

This issue has been successfully answered. Your answer is incorrect and disregards all of the information I provided in the post. – Saguaro