Angular standalone component not rendering

Question

I'm using Angular 19 and my version of node is 18.2. I've got an existing module project and have added a stand alone component. The issue I'm having is that the component does render and the constructor, ngOnInit, and ngAfterViewInit do not fire. The stand alone component also does not appear in the browser dev tools. Any idea what could be causing angular to not render this component?

Component: import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-lu-map2',
  standalone: true,
  imports: [],
  templateUrl: './lu-map2.component.html',
  styleUrl: './lu-map2.component.css',

})
export class LuMap2Component implements OnInit{
  constructor(){
    console.log("Constructor Fired");
  }

  ngOnInit() {
   console.log("message from lu-map2: OnInit Fired")
  }
  ngAfterViewInit() {
    console.log("message from lu-map2: ngAfterViewInit Fired")
   }

}

Component template:

<p>lu-map2 works!</p>

app.component template

<app-lu-map2></app-lu-map2>

if I swap out the standalone component with a non-standalone component it renders fine. Also see the attached screen shot that shows the component in the project, but the component is not is not listed in edge dev tools sources. (Doesnt appear in chrome or firefox either)

I was able to add the component to a different angular module project and the stand alone component rendered fine -- not an issue with the component — pvitt
– pvitt, Commented Apr 17 at 18:35
Would be great if you can reproduce the issue in StackBlitz. Thanks. — Yong Shun
– Yong Shun, Commented Apr 18 at 8:31

Anton Kovachev · Accepted Answer · 2025-04-18 06:46:46Z

Did you import the LuMap2Component class in the imports array of your app.component's module (considering app.component is not standalone) or in the imports array of your app.component (considering the case where app.component is standalone) i.e.

imports: [LuMap2Component]

standalone components must first be imported in the modules or other standalone components before they can use them.

Example of importing a standalone component in a module which will make the component available to other components declared in the same module:

import {LuMap2Component} from './lumap2/lumap2.component';

@NgModule({
    ....
   imports: [LuMap2Component]
    ....
})
export class AppModule { }

Example of importing a standalone component in another standalone component which will make the imported standalone component available in the component that imports it.

import {LuMap2Component} from './lumap2/lumap2.component';

@Component({
   // Import the `LuMap2Component` component in
   // order to use it in this component's template.
   ...
   imports: [LuMap2Component],
   ... 
})
export class AppCompponent { }

More on using standalone components here. Also you should follow the advice from the comment and import the CommonModule in LuMap2Component although this most likely is not the core issue of why you component isn't getting rendered.

Collectives™ on Stack Overflow

Angular standalone component not rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related