create-analog 2.0.0-alpha.10 → 2.0.0-alpha.12

package/index.js

@@ -42,7 +42,7 @@ const HIGHLIGHTERS = {
     highlighter: 'withPrismHighlighter',
     entryPoint: 'prism-highlighter',
     dependencies: {
-      'marked-highlight': '^2.0.1',
+      'marked-highlight': '^2.2.1',
       prismjs: '^1.29.0',
     },
   },
@@ -50,7 +50,7 @@ const HIGHLIGHTERS = {
     highlighter: 'withShikiHighlighter',
     entryPoint: 'shiki-highlighter',
     dependencies: {
-      marked: '^7.0.0',
+      marked: '^15.0.7',
       'marked-shiki': '^1.1.0',
       shiki: '^1.6.1',
     },
@@ -214,6 +214,13 @@ async function init() {
     addTailwindDirectives(write, filesDir);
   }
 
+  replacePlaceholders(root, 'vite.config.ts', {
+    __TAILWIND_IMPORT__: !skipTailwind
+      ? `\nimport tailwindcss from '@tailwindcss/vite';`
+      : '',
+    __TAILWIND_PLUGIN__: !skipTailwind ? '\n    tailwindcss()' : '',
+  });
+
   const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent);
   const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
   const pkg = JSON.parse(
@@ -376,11 +383,11 @@ function addTailwindDependencies(pkg) {
 
 function addYarnDevDependencies(pkg, template) {
   // v18
-  if (template === 'latest' || template === 'blog') {
-    pkg.devDependencies['@nx/angular'] = '^19.1.0';
-    pkg.devDependencies['@nx/devkit'] = '^19.1.0';
-    pkg.devDependencies['@nx/vite'] = '^19.1.0';
-    pkg.devDependencies['nx'] = '^19.1.0';
+  if (template === 'latest' || template === 'blog' || template === 'minimal') {
+    pkg.devDependencies['@nx/angular'] = '^21.0.0';
+    pkg.devDependencies['@nx/devkit'] = '^21.0.0';
+    pkg.devDependencies['@nx/vite'] = '^21.0.0';
+    pkg.devDependencies['nx'] = '^21.0.0';
   } else if (template === 'angular-v17') {
     pkg.devDependencies['@angular-devkit/build-angular'] = '^17.2.0';
   }
@@ -434,10 +441,10 @@ function setComponentFormat(root, filesDir, write, template, useAnalogSFC) {
     __APP_COMPONENT__: useAnalogSFC ? 'App' : 'AppComponent',
     __APP_COMPONENT_IMPORT__: useAnalogSFC
       ? "import App from './app/app-root.ag';"
-      : "import { AppComponent } from './app/app.component';",
+      : "import { AppComponent } from './app/app';",
   });
 
-  const cmpForDelete = useAnalogSFC ? 'app.component' : 'app-root';
+  const cmpForDelete = useAnalogSFC ? 'app' : 'app-root';
   const deleteExt = useAnalogSFC ? 'ts' : 'ag';
   deleteFiles(root, [
     useAnalogSFC ? `src/app/${cmpForDelete}.ts` : `src/app/${cmpForDelete}.ag`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-analog",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.12",
   "type": "module",
   "license": "MIT",
   "author": "Brandon Roberts",

package/template-angular-v16/package.json

@@ -15,8 +15,8 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.10",
-    "@analogjs/router": "^2.0.0-alpha.10",
+    "@analogjs/content": "^2.0.0-alpha.12",
+    "@analogjs/router": "^2.0.0-alpha.12",
     "@angular/animations": "^16.2.0",
     "@angular/common": "^16.2.0",
     "@angular/compiler": "^16.2.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.10",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.10",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.10",
+    "@analogjs/platform": "^2.0.0-alpha.12",
+    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.12",
+    "@analogjs/vitest-angular": "^2.0.0-alpha.12",
     "@angular-devkit/build-angular": "^16.2.0",
     "@angular/cli": "^16.2.0",
     "@angular/compiler-cli": "^16.2.0",

package/template-angular-v17/package.json

@@ -15,8 +15,8 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.10",
-    "@analogjs/router": "^2.0.0-alpha.10",
+    "@analogjs/content": "^2.0.0-alpha.12",
+    "@analogjs/router": "^2.0.0-alpha.12",
     "@angular/animations": "^17.2.0",
     "@angular/common": "^17.2.0",
     "@angular/compiler": "^17.2.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.10",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.10",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.10",
+    "@analogjs/platform": "^2.0.0-alpha.12",
+    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.12",
+    "@analogjs/vitest-angular": "^2.0.0-alpha.12",
     "@angular-devkit/build-angular": "^17.2.0",
     "@angular/cli": "^17.2.0",
     "@angular/compiler-cli": "^17.2.0",

package/template-angular-v18/package.json

@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.10",
-    "@analogjs/router": "^2.0.0-alpha.10",
+    "@analogjs/content": "^2.0.0-alpha.12",
+    "@analogjs/router": "^2.0.0-alpha.12",
     "@angular/animations": "^18.0.0",
     "@angular/build": "^18.0.0",
     "@angular/common": "^18.0.0",
@@ -38,9 +38,9 @@
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.10",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.10",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.10",
+    "@analogjs/platform": "^2.0.0-alpha.12",
+    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.12",
+    "@analogjs/vitest-angular": "^2.0.0-alpha.12",
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
     "jsdom": "^22.0.0",

package/template-blog/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "engines": {
-    "node": ">=18.19.1"
+    "node": ">=20.19.1"
   },
   "scripts": {
     "ng": "ng",
@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.10",
-    "@analogjs/router": "^2.0.0-alpha.10",
+    "@analogjs/content": "^2.0.0-alpha.12",
+    "@analogjs/router": "^2.0.0-alpha.12",
     "@angular/animations": "^19.0.0",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
@@ -36,9 +36,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.10",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.10",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.10",
+    "@analogjs/platform": "^2.0.0-alpha.12",
+    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.12",
+    "@analogjs/vitest-angular": "^2.0.0-alpha.12",
     "@angular-devkit/build-angular": "^19.0.0",
     "@angular/build": "^19.0.0",
     "@angular/cli": "^19.0.0",

package/template-blog/src/app/app.config.ts

@@ -3,21 +3,26 @@ import {
   withFetch,
   withInterceptors,
 } from '@angular/common/http';
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideClientHydration } from '@angular/platform-browser';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZoneChangeDetection
+} from '@angular/core';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 import { provideFileRouter, requestContextInterceptor } from '@analogjs/router';
 import { provideContent, withMarkdownRenderer } from '@analogjs/content';
 import { __HIGHLIGHTER__ } from '@analogjs/content/__HIGHLIGHTER_ENTRY_POINT__';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideFileRouter(),
     provideHttpClient(
       withFetch(),
       withInterceptors([requestContextInterceptor])
     ),
-    provideClientHydration(),
+    provideClientHydration(withEventReplay()),
     provideContent(withMarkdownRenderer(), __HIGHLIGHTER__()),
   ],
 };

package/template-blog/src/app/{app.component.spec.ts → app.spec.ts}

@@ -2,7 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { provideLocationMocks } from '@angular/common/testing';
 
-import { AppComponent } from './app.component';
+import { AppComponent } from './app';
 
 describe('AppComponent', () => {
   beforeEach(async () => {

package/template-blog/src/app/{app.component.ts → app.ts}

@@ -3,7 +3,6 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [RouterLink, RouterOutlet],
   template: `
     <nav>

package/template-blog/src/app/pages/blog/[slug].page.ts

@@ -6,7 +6,6 @@ import PostAttributes from '../../post-attributes';
 
 @Component({
   selector: 'app-blog-post',
-  standalone: true,
   imports: [AsyncPipe, MarkdownComponent],
   template: `
     @if (post$ | async; as post) {

package/template-blog/src/app/pages/blog/index.page.ts

@@ -6,7 +6,6 @@ import PostAttributes from '../../post-attributes';
 
 @Component({
   selector: 'app-blog',
-  standalone: true,
   imports: [RouterLink],
   template: `
     <h1>Blog Archive</h1>

package/template-blog/src/test-setup.ts

@@ -1,12 +1,13 @@
+import '@angular/compiler';
 import '@analogjs/vitest-angular/setup-zone';
 
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing';
 import { getTestBed } from '@angular/core/testing';
 
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  BrowserTestingModule,
+  platformBrowserTesting()
 );

package/template-blog/tsconfig.json

@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -28,5 +27,8 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "references": [
+    { "path": "tsconfig.spec.json" }
+  ]
 }

package/template-blog/vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 
 import { defineConfig } from 'vite';
-import analog from '@analogjs/platform';
+import analog from '@analogjs/platform';__TAILWIND_IMPORT__
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -19,7 +19,7 @@ export default defineConfig(({ mode }) => ({
       prerender: {
         routes: ['/blog', '/blog/2022-12-27-my-first-post'],
       },__ANALOG_SFC_CONFIG__
-    }),
+    }),__TAILWIND_PLUGIN__
   ],
   test: {
     globals: true,

package/template-latest/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "engines": {
-    "node": ">=18.19.1"
+    "node": ">=20.19.1"
   },
   "scripts": {
     "ng": "ng",
@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.10",
-    "@analogjs/router": "^2.0.0-alpha.10",
+    "@analogjs/content": "^2.0.0-alpha.12",
+    "@analogjs/router": "^2.0.0-alpha.12",
     "@angular/animations": "^19.0.0",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
@@ -37,9 +37,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.10",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.10",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.10",
+    "@analogjs/platform": "^2.0.0-alpha.12",
+    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.12",
+    "@analogjs/vitest-angular": "^2.0.0-alpha.12",
     "@angular-devkit/build-angular": "^19.0.0",
     "@angular/build": "^19.0.0",
     "@angular/cli": "^19.0.0",

package/template-latest/src/app/app.config.ts

@@ -3,18 +3,23 @@ import {
   withFetch,
   withInterceptors,
 } from '@angular/common/http';
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideClientHydration } from '@angular/platform-browser';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZoneChangeDetection
+} from '@angular/core';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 import { provideFileRouter, requestContextInterceptor } from '@analogjs/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideFileRouter(),
     provideHttpClient(
       withFetch(),
       withInterceptors([requestContextInterceptor])
     ),
-    provideClientHydration(),
+    provideClientHydration(withEventReplay()),
   ],
 };

package/template-latest/src/app/{app.component.spec.ts → app.spec.ts}

@@ -2,7 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { provideLocationMocks } from '@angular/common/testing';
 
-import { AppComponent } from './app.component';
+import { AppComponent } from './app';
 
 describe('AppComponent', () => {
   beforeEach(async () => {

package/template-latest/src/app/{app.component.ts → app.ts}

@@ -3,7 +3,6 @@ import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [RouterOutlet],
   template: `<router-outlet />`,
   styles: `

package/template-latest/src/app/pages/analog-welcome.ts

@@ -0,0 +1,263 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-analog-welcome',
+  styles: [
+    `
+      :host {
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+          'Noto Color Emoji';
+        display: flex;
+        padding: 2rem 1rem 8rem;
+        flex-direction: column;
+        background: rgb(250 250 250);
+        height: 100%;
+      }
+      a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+      .main {
+        margin: 0 auto;
+        flex: 1 1 0;
+      }
+      .intro-section {
+        padding-top: 1.5rem;
+        padding-bottom: 2rem;
+      }
+      .intro-section > * + * {
+        margin-top: 1.5rem;
+      }
+      @media (min-width: 768px) {
+        .intro-section {
+          padding-top: 2.5rem;
+          padding-bottom: 3rem;
+        }
+      }
+      @media (min-width: 1024px) {
+        .intro-section {
+          padding-top: 8rem;
+          padding-bottom: 8rem;
+        }
+      }
+      .intro-container {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        gap: 1rem;
+        align-items: center;
+        max-width: 64rem;
+      }
+      .intro-logo {
+        height: 3rem;
+        width: 3rem;
+      }
+      .intro-badge {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding: 0.375rem 1rem;
+        background-color: rgb(228 228 231);
+        border-radius: 1rem;
+      }
+      .intro-heading {
+        margin: 0;
+        font-weight: 500;
+      }
+
+      @media (min-width: 640px) {
+        .intro-heading {
+          font-size: 3rem;
+          line-height: 1;
+        }
+      }
+      @media (min-width: 768px) {
+        .intro-heading {
+          font-size: 3.75rem;
+          line-height: 1;
+        }
+      }
+      @media (min-width: 1024px) {
+        .intro-heading {
+          font-size: 4.5rem;
+          line-height: 1;
+        }
+      }
+      .intro-analog {
+        color: #dd0031;
+      }
+      .intro-description {
+        line-height: 1.5;
+        max-width: 42rem;
+        margin: 0;
+      }
+
+      @media (min-width: 640px) {
+        .intro-description {
+          line-height: 2rem;
+          font-size: 1.25rem;
+        }
+      }
+      .btn-container > * + * {
+        margin-left: 1rem;
+      }
+      .darkBtn {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        color: rgb(250 250 250);
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        background-color: rgb(9 9 11);
+        border-radius: 0.375rem;
+        justify-content: center;
+        align-items: center;
+        height: 2.75rem;
+        cursor: pointer;
+        display: inline-flex;
+      }
+      .darkBtn:hover {
+        background-color: rgb(9 9 11 / 0.9);
+      }
+      .lightBtn {
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        color: rgb(24, 24, 27);
+        background: rgb(250 250 250);
+        font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        border-radius: 0.375rem;
+        border: 1px solid rgb(229, 231, 235);
+        justify-content: center;
+        align-items: center;
+        height: 2.75rem;
+        display: inline-flex;
+        cursor: pointer;
+      }
+      .lightBtn:hover {
+        background-color: rgb(244 244 245);
+      }
+      .counter-section {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+      }
+
+      @media (min-width: 768px) {
+        .counter-section {
+          padding-top: 3rem;
+          padding-bottom: 3rem;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .counter-section {
+          padding-top: 6rem;
+          padding-bottom: 6rem;
+        }
+      }
+      .counter-container {
+        text-align: center;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        max-width: 58rem;
+        display: flex;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .counter-heading {
+        color: #dd0031;
+        line-height: 1.1;
+        font-weight: 500;
+        font-size: 1.875rem;
+        margin: 0;
+      }
+      .counter-description {
+        line-height: 1.5;
+        max-width: 85%;
+        margin: 0;
+      }
+
+      @media (min-width: 640px) {
+        .counter-description {
+          line-height: 1.75rem;
+          font-size: 1.125rem;
+        }
+      }
+      .count {
+        margin-left: 0.25rem;
+        font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+      }
+    `,
+  ],
+  template: `
+    <main class="main">
+      <section class="intro-section">
+        <div class="intro-container">
+          <img
+            class="intro-logo"
+            src="https://analogjs.org/img/logos/analog-logo.svg"
+            alt="AnalogJs logo. Two red triangles and a white analog wave in front"
+          />
+          <a
+            class="intro-badge"
+            target="_blank"
+            href="https://twitter.com/analogjs"
+            >Follow along on Twitter</a
+          >
+          <h1 class="intro-heading">
+            <span class="intro-analog">Analog.</span> The fullstack Angular
+            meta-framework
+          </h1>
+          <p class="intro-description">
+            Analog is for building applications and websites with Angular.
+            <br />Powered by Vite.
+          </p>
+          <div class="btn-container">
+            <a class="darkBtn" href="https://analogjs.org">Read the docs</a>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              class="lightBtn"
+              href="https://github.com/analogjs/analog"
+              >Star on GitHub</a
+            >
+          </div>
+        </div>
+      </section>
+    <section id="counter-demo" class="section">
+        <div class="counter-container">
+          <h2 class="counter-heading">Counter</h2>
+          <p class="counter-description">
+            This is a simple interactive counter. Powered by Angular.
+          </p>
+          <button (click)="increment()" class="lightBtn">
+            Count: <span class="count">{{ count }}</span>
+          </button>
+        </div>
+      </section>
+    </main>
+  `,
+})
+export class AnalogWelcome {
+  count = 0;
+  increment() {
+    this.count++;
+  }
+}

package/template-latest/src/app/pages/index.page.ag

@@ -1,53 +1,7 @@
 <script lang="ts">
-  import { signal } from '@angular/core';
-
-  const count = signal(0);
-
-  function increment() {
-    this.count.update((count) => count + 1);
-  }
+  import AnalogWelcome from './analog-welcome' with { analog: 'imports '};
 </script>
 
 <template>
-  <div>
-    <a href="https://analogjs.org/" target="_blank">
-      <img alt="Analog Logo" class="logo analog" src="/analog.svg" />
-    </a>
-  </div>
-
-  <h2>Analog</h2>
-
-  <h3>The fullstack meta-framework for Angular!</h3>
-
-  <div class="card">
-    <button type="button" (click)="increment()">Count {{ count() }}</button>
-  </div>
-
-  <p class="read-the-docs">
-    <a href="https://analogjs.org" target="_blank">Docs</a> |
-    <a href="https://github.com/analogjs/analog" target="_blank">GitHub</a> |
-    <a href="https://github.com/sponsors/brandonroberts" target="_blank">
-      Sponsor
-    </a>
-  </p>
+  <AnalogWelcome />
 </template>
-
-<style>
-  .logo {
-    will-change: filter;
-  }
-
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-
-  .read-the-docs > * {
-    color: #fff;
-  }
-
-  @media (prefers-color-scheme: light) {
-    .read-the-docs > * {
-      color: #213547;
-    }
-  }
-</style>

package/template-latest/src/app/pages/index.page.ts

@@ -1,55 +1,13 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
+
+import { AnalogWelcome } from './analog-welcome';
 
 @Component({
   selector: 'app-home',
-  standalone: true,
+  imports: [AnalogWelcome],
   template: `
-    <div>
-      <a href="https://analogjs.org/" target="_blank">
-        <img alt="Analog Logo" class="logo analog" src="/analog.svg" />
-      </a>
-    </div>
-
-    <h2>Analog</h2>
-
-    <h3>The fullstack meta-framework for Angular!</h3>
-
-    <div class="card">
-      <button type="button" (click)="increment()">Count {{ count() }}</button>
-    </div>
-
-    <p class="read-the-docs">
-      <a href="https://analogjs.org" target="_blank">Docs</a> |
-      <a href="https://github.com/analogjs/analog" target="_blank">GitHub</a> |
-      <a href="https://github.com/sponsors/brandonroberts" target="_blank">
-        Sponsor
-      </a>
-    </p>
-  `,
-  styles: `
-    .logo {
-      will-change: filter;
-    }
-
-    .logo:hover {
-      filter: drop-shadow(0 0 2em #646cffaa);
-    }
-
-    .read-the-docs > * {
-      color: #fff;
-    }
-
-    @media (prefers-color-scheme: light) {
-      .read-the-docs > * {
-        color: #213547;
-      }
-    }
+     <app-analog-welcome/>
   `,
 })
 export default class HomeComponent {
-  count = signal(0);
-
-  increment() {
-    this.count.update((count) => count + 1);
-  }
 }

package/template-latest/src/styles.css

@@ -1,80 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
+html, body {
+  display: block;
+  height: 100%;
 }

package/template-latest/src/test-setup.ts

@@ -1,12 +1,13 @@
+import '@angular/compiler';
 import '@analogjs/vitest-angular/setup-zone';
 
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing';
 import { getTestBed } from '@angular/core/testing';
 
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  BrowserTestingModule,
+  platformBrowserTesting()
 );

package/template-latest/tsconfig.json

@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -28,5 +27,8 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "references": [
+    { "path": "tsconfig.spec.json" }
+  ]
 }

package/template-latest/vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 
 import { defineConfig } from 'vite';
-import analog from '@analogjs/platform';
+import analog from '@analogjs/platform';__TAILWIND_IMPORT__
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -11,7 +11,9 @@ export default defineConfig(({ mode }) => ({
   resolve: {
     mainFields: ['module'],
   },
-  plugins: [analog(__ANALOG_SFC_CONFIG__)],
+  plugins: [
+    analog(__ANALOG_SFC_CONFIG__),__TAILWIND_PLUGIN__
+  ],
   test: {
     globals: true,
     environment: 'jsdom',

package/template-minimal/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "engines": {
-    "node": ">=18.19.1"
+    "node": ">=20.19.1"
   },
   "scripts": {
     "ng": "ng",
@@ -15,8 +15,8 @@
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^2.0.0-alpha.10",
-    "@analogjs/router": "^2.0.0-alpha.10",
+    "@analogjs/content": "^2.0.0-alpha.12",
+    "@analogjs/router": "^2.0.0-alpha.12",
     "@angular/animations": "^19.0.0",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
@@ -37,9 +37,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/platform": "^2.0.0-alpha.10",
-    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.10",
-    "@analogjs/vitest-angular": "^2.0.0-alpha.10",
+    "@analogjs/platform": "^2.0.0-alpha.12",
+    "@analogjs/vite-plugin-angular": "^2.0.0-alpha.12",
+    "@analogjs/vitest-angular": "^2.0.0-alpha.12",
     "@angular-devkit/build-angular": "^19.0.0",
     "@angular/build": "^19.0.0",
     "@angular/cli": "^19.0.0",

package/template-minimal/src/app/app.config.ts

@@ -3,18 +3,23 @@ import {
   withFetch,
   withInterceptors,
 } from '@angular/common/http';
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideClientHydration } from '@angular/platform-browser';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZoneChangeDetection
+} from '@angular/core';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 import { provideFileRouter, requestContextInterceptor } from '@analogjs/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideFileRouter(),
     provideHttpClient(
       withFetch(),
       withInterceptors([requestContextInterceptor])
     ),
-    provideClientHydration(),
+    provideClientHydration(withEventReplay()),
   ],
 };

package/template-minimal/src/app/{app.component.ts → app.ts}

@@ -3,7 +3,6 @@ import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [RouterOutlet],
   template: `<router-outlet />`,
 })

package/template-minimal/src/app/pages/index.page.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  standalone: true,
   template: `
     <h2>Analog</h2>
 

package/template-minimal/vite.config.ts

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 
 import { defineConfig } from 'vite';
-import analog from '@analogjs/platform';
+import analog from '@analogjs/platform';__TAILWIND_IMPORT__
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -17,7 +17,7 @@ export default defineConfig(({ mode }) => ({
       static: true,
       prerender: {
         routes: [],
-      },__ANALOG_SFC_CONFIG__
-    }),
+      },__ANALOG_SFC_CONFIG__,
+    }),__TAILWIND_PLUGIN__
   ],
 }));