Skip to content

Commit badcfc1

Browse files
manthanankmanthanank
committed
chore: Update README.md with project structure and component import instructions for Angular v16 to v19
1 parent 1cef8a9 commit badcfc1

File tree

1 file changed

+155
-67
lines changed

1 file changed

+155
-67
lines changed

‎README.md

+155-67
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,38 @@ ng serve
281281

282282
Open the browser and navigate to `http://localhost:4200/`.
283283

284-
Project structure:
284+
Project structure(Version 16 and earlier):
285+
286+
```bash
287+
[PROJECT NAME]
288+
├── node_modules
289+
├── src
290+
│ ├── app
291+
│ │ ├── app.component.css
292+
│ │ ├── app.component.html
293+
│ │ ├── app.component.spec.ts
294+
│ │ ├── app.component.ts
295+
│ │ ├── app.module.ts
296+
│ │ ├── ...
297+
│ ├── assets
298+
│ │ ├── .gitkeep
299+
│ │ └── ...
300+
│ ├── index.html
301+
│ ├── main.ts
302+
│ ├── styles.css
303+
│ ├── favicon.ico
304+
│ └── ...
305+
├── .editorconfig
306+
├── .gitignore
307+
├── angular.json
308+
├── package.json
309+
├── README.md
310+
├── tsconfig.json
311+
├── tslint.json
312+
└── ...
313+
```
314+
315+
Project structure(Version 17 and later):
285316

286317
```bash
287318
[PROJECT NAME]
@@ -434,15 +465,14 @@ import { Component } from '@angular/core';
434465
})
435466
```
436467

437-
If you want to create a non-standalone component, set the `standalone` property to `false`. The standalone component is enabled by default in Angular v17 and later.
468+
If you want to create a non-standalone component, set the `standalone` property to `false`. The standalone component is enabled by default in Angular v17 and v18.
469+
In Angular v19 and later, the standalone component is enabled by default and the `standalone` property is not required. You can disable the standalone component by setting the `standalone` property to `false`.
438470

439471
**Step 7** - Define the selector, template, and styles for the component.
440472

441-
```text
442-
selector - The selector for the component.
443-
templateUrl - The URL of the HTML template for the component.
444-
styleUrls - An array of URLs of the stylesheets for the component.
445-
```
473+
- selector - The selector for the component.
474+
- templateUrl - The URL of the HTML template for the component.
475+
- styleUrls - An array of URLs of the stylesheets for the component.
446476

447477
**Step 8** - Export the class.
448478

