fix(create-analog): register router and initial client/server routes (#…

…152)
analogjs · Nov 18, 2022 · 11288d0 · 11288d0
1 parent 5f11295
commit 11288d0
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 73 deletions.
diff --git a/packages/create-analog/template-angular-v14/src/app/app.component.spec.ts b/packages/create-analog/template-angular-v14/src/app/app.component.spec.ts
@@ -5,29 +5,13 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        AppComponent
-      ]
+      imports: [RouterTestingModule, AppComponent],
     }).compileComponents();
   });
-  
+
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have an initial count of 0`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.count).toEqual(0);
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Vite + Angular');
-  });
 });
diff --git a/packages/create-analog/template-angular-v14/src/app/app.component.ts b/packages/create-analog/template-angular-v14/src/app/app.component.ts
@@ -1,39 +1,11 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  template: `
-    <div>
-      <a href="https://vitejs.dev" target="_blank">
-        <img src="/vite.svg" class="logo" alt="Vite logo" />
-      </a>
-      <a href="https://angular.io/" target="_blank">
-        <img
-          alt="Angular Logo"
-          class="logo angular"
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-        />
-      </a>
-    </div>
-
-    <h1>Vite + Angular</h1>
-
-    <div class="card">
-      <button type="button" (click)="increment()">Count {{ count }}</button>
-    </div>
-
-    <p>
-      Check out
-      <a href="https://github.com/analogjs/analog#readme" target="_blank"
-        >Analog</a
-      >, the fullstack meta-framework for Angular powered by Vite!
-    </p>
-
-    <p class="read-the-docs">
-      Click on the Vite and Angular logos to learn more.
-    </p>
-  `,
+  imports: [RouterOutlet],
+  template: ` <router-outlet></router-outlet> `,
   styles: [
     `
       :host {
@@ -42,28 +14,7 @@ import { Component } from '@angular/core';
         padding: 2rem;
         text-align: center;
       }
-
-      .logo {
-        height: 6em;
-        padding: 1.5em;
-        will-change: filter;
-      }
-      .logo:hover {
-        filter: drop-shadow(0 0 2em #646cffaa);
-      }
-      .logo.angular:hover {
-        filter: drop-shadow(0 0 2em #42b883aa);
-      }
-      .read-the-docs {
-        color: #888;
-      }
     `,
   ],
 })
-export class AppComponent {
-  count = 0;
-
-  increment() {
-    this.count++;
-  }
-}
+export class AppComponent {}
diff --git a/packages/create-analog/template-angular-v14/src/app/routes/index.ts b/packages/create-analog/template-angular-v14/src/app/routes/index.ts
@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  template: `
+    <div>
+      <a href="https://vitejs.dev" target="_blank">
+        <img src="/vite.svg" class="logo" alt="Vite logo" />
+      </a>
+      <a href="https://angular.io/" target="_blank">
+        <img
+          alt="Angular Logo"
+          class="logo angular"
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+        />
+      </a>
+    </div>
+
+    <h1>Vite + Angular</h1>
+
+    <div class="card">
+      <button type="button" (click)="increment()">Count {{ count }}</button>
+    </div>
+
+    <p>
+      Check out
+      <a href="https://github.com/analogjs/analog#readme" target="_blank"
+        >Analog</a
+      >, the fullstack meta-framework for Angular powered by Vite!
+    </p>
+
+    <p class="read-the-docs">
+      Click on the Vite and Angular logos to learn more.
+    </p>
+  `,
+  styles: [
+    `
+      .logo {
+        height: 6em;
+        padding: 1.5em;
+        will-change: filter;
+      }
+      .logo:hover {
+        filter: drop-shadow(0 0 2em #646cffaa);
+      }
+      .logo.angular:hover {
+        filter: drop-shadow(0 0 2em #42b883aa);
+      }
+      .read-the-docs {
+        color: #888;
+      }
+    `,
+  ],
+})
+export default class HomeComponent {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+}
diff --git a/packages/create-analog/template-angular-v14/src/main.ts b/packages/create-analog/template-angular-v14/src/main.ts
@@ -1,11 +1,14 @@
 import './polyfills';
 import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
+import { provideFileRouter } from '@analogjs/router';
 
 import { AppComponent } from './app/app.component';
 
 if (import.meta.env.PROD) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent);
+bootstrapApplication(AppComponent, {
+  providers: [provideFileRouter()],
+});
diff --git a/packages/create-analog/template-angular-v14/src/server/routes/v1/hello.ts b/packages/create-analog/template-angular-v14/src/server/routes/v1/hello.ts
@@ -0,0 +1,3 @@
+import { defineEventHandler } from 'h3';
+
+export default defineEventHandler(() => ({ message: 'Hello World' }));
diff --git a/packages/create-analog/template-angular-v14/src/styles.css b/packages/create-analog/template-angular-v14/src/styles.css
@@ -1,5 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-/* 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;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { defineEventHandler } from 'h3';

		export default defineEventHandler(() => ({ message: 'Hello World' }));