NG8001: 'app-welcome' is not a known element:

Question

I've encountered an issue with my Angular application, and I'm getting error 8001. I'm not sure how to handle it. Can anyone help me with this? Thank you!

app.component.html

<h1>{{ title }}</h1>
<p>Congratulations! Your app is running. 🎉</p>
<app-welcome></app-welcome>

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'XYZCARS';
}

welcome.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrl: './welcome.component.css'
})
export class WelcomeComponent {
  car = 'toyota';
}

My project initially did not have an app.module.ts file. I added it myself and configured it based on some information I found online, but the issue persists and remains unresolved. Can anyone help me with this?

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { WelcomeComponent } from './welcome/welcome.component';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

A component can be "standalone" or declare in a NgModule.

If the main component is "standalone", the main.ts bootstrap it using

bootstrapApplication(AppComponent, {
  providers: [...]
})

If the main component is not "standalone" the main.ts boostrap the Module using some like

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

When a "standalone" component use another component, if the component is standalone should be add to the "imports" array

@Component({
  selector: 'app-root',
  standalone: true, //<--see is standalone
  imports:[AnotherComponent,....], //<--import directly the "AnotherComponent"
  template: ``
})
export class AppComponent{...}

If the another component is not standalone, the standaloneComponent should import the module where is declared the component

@Component({
  selector: 'app-root',
  standalone: true, //<--see is standalone
  imports:[AnotherModule,....], //<--import the "Module"
  template: ``
})
export class AppComponent{...}

Where AnotherModule should export the component

@NgModule({
  declarations: [
    AnotherComponent  //<--declare the "AnotherComponent"
  ],
  imports:[...]
  exports:[AnotherComponent], //<--AND should be declare as "exportable"
  providers: [...],
})
export class AnotherModule { }

So, choose

1. if you want your main component is standalone or not
2. if you want your "wellcome" component is a standalone or not

EXTRA If your main component is a standalone component and use Router you need indicate when boostrap the aplication, see the provideRouter in the code and check the docs

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(APP_ROUTES),
    ...
  ]
}