How to display components using their selector in Angular 17

Issue

Right now I'm playing around with Angular 17 (Angular CLI: 17.0.0).

The directory is structured as follows:

/src
    /app
        /x
            x.component.css
            x.component.html
            x.component.spec.ts
            x.component.ts
        app.component.css
        app.component.html
        app.component.spec.ts
        app.component.ts
        app.config.ts
        app.routes.ts
    /assets
    favicon.ico
    index.html
    main.ts
    styles.css

I want to include the content of my component x by adding <app-x></app-x> to app.component.html and importing x in app.component.ts. However the content of that component is not displayed in the app.

What am I doing wrong?

Solution

You need to import the class of your component defined in x.component.ts

export class XComponent {

}

Then on your app.component.ts you add in the imports array

@Component({
  ...
  imports: [CommonModule, RouterOutlet, XComponent],
  ...
})

Answered By - Juan IWK3