@@ -522,18 +552,67 @@ export class TestComponent {
522552
```
523553

524554
```html
525-
<!--component.component.html-->
555+
<!--test.component.html-->
526556
<h1>Test Component</h1>
527557
```
528558

529559
```css
530-
/*component.component.css*/
560+
/*test.component.css*/
531561
h1 {
532562
color: red;
533563
}
534564
```
535565

536-
**Creating the component files (Version 17 and later)** -
566+
**Importing the component in the app.module.ts file** -
567+
568+
```typescript
569+
//app.module.ts
570+
import { BrowserModule } from '@angular/platform-browser';
571+
import { NgModule } from '@angular/core';
572+
573+
import { AppComponent } from './app.component';
574+
import { TestComponent } from './test-component.component';
575+
576+
@NgModule({
577+
declarations: [
578+
AppComponent,
579+
TestComponent
580+
],
581+
imports: [
582+
BrowserModule
583+
],
584+
providers: [],
585+
bootstrap: [AppComponent]
586+
})
587+
export class AppModule { }
588+
```
589+
590+
**Importing the component in the app.component.ts file** -
591+
592+
```typescript
593+
//app.component.ts
594+
import { Component } from '@angular/core';
595+
import { RouterOutlet } from '@angular/router';
596+
import { TestComponent } from './test-component.component';
597+
598+
@Component({
599+
selector: 'app-root',
600+
templateUrl: './app.component.html',
601+
styleUrl: './app.component.scss'
602+
})
603+
export class AppComponent {
604+
title = 'app';
605+
}
606+
```
607+
608+
```html
609+
<!--app.component.html-->
610+
<app-test-component></app-test-component>
611+
```
612+
613+
In Version 16 and earlier of Angular, there is no standalone component. You need to import the component in the `app.module.ts` file. If you created a non-standalone component, you will see no standalone property in the `@Component` decorator.
614+
615+
**Creating the component files (Version 17 and 18)** -
537616

538617
```bash
539618
//test-component.component.ts
@@ -551,95 +630,76 @@ export class TestComponent {
551630
}
552631
```
553632

554-
You can create a standalone component by setting the `standalone` property to `true`. The standalone component is enabled by default in Angular v17 and later. You can disable the standalone component by setting the `standalone` property to `false` in the `@Component` decorator of the component. If you disable the standalone component, you need to import the component in the `app.module.ts` file. If you created a non-standalone component, you will see no standalone property in the `@Component` decorator.
555-
556633
```html
557-
<!--test-component.component.html-->
634+
<!--test.component.html-->
558635
<h1>Test Component</h1>
559636
```
560637

561638
```css
562-
/*test-component.component.css*/
639+
/*test.component.css*/
563640
h1 {
564641
color: red;
565642
}
566643
```
567644

568-
**Importing the component in the app.module.ts file (Version 16 and earlier)** -
645+
**Importing the component in the app.component.ts file** -
569646

570647
```typescript
571-
//app.module.ts
572-
import { BrowserModule } from '@angular/platform-browser';
573-
import { NgModule } from '@angular/core';
574-
575-
import { AppComponent } from './app.component';
576-
import { TestComponent } from './app.component';
648+
//app.component.ts
649+
import { Component } from '@angular/core';
650+
import { TestComponent } from './test-component.component';
577651

578-
@NgModule({
579-
declarations: [
580-
AppComponent,
581-
TestComponent
582-
],
583-
imports: [
584-
BrowserModule
585-
],
586-
providers: [],
587-
bootstrap: [AppComponent]
652+
@Component({
653+
selector: 'app-root',
654+
imports: [TestComponent],
655+
templateUrl: './app.component.html',
656+
styleUrl: './app.component.scss'
588657
})
589-
export class AppModule { }
658+
export class AppComponent {
659+
title = 'app';
660+
}
590661
```
591662

592-
**Importing the component in the app.module.ts file (Version 17 and later without standalone component)** -
663+
In version 17 and 18 of Angular, the standalone component is enabled by default with the `standalone` property set to `true` in the `@Component` decorator. You can disable the standalone component by setting the `standalone` property to `false` or not adding the standalone property in the `@Component` decorator.
593664

594-
```typescript
595-
//app.module.ts
596-
import { BrowserModule } from '@angular/platform-browser';
597-
import { NgModule } from '@angular/core';
665+
**Creating the component files (Version 19 and later)** -
598666

599-
import { AppComponent } from './app.component';
600-
import { TestComponent } from './test-component/test-component.component';
667+
```bash
668+
//test-component.component.ts
669+
import { Component } from '@angular/core';
601670

602-
@NgModule({
603-
declarations: [
604-
AppComponent,
605-
TestComponent
606-
],
607-
imports: [
608-
BrowserModule
609-
],
610-
providers: [],
611-
bootstrap: [AppComponent]
671+
@Component({
672+
selector: 'app-test-component',
673+
templateUrl: './test-component.component.html',
674+
styleUrls: ['./test-component.component.css']
612675
})
613-
export class AppModule { }
614-
```
615-
616-
In version 17 and later, the standalone component is enabled by default. You can disable the standalone component by setting the `standalone` property to `false`. Inside app folder, `app.config.ts` file is created by default.
617676

618-
```typescript
619-
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
620-
import { provideRouter } from '@angular/router';
677+
export class TestComponent {
678+
// Component logic here
679+
}
680+
```
621681

622-
import { routes } from './app.routes';
682+
```html
683+
<!--test.component.html-->
684+
<h1>Test Component</h1>
685+
```
623686

624-
export const appConfig: ApplicationConfig = {
625-
providers: [
626-
provideZoneChangeDetection({ eventCoalescing: true }),
627-
provideRouter(routes),
628-
],
629-
};
687+
```css
688+
/*test.component.css*/
689+
h1 {
690+
color: red;
691+
}
630692
```
631693

632-
You can import the component in the `app.component.ts` file and use the component selector in the HTML template.
694+
**Importing the component in the app.component.ts file** -
633695

634696
```typescript
635697
//app.component.ts
636698
import { Component } from '@angular/core';
637-
import { RouterOutlet } from '@angular/router';
638-
import { TestComponent } from './test-component/test-component.component';
699+
import { TestComponent } from './test-component.component';
639700

640701
@Component({
641702
selector: 'app-root',
642-
standalone: true,
643703
imports: [TestComponent],
644704
templateUrl: './app.component.html',
645705
styleUrl: './app.component.scss'
@@ -654,6 +714,34 @@ export class AppComponent {
654714
<app-test-component></app-test-component>
655715
```
656716

717+
In version 19 and later of Angular, the standalone component is enabled by default. You can disable the standalone component by setting the `standalone` property to `false` in the `@Component` decorator.
718+
719+
Inside app folder, `app.config.ts` file is created by default in version 17 and later of Angular. And `app.routes.ts` file is created by default in version 17 and later of Angular.
720+
721+
```typescript
722+
// app.config.ts
723+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
724+
import { provideRouter } from '@angular/router';
725+
726+
import { routes } from './app.routes';
727+
728+
export const appConfig: ApplicationConfig = {
729+
providers: [
730+
provideZoneChangeDetection({ eventCoalescing: true }),
731+
provideRouter(routes),
732+
],
733+
};
734+
```
735+
736+
```typescript
737+
// app.routes.ts
738+
import { Routes } from '@angular/router';
739+
740+
export const routes: Routes = [];
741+
```
742+
743+
You can import the component in the `app.component.ts` file and use the component selector in the HTML template.
744+
657745
**Creating the inline Template & StyleUrls** -
658746

659747
```typescript

0 commit comments

Comments
 (0)