Upgrade Angular Renaissance to Angular 19(Remove standalone flag) (#283)

matschik · Nov 27, 2024 · fc00b4a · fc00b4a
1 parent 14e8688
commit fc00b4a
Show file tree

Hide file tree

Showing 29 changed files with 5,621 additions and 4,613 deletions.
diff --git a/content/1-reactivity/1-declare-state/angularRenaissance/name.component.ts b/content/1-reactivity/1-declare-state/angularRenaissance/name.component.ts
@@ -1,7 +1,6 @@
 import { Component, signal } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-name",
   template: `<h1>Hello {{ name() }}</h1>`,
 })

diff --git a/content/1-reactivity/2-update-state/angularRenaissance/name.component.ts b/content/1-reactivity/2-update-state/angularRenaissance/name.component.ts
@@ -1,7 +1,6 @@
 import { Component, signal } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-name",
   template: `<h1>Hello {{ name() }}</h1>`,
 })

diff --git a/content/1-reactivity/3-computed-state/angularRenaissance/doublecount.component.ts b/content/1-reactivity/3-computed-state/angularRenaissance/doublecount.component.ts
@@ -1,11 +1,10 @@
 import { Component, computed, signal } from "@angular/core";
 
 @Component({
-  standalone: true,
-  selector: "app-doublecount",
+  selector: "app-double-count",
   template: `<div>{{ doubleCount() }}</div>`,
 })
