Last active
November 20, 2025 06:15
-
-
Save park-brian/29c37ae5fb09d7c72fbbbd1bbab1e7f9 to your computer and use it in GitHub Desktop.
Buildless Angular 21 - https://gist.run/?id=29c37ae5fb09d7c72fbbbd1bbab1e7f9
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Angular 21</title> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "@angular/core": "https://cdn.jsdelivr.net/npm/@angular/core@21/fesm2022/core.mjs", | |
| "@angular/core/primitives/signals": "https://cdn.jsdelivr.net/npm/@angular/core@21/fesm2022/primitives-signals.mjs", | |
| "@angular/core/primitives/event-dispatch": "https://cdn.jsdelivr.net/npm/@angular/core@21/fesm2022/primitives-event-dispatch.mjs", | |
| "@angular/core/primitives/di": "https://cdn.jsdelivr.net/npm/@angular/core@21/fesm2022/primitives-di.mjs", | |
| "@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@angular/platform-browser@21/fesm2022/platform-browser.mjs", | |
| "@angular/compiler": "https://cdn.jsdelivr.net/npm/@angular/compiler@21/fesm2022/compiler.mjs", | |
| "@angular/common": "https://cdn.jsdelivr.net/npm/@angular/common@21/fesm2022/common.mjs", | |
| "@angular/common/http": "https://cdn.jsdelivr.net/npm/@angular/common@21/fesm2022/http.mjs", | |
| "@angular/forms": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/fesm2022/forms.mjs", | |
| "@angular/forms/signals": "https://cdn.jsdelivr.net/npm/@angular/forms@21/fesm2022/signals.mjs", | |
| "@angular/router": "https://cdn.jsdelivr.net/npm/@angular/router@21/fesm2022/router.mjs", | |
| "rxjs": "https://cdn.jsdelivr.net/npm/rxjs@7/+esm", | |
| "rxjs/operators": "https://cdn.jsdelivr.net/npm/rxjs@7/operators/+esm" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <app-root></app-root> | |
| <script type="module"> | |
| import "@angular/compiler"; // Required for JIT | |
| import { Component, signal } from "@angular/core"; | |
| import { bootstrapApplication } from "@angular/platform-browser"; | |
| import { RouterLink, RouterOutlet, provideRouter, withHashLocation } from "@angular/router"; | |
| import { form, Field } from "@angular/forms/signals"; | |
| const _decorate = (fns, target) => fns.reduceRight((result, fn) => fn(result) || result, target); | |
| export const RootComponent = _decorate( | |
| [ | |
| Component({ | |
| selector: "app-root", | |
| imports: [RouterLink, RouterOutlet], | |
| template: ` | |
| <nav> | |
| <a routerLink="">Home</a> | | |
| <a routerLink="contact">Contact</a> | |
| </nav> | |
| <router-outlet></router-outlet> | |
| `, | |
| }), | |
| ], | |
| class {} | |
| ); | |
| export const HomeComponent = _decorate( | |
| [ | |
| Component({ | |
| selector: "app-home", | |
| template: ` | |
| <h1>{{ title }}</h1> | |
| <button (click)="updateMessage()"> | |
| {{ message }} | |
| </button> | |
| `, | |
| }), | |
| ], | |
| class { | |
| title = "Hello Angular 21!"; | |
| message = "Click Me"; | |
| updateMessage() { | |
| this.message += "!"; | |
| } | |
| } | |
| ); | |
| export const ContactComponent = _decorate( | |
| [ | |
| Component({ | |
| imports: [Field], | |
| selector: "app-contact", | |
| template: ` | |
| <h2>Contact Page</h2> | |
| <form (submit)="onSubmit($event)"> | |
| <input type="email" placeholder="Email" [field]="contactForm.email"><br /> | |
| <input placeholder="Message" [field]="contactForm.message"><br /> | |
| <button type="submit">Submit</button> | |
| </form> | |
| `, | |
| }), | |
| ], | |
| class { | |
| contact = signal({ | |
| email: '', | |
| message: '' | |
| }); | |
| contactForm = form(this.contact); | |
| onSubmit(event) { | |
| event.preventDefault(); | |
| console.log(this.contact()); | |
| } | |
| } | |
| ); | |
| const routes = [ | |
| { path: "", title: "Home", component: HomeComponent }, | |
| { path: "contact", title: "Contact", component: ContactComponent }, | |
| ]; | |
| const providers = [provideRouter(routes, withHashLocation())]; | |
| const appRef = await bootstrapApplication(RootComponent, { providers }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment