After generating new component. app.module.ts does not import automatically

[strong egret]

So I am BRAND NEW (I apologize for the caps but I want to highlight that) to the Angular, JS, TS world. I am following along with some beginner videos for setting up an angular project and I do great but when i get to the point in the video of generating a new component using the command

ng generate component course_card
it generates fine and I can see the new component. I then go to "app.component.ts" and add

<course-card></course-card>
which gives me the following error:

'course-card' is not a known element:

If 'course-card' is an Angular component, then verify that it is part of this module.

If 'course-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Based on the research I have done (I still don't fully grasp it) it is because I need to manually add the import to app.module.ts.

However, I am curious why it is not automatically doing that in the videos I have seen after the person performs the ng generate CMD they are good to go.

I have tried uninstalling / clear cache/ re-installing angular with no luck

Is it VSS that is causing the issue? did I not configure something properly?

Thanks for any help in advance.

[cosmic bear]

Did you generate a standalone component (i.e. does it have standalone: truein its decorator)?
If so, that's expected: you must import it in the other standalone components that use it, or in the modules of non-standalone components that use it. But the end goal should be to not have NgModules at all.
See https://blog.ninja-squad.com/2022/05/12/a-guide-to-standalone-components-in-angular/ or https://angular.io/guide/standalone-components for a guide to standalone components.

[strong egret]

ahhh ok. I saw that to as i was following along with the video and I noticed the differences between my course-card.component.ts and his standalone: true being one of them. I guess this is default behavior to add that when creating a new component.

Also, for sake of learning is there a seperate command to create a component without that feature. I am only asking since I am already here I am going to browse the doc's you sent as well.

This is what it creates by default :

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

@Component({
selector: 'course-card',
standalone: true,
imports: [CommonModule],
templateUrl: './course-card.component.html',
styleUrl: './course-card.component.css'
})
export class CourseCardComponent {

}`

[cosmic bear]

ng generate component foobar --no-standalone.

[strong egret]

that worked thank you. I would like to understand more how standalone works at some point. I read the article by ninja you sent and while I dont fully comprehend it. It does seem like standalone is a good feature to use.

I guess for now i will focus on understanding the basics still though