-export class DoublecountComponent {
+export class DoubleCountComponent {
   count = signal(10);
 
   doubleCount = computed(() => this.count() * 2);

diff --git a/content/2-templating/1-minimal-template/angularRenaissance/helloworld.component.ts b/content/2-templating/1-minimal-template/angularRenaissance/helloworld.component.ts
@@ -1,8 +1,7 @@
 import { Component } from "@angular/core";
 
 @Component({
-  standalone: true,
-  selector: "app-helloworld",
+  selector: "app-hello-world",
   template: `<h1>Hello world</h1>`,
 })
-export class HelloworldComponent {}
+export class HelloWorldComponent {}
diff --git a/content/2-templating/2-styling/angularRenaissance/cssstyle.component.ts b/content/2-templating/2-styling/angularRenaissance/cssstyle.component.ts
@@ -1,8 +1,7 @@
 import { Component } from "@angular/core";
 
 @Component({
-  standalone: true,
-  selector: "app-cssstyle",
+  selector: "app-css-style",
   template: `
     <h1 class="title">I am red</h1>
     <button style="font-size: 10rem">I am a button</button>

diff --git a/content/2-templating/3-loop/angularRenaissance/colors.component.ts b/content/2-templating/3-loop/angularRenaissance/colors.component.ts
@@ -1,7 +1,6 @@
 import { Component } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-colors",
   template: `
     <ul>

diff --git a/content/2-templating/4-event-click/angularRenaissance/counter.component.ts b/content/2-templating/4-event-click/angularRenaissance/counter.component.ts
@@ -1,7 +1,6 @@
 import { Component, signal } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-counter",
   template: `
     <p>Counter: {{ count() }}</p>

diff --git a/content/2-templating/5-dom-ref/angularRenaissance/inputfocused.component.ts b/content/2-templating/5-dom-ref/angularRenaissance/inputfocused.component.ts
@@ -1,11 +1,10 @@
 import { afterNextRender, Component, ElementRef, viewChild } from "@angular/core";
 
 @Component({
-  standalone: true,
-  selector: "app-inputfocused",
+  selector: "app-input-focused",
   template: `<input type="text" #inputRef />`,
 })
-export class InputfocusedComponent {
+export class InputFocusedComponent {
   inputRef = viewChild.required<ElementRef<HTMLInputElement>>("inputRef");
 
   constructor() {

diff --git a/content/2-templating/6-conditional/angularRenaissance/trafficlight.component.ts b/content/2-templating/6-conditional/angularRenaissance/trafficlight.component.ts
@@ -3,8 +3,7 @@ import { Component, computed, signal } from "@angular/core";
 const TRAFFIC_LIGHTS = ["red", "orange", "green"];
 
 @Component({
-  standalone: true,
-  selector: "app-trafficlight",
+  selector: "app-traffic-light",
   template: `
     <button (click)="nextLight()">Next light</button>
     <p>Light is: {{ light() }}</p>
@@ -24,7 +23,7 @@ const TRAFFIC_LIGHTS = ["red", "orange", "green"];
     </p>
   `,
 })
-export class TrafficlightComponent {
+export class TrafficLightComponent {
   lightIndex = signal(0);
 
   light = computed(() => TRAFFIC_LIGHTS[this.lightIndex()]);

diff --git a/content/3-lifecycle/1-on-mount/angularRenaissance/pagetitle.component.ts b/content/3-lifecycle/1-on-mount/angularRenaissance/pagetitle.component.ts
@@ -1,11 +1,10 @@
 import { Component, OnInit, signal } from "@angular/core";
 
 @Component({
-  standalone: true,
-  selector: "app-pagetitle",
+  selector: "app-page-title",
   template: `<p>Page title: {{ pageTitle() }}</p>`,
 })
-export class PagetitleComponent implements OnInit {
+export class PageTitleComponent implements OnInit {
   pageTitle = signal("");
 
   ngOnInit() {

diff --git a/content/3-lifecycle/2-on-unmount/angularRenaissance/time.component.ts b/content/3-lifecycle/2-on-unmount/angularRenaissance/time.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnDestroy, signal } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-time",
   template: `<p>Current time: {{ time() }}</p>`,
 })

diff --git a/content/4-component-composition/1-props/angularRenaissance/app.component.ts b/content/4-component-composition/1-props/angularRenaissance/app.component.ts
@@ -2,7 +2,6 @@ import { Component } from "@angular/core";
 import { UserprofileComponent } from "./userprofile.component";
 
 @Component({
-  standalone: true,
   selector: "app-root",
   imports: [UserprofileComponent],
   template: `

diff --git a/content/4-component-composition/1-props/angularRenaissance/userprofile.component.ts b/content/4-component-composition/1-props/angularRenaissance/userprofile.component.ts
@@ -1,7 +1,6 @@
 import { Component, input } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-userprofile",
   template: `
     <p>My name is {{ name() }}!</p>

diff --git a/...nt/4-component-composition/2-emit-to-parent/angularRenaissance/answer-button.component.ts b/...nt/4-component-composition/2-emit-to-parent/angularRenaissance/answer-button.component.ts
@@ -1,7 +1,6 @@
 import { Component, output } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-answer-button",
   template: `
     <button (click)="yes.emit()">YES</button>

diff --git a/content/4-component-composition/2-emit-to-parent/angularRenaissance/app.component.ts b/content/4-component-composition/2-emit-to-parent/angularRenaissance/app.component.ts
@@ -2,14 +2,12 @@ import { Component, signal } from "@angular/core";
 import { AnswerButtonComponent } from "./answer-button.component";
 
 @Component({
-  standalone: true,
   selector: "app-root",
   imports: [AnswerButtonComponent],
   template: `
     <p>Are you happy?</p>
 
-    <app-answer-button (yes)="onAnswerYes()" (no)="onAnswerNo()">
-    </app-answer-button>
+    <app-answer-button (yes)="onAnswerYes()" (no)="onAnswerNo()" />
 
     <p style="font-size: 50px">{{ isHappy() ? "😀" : "😥" }}</p>
   `,

diff --git a/content/4-component-composition/3-slot/angularRenaissance/app.component.ts b/content/4-component-composition/3-slot/angularRenaissance/app.component.ts
@@ -2,7 +2,6 @@ import { Component } from "@angular/core";
 import { FunnyButtonComponent } from "./funny-button.component";
 
 @Component({
-  standalone: true,
   selector: "app-root",
   imports: [FunnyButtonComponent],
   template: `<app-funny-button>Click me!</app-funny-button>`,

diff --git a/content/4-component-composition/3-slot/angularRenaissance/funny-button.component.ts b/content/4-component-composition/3-slot/angularRenaissance/funny-button.component.ts
@@ -1,7 +1,6 @@
 import { Component } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-funny-button",
   styles: `
     button {

diff --git a/content/4-component-composition/4-slot-fallback/angularRenaissance/app.component.ts b/content/4-component-composition/4-slot-fallback/angularRenaissance/app.component.ts
@@ -2,7 +2,6 @@ import { Component } from "@angular/core";
 import { FunnyButtonComponent } from "./funny-button.component";
 
 @Component({
-  standalone: true,
   selector: "app-root",
   imports: [FunnyButtonComponent],
   template: `

diff --git a/content/4-component-composition/4-slot-fallback/angularRenaissance/funny-button.component.ts b/content/4-component-composition/4-slot-fallback/angularRenaissance/funny-button.component.ts
@@ -1,7 +1,6 @@
 import { Component, ContentChild, TemplateRef } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-funny-button",
   styles: `
     button {

diff --git a/content/4-component-composition/5-context/angularRenaissance/app.component.ts b/content/4-component-composition/5-context/angularRenaissance/app.component.ts
@@ -3,7 +3,6 @@ import { UserService } from "./user.service";
 import { UserProfileComponent } from "./user-profile.component";
 
 @Component({
-  standalone: true,
   imports: [UserProfileComponent],
   providers: [UserService],
   selector: "app-root",

diff --git a/content/4-component-composition/5-context/angularRenaissance/user-profile.component.ts b/content/4-component-composition/5-context/angularRenaissance/user-profile.component.ts
@@ -2,7 +2,6 @@ import { Component, inject } from "@angular/core";
 import { UserService } from "./user.service";
 
 @Component({
-  standalone: true,
   selector: "app-user-profile",
   template: `
     <div>

diff --git a/content/6-form-input/1-input-text/angularRenaissance/input-hello.component.ts b/content/6-form-input/1-input-text/angularRenaissance/input-hello.component.ts
@@ -2,7 +2,6 @@ import { Component, signal } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 
 @Component({
-  standalone: true,
   imports: [FormsModule],
   selector: "app-input-hello",
   template: `

diff --git a/content/6-form-input/2-checkbox/angularRenaissance/is-available.component.ts b/content/6-form-input/2-checkbox/angularRenaissance/is-available.component.ts
@@ -2,7 +2,6 @@ import { Component, signal } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 
 @Component({
-  standalone: true,
   imports: [FormsModule],
   selector: "app-is-available",
   template: `

diff --git a/content/6-form-input/3-radio/angularRenaissance/pick-pill.component.ts b/content/6-form-input/3-radio/angularRenaissance/pick-pill.component.ts
@@ -2,7 +2,6 @@ import { Component, signal } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 
 @Component({
-  standalone: true,
   imports: [FormsModule],
   selector: "app-pick-pill",
   template: `

diff --git a/content/6-form-input/4-select/angularRenaissance/color-select.component.ts b/content/6-form-input/4-select/angularRenaissance/color-select.component.ts
@@ -2,7 +2,6 @@ import { Component, signal } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 
 @Component({
-  standalone: true,
   imports: [FormsModule],
   selector: "app-color-select",
   template: `

diff --git a/content/7-webapp-features/1-render-app/angularRenaissance/app.component.ts b/content/7-webapp-features/1-render-app/angularRenaissance/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from "@angular/core";
 
 @Component({
-  standalone: true,
   selector: "app-root",
   template: `<h1>Hello World</h1>`,
 })

diff --git a/content/7-webapp-features/2-fetch-data/angularRenaissance/users.component.ts b/content/7-webapp-features/2-fetch-data/angularRenaissance/users.component.ts
@@ -2,7 +2,6 @@ import { Component, inject } from "@angular/core";
 import { UserService } from "./user.service";
 
 @Component({
-  standalone: true,
   selector: "app-users",
   template: `
     @let vm = userService.state();

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@angular-eslint/eslint-plugin": "^18.3.1",
     "@angular-eslint/eslint-plugin-template": "^18.3.1",
     "@angular-eslint/template-parser": "^18.3.1",
-    "@angular/core": "^18.2.8",
+    "@angular/core": "^19.0.1",
     "@aurelia/router": "2.0.0-beta.22",
     "@babel/core": "^7.25.8",
     "@babel/eslint-parser": "^7.25.8",