docs: fix issues with Angular code samples

content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-built-in-pipes-47/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import {
@@ -45,7 +45,7 @@ class FileDateComponent {
 		</button>
 	`,
 })
-export class FileComponent implements OnInit, OnDestroy {
+class FileComponent implements OnInit, OnDestroy {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -95,7 +95,7 @@ export class FileComponent implements OnInit, OnDestroy {
 		</div>
 	`,
 })
-export class FileListComponent {
+class FileListComponent {
 	selectedIndex = -1;
 
 	fileTrackBy(index: number, file: File) {

content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-computed-values-47/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import {
@@ -37,7 +37,7 @@ class FormatReadableDatePipe implements PipeTransform {
 		</span>
 	`,
 })
-export class FileDateComponent {
+class FileDateComponent {
 	@Input() inputDate!: Date;
 }
 
@@ -61,7 +61,7 @@ export class FileDateComponent {
 		</button>
 	`,
 })
-export class FileComponent implements OnInit, OnDestroy {
+class FileComponent implements OnInit, OnDestroy {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -111,7 +111,7 @@ export class FileComponent implements OnInit, OnDestroy {
 		</div>
 	`,
 })
-export class FileListComponent {
+class FileListComponent {
 	selectedIndex = -1;
 
 	fileTrackBy(index: number, file: File) {

content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-derived-challenge-49/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input, Pipe, PipeTransform } from "@angular/core";
@@ -28,7 +28,7 @@ class FormatBytesPipe implements PipeTransform {
 	imports: [FormatBytesPipe],
 	template: `<p>{{ bytes | formatBytes }}</p>`,
 })
-export class DisplaySizeComponent {
+class DisplaySizeComponent {
 	@Input() bytes!: number;
 }
 
@@ -81,6 +81,6 @@ export class DisplaySizeComponent {
 		</table>
 	`,
 })
-export class AppComponent {}
+class AppComponent {}
 
 bootstrapApplication(AppComponent);

content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-multi-input-pipes-47/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import {
@@ -33,7 +33,7 @@ class FormatDatePipe implements PipeTransform {
 		</span>
 	`,
 })
-export class FileDateComponent {
+class FileDateComponent {
 	@Input() inputDate!: Date;
 }
 
@@ -57,7 +57,7 @@ export class FileDateComponent {
 		</button>
 	`,
 })
-export class FileComponent implements OnInit, OnDestroy {
+class FileComponent implements OnInit, OnDestroy {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -107,7 +107,7 @@ export class FileComponent implements OnInit, OnDestroy {
 		</div>
 	`,
 })
-export class FileListComponent {
+class FileListComponent {
 	selectedIndex = -1;
 
 	fileTrackBy(index: number, file: File) {

content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-non-prop-derived-48/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Pipe, PipeTransform } from "@angular/core";

content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-prop-listening-46/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import {
@@ -18,7 +18,7 @@ import { NgFor, NgIf } from "@angular/common";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnChanges {
+class FileDateComponent implements OnChanges {
 	@Input() inputDate!: Date;
 
 	dateStr = "";
@@ -100,7 +100,7 @@ export class FileDateComponent implements OnChanges {
 		</button>
 	`,
 })
-export class FileComponent implements OnInit, OnDestroy {
+class FileComponent implements OnInit, OnDestroy {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -150,7 +150,7 @@ export class FileComponent implements OnInit, OnDestroy {
 		</div>
 	`,
 })
-export class FileListComponent {
+class FileListComponent {
 	selectedIndex = -1;
 
 	fileTrackBy(index: number, file: File) {

content/blog/ffg-fundamentals-derived-values/ffg-fundamentals-angular-refreshing-file-date-45/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import {
@@ -16,7 +16,7 @@ import { NgFor, NgIf } from "@angular/common";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	@Input() inputDate!: Date;
 
 	dateStr = "";
@@ -92,7 +92,7 @@ export class FileDateComponent implements OnInit {
 		</button>
 	`,
 })
-export class FileComponent implements OnInit, OnDestroy {
+class FileComponent implements OnInit, OnDestroy {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -142,7 +142,7 @@ export class FileComponent implements OnInit, OnDestroy {
 		</div>
 	`,
 })
-export class FileListComponent {
+class FileListComponent {
 	selectedIndex = -1;
 
 	fileTrackBy(index: number, file: File) {

content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-conditional-branches-19/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgIf } from "@angular/common";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	@Input() inputDate!: Date;
 
 	/**
@@ -88,7 +88,7 @@ export class FileDateComponent implements OnInit {
 		</button>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -116,6 +116,6 @@ export class FileComponent {
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-conditional-date-18/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgIf } from "@angular/common";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	@Input() inputDate!: Date;
 
 	/**
@@ -86,7 +86,7 @@ export class FileDateComponent implements OnInit {
 		</button>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -114,6 +114,6 @@ export class FileComponent {
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-conditional-render-17/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input } from "@angular/core";
@@ -10,7 +10,7 @@ import { NgIf } from "@angular/common";
 	imports: [NgIf],
 	template: `<div><p *ngIf="bool">Text here</p></div>`,
 })
-export class ConditionalRenderComponent {
+class ConditionalRenderComponent {
 	@Input() bool!: boolean;
 }
 
@@ -27,6 +27,6 @@ export class ConditionalRenderComponent {
 		</div>
 	`,
 })
-export class AppComponent {}
+class AppComponent {}
 
 bootstrapApplication(AppComponent);

content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-dynamic-challenge-25/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input, EventEmitter, Output } from "@angular/core";
@@ -18,7 +18,7 @@ import { NgFor, NgIf } from "@angular/common";
 		</div>
 	`,
 })
-export class ExpandableDropdownComponent {
+class ExpandableDropdownComponent {
 	@Input() name!: string;
 	@Input() expanded!: boolean;
 	@Output() toggle = new EventEmitter();
@@ -40,7 +40,7 @@ export class ExpandableDropdownComponent {
 		</div>
 	`,
 })
-export class SidebarComponent {
+class SidebarComponent {
 	categories = [
 		"Movies",
 		"Pictures",

content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-keyed-demo-22/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";
@@ -21,7 +21,7 @@ import { NgFor } from "@angular/common";
 		</div>
 	`,
 })
-export class WordListComponent {
+class WordListComponent {
 	words: Word[] = [];
 
 	wordTrackBy(index: number, word: Word) {

content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-rendering-lists-20/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgFor, NgIf } from "@angular/common";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	@Input() inputDate!: Date;
 
 	/**
@@ -88,7 +88,7 @@ export class FileDateComponent implements OnInit {
 		</button>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -116,7 +116,7 @@ export class FileComponent {
 		</ul>
 	`,
 })
-export class FileListComponent {
+class FileListComponent {
 	selectedIndex = -1;
 
 	onSelected(idx: number) {

content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-unkeyed-demo-21/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";
@@ -21,7 +21,7 @@ import { NgFor } from "@angular/common";
 		</div>
 	`,
 })
-export class WordListComponent {
+class WordListComponent {
 	words: Word[] = [];
 
 	addWord() {

content/blog/ffg-fundamentals-dynamic-html/ffg-fundamentals-angular-using-it-together-24/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgFor, NgIf } from "@angular/common";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	@Input() inputDate!: Date;
 
 	/**
@@ -88,7 +88,7 @@ export class FileDateComponent implements OnInit {
 		</button>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	@Input() fileName!: string;
 	@Input() href!: string;
 	@Input() isSelected!: boolean;
@@ -122,7 +122,7 @@ export class FileComponent {
 		</div>
 	`,
 })
-export class FileListComponent {
+class FileListComponent {
 	selectedIndex = -1;
 
 	fileTrackBy(index: number, file: File) {

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-attribute-binding-10/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit } from "@angular/core";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	dateStr = this.formatDate(new Date());
 	labelText = this.formatReadableDate(new Date());
 

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-component-hierarchy-4/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { Component } from "@angular/core";
 import { bootstrapApplication } from "@angular/platform-browser";
 
@@ -7,7 +7,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
 	standalone: true,
 	template: `<span>12/03/21</span>`,
 })
-export class FileDateComponent {}
+class FileDateComponent {}
 
 @Component({
 	selector: "file",
@@ -19,7 +19,7 @@ export class FileDateComponent {}
 		</div>
 	`,
 })
-export class FileComponent {}
+class FileComponent {}
 
 @Component({
 	selector: "file-list",
@@ -33,6 +33,6 @@ export class FileComponent {}
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-component-reuse-3/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { Component } from "@angular/core";
 import { bootstrapApplication } from "@angular/platform-browser";
 
@@ -11,7 +11,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
 		</div>
 	`,
 })
-export class FileComponent {}
+class FileComponent {}
 
 @Component({
 	selector: "file-list",
@@ -25,6 +25,6 @@ export class FileComponent {}
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-display-8/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component } from "@angular/core";
 	standalone: true,
 	template: `<span>{{ dateStr }}</span>`,
 })
-export class FileDateComponent {
+class FileDateComponent {
 	dateStr = this.formatDate();
 
 	formatDate() {

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-event-binding-14/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit, Input } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from "@angular/core";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	@Input() inputDate!: Date;
 
 	/**
@@ -85,7 +85,7 @@ export class FileDateComponent implements OnInit {
 		</button>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	isSelected = false;
 	selectFile() {
 		this.isSelected = !this.isSelected;
@@ -107,6 +107,6 @@ export class FileComponent {
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-extracted-logic-6/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { Component } from "@angular/core";
 import { bootstrapApplication } from "@angular/platform-browser";
 
@@ -7,7 +7,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
 	standalone: true,
 	template: `<span>12/03/21</span>`,
 })
-export class FileDateComponent {
+class FileDateComponent {
 	dateStr = this.formatDate();
 	formatDate() {
 		const today = new Date();

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-inline-logic-5/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { Component } from "@angular/core";
 import { bootstrapApplication } from "@angular/platform-browser";
 
@@ -7,7 +7,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
 	standalone: true,
 	template: `<span>12/03/21</span>`,
 })
-export class FileDateComponent {
+class FileDateComponent {
 	dateStr = `${
 		new Date().getMonth() + 1
 	}/${new Date().getDate()}/${new Date().getFullYear()}`;

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-intro-challenge-16/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input, EventEmitter, Output } from "@angular/core";
@@ -16,7 +16,7 @@ import { Component, Input, EventEmitter, Output } from "@angular/core";
 		</div>
 	`,
 })
-export class ExpandableDropdownComponent {
+class ExpandableDropdownComponent {
 	@Input() name!: string;
 	@Input() expanded!: boolean;
 	@Output() toggle = new EventEmitter();
@@ -62,7 +62,7 @@ export class ExpandableDropdownComponent {
 		</div>
 	`,
 })
-export class SidebarComponent {
+class SidebarComponent {
 	moviesExpanded = true;
 	picturesExpanded = false;
 	conceptsExpanded = false;

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-live-display-9/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit } from "@angular/core";
 	standalone: true,
 	template: `<span>{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	dateStr = this.formatDate(new Date());
 
 	ngOnInit() {

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-multi-props-12/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit, Input } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from "@angular/core";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	dateStr = this.formatDate(new Date());
 	labelText = this.formatReadableDate(new Date());
 
@@ -75,7 +75,7 @@ export class FileDateComponent implements OnInit {
 		</div>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	@Input() fileName!: string;
 	@Input() href!: string;
 }
@@ -92,6 +92,6 @@ export class FileComponent {
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-object-props-13/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit, Input } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from "@angular/core";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	@Input() inputDate!: Date;
 
 	/**
@@ -80,7 +80,7 @@ export class FileDateComponent implements OnInit {
 		</div>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	inputDate = new Date();
 	@Input() fileName!: string;
 	@Input() href!: string;
@@ -98,6 +98,6 @@ export class FileComponent {
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-outputs-15/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	@Input() inputDate!: Date;
 
 	/**
@@ -85,7 +85,7 @@ export class FileDateComponent implements OnInit {
 		</button>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	@Input() fileName!: string;
 	// `href` is temporarily unused
 	@Input() href!: string;
@@ -128,7 +128,7 @@ export class FileComponent {
 		</ul>
 	`,
 })
-export class FileListComponent {
+class FileListComponent {
 	selectedIndex = -1;
 
 	onSelected(idx: number) {

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-parent-child-2/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { Component } from "@angular/core";
 import { bootstrapApplication } from "@angular/platform-browser";
 
@@ -11,7 +11,7 @@ import { bootstrapApplication } from "@angular/platform-browser";
 		</div>
 	`,
 })
-export class FileComponent {}
+class FileComponent {}
 
 @Component({
 	selector: "file-list",
@@ -23,6 +23,6 @@ export class FileComponent {}
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-props-11/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit, Input } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from "@angular/core";
 	standalone: true,
 	template: `<span [attr.aria-label]="labelText">{{ dateStr }}</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	dateStr = this.formatDate(new Date());
 	labelText = this.formatReadableDate(new Date());
 
@@ -75,7 +75,7 @@ export class FileDateComponent implements OnInit {
 		</div>
 	`,
 })
-export class FileComponent {
+class FileComponent {
 	@Input() fileName!: string;
 }
 @Component({
@@ -90,6 +90,6 @@ export class FileComponent {
 		</ul>
 	`,
 })
-export class FileListComponent {}
+class FileListComponent {}
 
 bootstrapApplication(FileListComponent);

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-rendering-1/src/main.ts

@@ -1,5 +1,5 @@
 // Required by Angular to work, feel free to ignore
-import "zone.js/dist/zone";
+import "zone.js";
 import { Component } from "@angular/core";
 import { bootstrapApplication } from "@angular/platform-browser";
 
@@ -12,6 +12,6 @@ import { bootstrapApplication } from "@angular/platform-browser";
 		</div>
 	`,
 })
-export class FileComponent {}
+class FileComponent {}
 
 bootstrapApplication(FileComponent);

content/blog/ffg-fundamentals-intro-to-components/ffg-fundamentals-angular-side-effect-intro-7/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit } from "@angular/core";
@@ -8,7 +8,7 @@ import { Component, OnInit } from "@angular/core";
 	standalone: true,
 	template: `<span>12/03/21</span>`,
 })
-export class FileDateComponent implements OnInit {
+class FileDateComponent implements OnInit {
 	dateStr = this.formatDate();
 
 	ngOnInit() {

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-broken-alarm-33/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit, EventEmitter, Output } from "@angular/core";

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-broken-clock-32/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit } from "@angular/core";

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-broken-event-bubbling-30/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";
@@ -14,7 +14,7 @@ import { Component } from "@angular/core";
 		</div>
 	`,
 })
-export class WindowSizeComponent {
+class WindowSizeComponent {
 	height = window.innerHeight;
 	width = window.innerWidth;
 

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-broken-window-size-28/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";
@@ -13,7 +13,7 @@ import { Component } from "@angular/core";
 		</div>
 	`,
 })
-export class WindowSizeComponent {
+class WindowSizeComponent {
 	height = window.innerHeight;
 	width = window.innerWidth;
 }

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-effects-challenge-44/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from "@angular/core";

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-event-bubbling-31/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";
@@ -15,7 +15,7 @@ import { Component } from "@angular/core";
 		</div>
 	`,
 })
-export class EventBubblerComponent {
+class EventBubblerComponent {
 	logMessage() {
 		alert("Clicked!");
 	}

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-hidden-memory-leak-events-35/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit, Output, EventEmitter } from "@angular/core";

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-hidden-memory-leak-functions-36/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit, Input } from "@angular/core";

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-in-component-side-effects-39/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-initial-render-demo-26/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgIf } from "@angular/common";
 	standalone: true,
 	template: "<p>I am the child</p>",
 })
-export class ChildComponent {}
+class ChildComponent {}
 
 @Component({
 	selector: "parent-comp",
@@ -22,7 +22,7 @@ export class ChildComponent {}
 		</div>
 	`,
 })
-export class ParentComponent {
+class ParentComponent {
 	showChild = true;
 	setShowChild() {
 		this.showChild = !this.showChild;

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-initial-render-on-init-27/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit } from "@angular/core";
@@ -9,7 +9,7 @@ import { NgIf } from "@angular/common";
 	standalone: true,
 	template: "<p>I am the child</p>",
 })
-export class ChildComponent implements OnInit {
+class ChildComponent implements OnInit {
 	ngOnInit() {
 		console.log("I am rendering");
 	}
@@ -26,7 +26,7 @@ export class ChildComponent implements OnInit {
 		</div>
 	`,
 })
-export class ParentComponent {
+class ParentComponent {
 	showChild = true;
 	setShowChild() {
 		this.showChild = !this.showChild;

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-leaking-window-size-29/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnInit } from "@angular/core";
@@ -13,14 +13,14 @@ import { Component, OnInit } from "@angular/core";
 		</div>
 	`,
 })
-export class WindowSizeComponent implements OnInit {
+class WindowSizeComponent implements OnInit {
 	height = window.innerHeight;
 	width = window.innerWidth;
 
 	resizeHandler = () => {
 		this.height = window.innerHeight;
 		this.width = window.innerWidth;
-	}
+	};
 
 	ngOnInit() {
 		// This code will cause a memory leak, more on that soon

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-mutable-update-title-43/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, NgZone, OnDestroy, inject } from "@angular/core";
@@ -16,7 +16,7 @@ import { NgIf } from "@angular/common";
 		</div>
 	`,
 })
-export class TitleChangerComponent implements OnDestroy {
+class TitleChangerComponent implements OnDestroy {
 	title = "Movies";
 
 	timeoutExpire: any = null;
@@ -54,7 +54,7 @@ export class TitleChangerComponent implements OnDestroy {
 		</div>
 	`,
 })
-export class AppComponent {
+class AppComponent {
 	show = true;
 
 	toggle() {

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-stateful-update-title-42/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnDestroy } from "@angular/core";
@@ -16,7 +16,7 @@ import { NgIf } from "@angular/common";
 		</div>
 	`,
 })
-export class TitleChangerComponent implements OnDestroy {
+class TitleChangerComponent implements OnDestroy {
 	title = "Movies";
 
 	timeoutExpire: any = null;
@@ -45,7 +45,7 @@ export class TitleChangerComponent implements OnDestroy {
 		</div>
 	`,
 })
-export class AppComponent {
+class AppComponent {
 	show = true;
 
 	toggle() {

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-unmounting-34/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component, OnDestroy } from "@angular/core";
@@ -26,7 +26,7 @@ class CleanupComponent implements OnDestroy {
 		</div>
 	`,
 })
-export class AppComponent {
+class AppComponent {
 	show = true;
 
 	toggle() {

content/blog/ffg-fundamentals-side-effects/ffg-fundamentals-angular-update-title-41/src/main.ts

@@ -1,4 +1,4 @@
-import "zone.js/dist/zone";
+import "zone.js";
 import { bootstrapApplication } from "@angular/platform-browser";
 
 import { Component } from "@angular/core";
@@ -16,7 +16,7 @@ import { NgIf } from "@angular/common";
 		</div>
 	`,
 })
-export class TitleChangerComponent {
+class TitleChangerComponent {
 	title = "Movies";
 
 	updateTitle(val: string) {
@@ -38,7 +38,7 @@ export class TitleChangerComponent {
 		</div>
 	`,
 })
-export class AppComponent {
+class AppComponent {
 	show = true;
 
 	toggle() {