Starter project to test out Angular 20.0.1
https://newmediapilot.github.io/npm-angular-starter/my-app/browser/
npm run start
npm run deploy
AngularRouter
+routerLink
@defer
prefetch strategy for*.page.ts
- Composites, Primitives
components/*.*.ts
components/core/*.*.ts
- Layout, Content
pages/{page}.*.ts
pages/{page}/{page}.content.*.ts
(minimum 1s;)
- minimum time we hold loader onscreen (to prevent flash)(after 100ms;)
- time before we show laoder onscreen (placeholder stage)@defer (on hover)
pre-fetch on hover of #id declaration, ie a nav@defer (on immediate)
after, minimum, when
are ignored (max speed)@defer (when condition)
conditional expression eg. whenthis.ready
(data dependent)
- NgModule-based dependencies are not deferred and are included in the eagerly loaded bundle.
- ie. NgModule deps add to the initial perceivable load time (deprecation maybe)
- Forbidden elements;
ng-content
,router-outlet
; no dynamic stuff - This method requires declared components which are part of your
import
- Walks down the import tree of each node; delegates
async import
- That becomes an automatic preloader
<hoc-component>
// Load with skeleton flow
@defer {
<large-component/>
} @loading (after 100ms; minimum 1s) {
<img alt="loading large component..." src="loading.gif"/>
} @placeholder {
<p>Placeholder content (empty state)</p>
} @error {
<p>Failed to load large component.</p>
}
// Prefetch on hover
@defer (on hover) {
<large-component/>
} @placeholder {
<div>Large component placeholder</div>
}
// Prefetch on arrive
@defer (on interaction; prefetch on idle) {
<large-cmp/>
} @placeholder {
<div>Large component placeholder</div>
}
</hoc-component>
@defer {
<!-- "await import("./index/links.content") -->
<!-- └─ promise.*" -->
<links-content/>
} @loading {
<!-- "promise.pending"-->
<main-preloader-loading/>
} @placeholder (minimum 3s) {
<!-- "promise.pending?"-->
<main-preloader-placeholder/>
} @error {
<!-- "promise.catch"-->
<main-preloader-error/>
}
Tool | URL | Description | Notes |
---|---|---|---|
Akita | https://opensource.salesforce.com/akita/ | Reactive state (agnostic) | Nice API but older |
NGXS | https://www.npmjs.com/package/@ngxs/store | Angular specific state | Simple shorthand API, dispatch() returns action interface var {greet} = dispatch(Greet) && greet('message') |
Daisy UI | https://daisyui.com/ | A UI component library based on Tailwind | Similar to Radix & Skeleton |
Angular Defer | https://angular.dev/guide/templates/defer | Lazy loading components | Code Splitting where "Components, directives, pipes, and any component CSS styles can be deferred when loading an application." |
Feature Creator | https://ngrx.io/guide/store/feature-creators | Analogous to createSlice |
Code Splitting where "Components, directives, pipes, and any component CSS styles can be deferred when loading an application." |
AI was used to generate
db.json