├── .editorconfig ├── .gitignore ├── .vscode ├── extensions.json ├── launch.json ├── settings.json └── tasks.json ├── README.md ├── angular.json ├── favicon.ico ├── index.html ├── package-lock.json ├── package.json ├── src ├── app │ ├── another-one.ng │ ├── app.component.ng │ ├── app.config.server.ts │ ├── app.config.ts │ ├── hello.ng │ └── highlight.ng ├── assets │ ├── .gitkeep │ ├── analog.svg │ └── vite.svg ├── main.server.ts ├── main.ts ├── server │ └── routes │ │ └── v1 │ │ └── hello.ts ├── styles.css ├── test.ts └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── vite.config.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | /.nx/cache 34 | .sass-cache/ 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | testem.log 39 | /typings 40 | 41 | # System files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:5173/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { 3 | "*.ng": "html", 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Analog App 2 | 3 | This project was generated with [Analog](https://analogjs.org), the fullstack meta-framework for Angular. 4 | 5 | ## Setup 6 | 7 | Run `npm install` to install the application dependencies. 8 | 9 | ## Development 10 | 11 | Run `npm start` for a dev server. Navigate to `http://localhost:5173/`. The application automatically reloads if you change any of the source files. 12 | 13 | ## Build 14 | 15 | Run `npm run build` to build the client/server project. The client build artifacts are located in the `dist/analog/public` directory. The server for the API build artifacts are located in the `dist/analog/server` directory. 16 | 17 | ## Test 18 | 19 | Run `npm run test` to run unit tests with [Vitest](https://vitest.dev). 20 | 21 | ## Community 22 | 23 | - Visit and Star the [GitHub Repo](https://github.com/analogjs/analog) 24 | - Join the [Discord](https://chat.analogjs.org) 25 | - Follow us on [Twitter](https://twitter.com/analogjs) 26 | - Become a [Sponsor](https://github.com/sponsors/brandonroberts) 27 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "my-app": { 7 | "projectType": "application", 8 | "root": "", 9 | "sourceRoot": "src", 10 | "prefix": "app", 11 | "architect": { 12 | "build": { 13 | "builder": "@analogjs/platform:vite", 14 | "options": { 15 | "configFile": "vite.config.ts", 16 | "main": "src/main.ts", 17 | "outputPath": "dist/client", 18 | "tsConfig": "tsconfig.app.json" 19 | }, 20 | "defaultConfiguration": "production", 21 | "configurations": { 22 | "development": { 23 | "mode": "development" 24 | }, 25 | "production": { 26 | "sourcemap": false, 27 | "mode": "production" 28 | } 29 | } 30 | }, 31 | "serve": { 32 | "builder": "@analogjs/platform:vite-dev-server", 33 | "defaultConfiguration": "development", 34 | "options": { 35 | "buildTarget": "my-app:build", 36 | "port": 5173 37 | }, 38 | "configurations": { 39 | "development": { 40 | "buildTarget": "my-app:build:development", 41 | "hmr": true 42 | }, 43 | "production": { 44 | "buildTarget": "my-app:build:production" 45 | } 46 | } 47 | }, 48 | "test": { 49 | "builder": "@analogjs/platform:vitest" 50 | } 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brandonroberts/analog-ng/39e9d15bc6f823d4c33d3778612e48c642a2a47a/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MyApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "analog-ng", 3 | "version": "0.0.0", 4 | "private": true, 5 | "engines": { 6 | "node": ">=18.13.0" 7 | }, 8 | "scripts": { 9 | "dev": "ng serve", 10 | "ng": "ng", 11 | "start": "npm run dev", 12 | "build": "ng build", 13 | "watch": "ng build --watch", 14 | "test": "ng test" 15 | }, 16 | "dependencies": { 17 | "@analogjs/content": "^0.2.30-beta.3", 18 | "@analogjs/router": "^0.2.30-beta.3", 19 | "@angular/animations": "^17.0.0", 20 | "@angular/common": "^17.0.0", 21 | "@angular/compiler": "^17.0.0", 22 | "@angular/core": "^17.0.0", 23 | "@angular/forms": "^17.0.0", 24 | "@angular/platform-browser": "^17.0.0", 25 | "@angular/platform-browser-dynamic": "^17.0.0", 26 | "@angular/platform-server": "^17.0.0", 27 | "@angular/router": "^17.0.0", 28 | "@nx/angular": "~17.1.0", 29 | "front-matter": "^4.0.2", 30 | "marked": "^5.0.2", 31 | "marked-gfm-heading-id": "^3.1.0", 32 | "marked-highlight": "^2.0.1", 33 | "mermaid": "^10.2.4", 34 | "prismjs": "^1.29.0", 35 | "rxjs": "~7.5.6", 36 | "tslib": "^2.4.0", 37 | "zone.js": "~0.14.0" 38 | }, 39 | "devDependencies": { 40 | "@analogjs/platform": "^0.2.30-beta.3", 41 | "@angular-devkit/build-angular": "^17.0.0", 42 | "@angular/cli": "^17.0.0", 43 | "@angular/compiler-cli": "^17.0.0", 44 | "@nx/vite": "~17.1.0", 45 | "jsdom": "^22.1.0", 46 | "nx": "~17.1.0", 47 | "typescript": "~5.2.0", 48 | "vite": "^4.4.8", 49 | "vitest": "^0.34.4" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/app/another-one.ng: -------------------------------------------------------------------------------- 1 | 10 | 11 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /src/app/app.component.ng: -------------------------------------------------------------------------------- 1 | 46 | 47 | 76 | 77 | 96 | -------------------------------------------------------------------------------- /src/app/app.config.server.ts: -------------------------------------------------------------------------------- 1 | import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; 2 | import { 3 | provideServerRendering, 4 | ɵSERVER_CONTEXT as SERVER_CONTEXT, 5 | } from '@angular/platform-server'; 6 | 7 | import { appConfig } from './app.config'; 8 | 9 | const serverConfig: ApplicationConfig = { 10 | providers: [ 11 | provideServerRendering(), 12 | { provide: SERVER_CONTEXT, useValue: 'ssr-analog' }, 13 | ], 14 | }; 15 | 16 | export const config = mergeApplicationConfig(appConfig, serverConfig); 17 | -------------------------------------------------------------------------------- /src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { provideHttpClient, withFetch } from '@angular/common/http'; 2 | import { ApplicationConfig } from '@angular/core'; 3 | import { provideClientHydration } from '@angular/platform-browser'; 4 | import { provideFileRouter } from '@analogjs/router'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [ 8 | provideFileRouter(), 9 | provideHttpClient(withFetch()), 10 | provideClientHydration(), 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /src/app/hello.ng: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /src/app/highlight.ng: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brandonroberts/analog-ng/39e9d15bc6f823d4c33d3778612e48c642a2a47a/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/analog.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main.server.ts: -------------------------------------------------------------------------------- 1 | import 'zone.js/node'; 2 | import '@angular/platform-server/init'; 3 | 4 | import { enableProdMode } from '@angular/core'; 5 | import { bootstrapApplication } from '@angular/platform-browser'; 6 | import { renderApplication } from '@angular/platform-server'; 7 | 8 | import { config } from './app/app.config.server'; 9 | import AppComponent from './app/app.component.ng'; 10 | 11 | if (import.meta.env.PROD) { 12 | enableProdMode(); 13 | } 14 | 15 | export function bootstrap() { 16 | return bootstrapApplication(AppComponent, config); 17 | } 18 | 19 | export default async function render(url: string, document: string) { 20 | const html = await renderApplication(bootstrap, { 21 | document, 22 | url, 23 | }); 24 | 25 | return html; 26 | } 27 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import 'zone.js'; 2 | import { bootstrapApplication } from '@angular/platform-browser'; 3 | 4 | import AppComponent from './app/app.component.ng'; 5 | import { appConfig } from './app/app.config'; 6 | 7 | bootstrapApplication(AppComponent, appConfig); 8 | -------------------------------------------------------------------------------- /src/server/routes/v1/hello.ts: -------------------------------------------------------------------------------- 1 | import { defineEventHandler } from 'h3'; 2 | 3 | export default defineEventHandler(() => ({ message: 'Hello World' })); 4 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | :root { 3 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 4 | font-size: 16px; 5 | line-height: 24px; 6 | font-weight: 400; 7 | 8 | color-scheme: light dark; 9 | color: rgba(255, 255, 255, 0.87); 10 | background-color: #242424; 11 | 12 | font-synthesis: none; 13 | text-rendering: optimizeLegibility; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | -webkit-text-size-adjust: 100%; 17 | } 18 | 19 | a { 20 | font-weight: 500; 21 | color: #646cff; 22 | text-decoration: inherit; 23 | } 24 | a:hover { 25 | color: #535bf2; 26 | } 27 | 28 | body { 29 | margin: 0; 30 | display: flex; 31 | place-items: center; 32 | min-width: 320px; 33 | min-height: 100vh; 34 | } 35 | 36 | h1 { 37 | font-size: 3.2em; 38 | line-height: 1.1; 39 | } 40 | 41 | button { 42 | border-radius: 8px; 43 | border: 1px solid transparent; 44 | padding: 0.6em 1.2em; 45 | font-size: 1em; 46 | font-weight: 500; 47 | font-family: inherit; 48 | background-color: #1a1a1a; 49 | cursor: pointer; 50 | transition: border-color 0.25s; 51 | } 52 | button:hover { 53 | border-color: #646cff; 54 | } 55 | button:focus, 56 | button:focus-visible { 57 | outline: 4px auto -webkit-focus-ring-color; 58 | } 59 | 60 | .card { 61 | padding: 2em; 62 | } 63 | 64 | @media (prefers-color-scheme: light) { 65 | :root { 66 | color: #213547; 67 | background-color: #ffffff; 68 | } 69 | a:hover { 70 | color: #747bff; 71 | } 72 | button { 73 | background-color: #f9f9f9; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | import '@analogjs/vite-plugin-angular/setup-vitest'; 2 | 3 | import { 4 | BrowserDynamicTestingModule, 5 | platformBrowserDynamicTesting, 6 | } from '@angular/platform-browser-dynamic/testing'; 7 | import { getTestBed } from '@angular/core/testing'; 8 | 9 | getTestBed().initTestEnvironment( 10 | BrowserDynamicTestingModule, 11 | platformBrowserDynamicTesting() 12 | ); 13 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // Uncomment the lines below to enable types for experimental .ng format support 4 | declare global { 5 | import type { Component, Directive, Pipe, Type } from '@angular/core'; 6 | 7 | interface Window { 8 | defineComponentMetadata: ( 9 | metadata: Omit< 10 | Component, 11 | | 'template' 12 | | 'templateUrl' 13 | | 'host' 14 | | 'standalone' 15 | | 'changeDetection' 16 | | 'styleUrls' 17 | | 'styleUrl' 18 | | 'styles' 19 | > 20 | ) => void; 21 | defineDirectiveMetadata: ( 22 | metadata: Omit 23 | ) => void; 24 | definePipeMetadata: (metadata: Omit) => void; 25 | } 26 | } 27 | 28 | declare module '*.ng' { 29 | const cmp: Type; 30 | export default cmp; 31 | } 32 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "composite": false, 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": ["src/main.ts", "src/main.server.ts"], 10 | "include": [ 11 | "src/**/*.d.ts", 12 | "src/app/routes/**/*.ts", 13 | "src/app/pages/**/*.page.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "downlevelIteration": true, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "node", 18 | "importHelpers": true, 19 | "target": "ES2022", 20 | "module": "ES2022", 21 | "lib": ["ES2022", "dom"], 22 | "useDefineForClassFields": false, 23 | "skipLibCheck": true 24 | }, 25 | "angularCompilerOptions": { 26 | "enableI18nLegacyMessageIdFormat": false, 27 | "strictInjectionParameters": true, 28 | "strictInputAccessModifiers": true, 29 | "strictTemplates": true 30 | }, 31 | "references": [ 32 | { "path": "tsconfig.app.json" }, 33 | { "path": "tsconfig.spec.json" } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "composite": false, 6 | "outDir": "./out-tsc/spec", 7 | "target": "es2016", 8 | "types": ["node", "vitest/globals"] 9 | }, 10 | "files": ["src/test.ts"], 11 | "include": ["src/**/*.spec.ts", "src/**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { defineConfig } from 'vite'; 4 | import analog from '@analogjs/platform'; 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => ({ 8 | publicDir: 'src/assets', 9 | optimizeDeps:{ 10 | include: ['@angular/router'] 11 | }, 12 | build: { 13 | target: ['es2020'], 14 | }, 15 | resolve: { 16 | mainFields: ['module'], 17 | }, 18 | plugins: [analog({ 19 | vite: { 20 | experimental: { 21 | dangerouslySupportNgFormat: true, 22 | } 23 | } 24 | })], 25 | test: { 26 | globals: true, 27 | environment: 'jsdom', 28 | setupFiles: ['src/test.ts'], 29 | include: ['**/*.spec.ts'], 30 | reporters: ['default'], 31 | }, 32 | define: { 33 | 'import.meta.vitest': mode !== 'production', 34 | }, 35 | })); 36 | --------------------------------------------------------------------------------