analogjs / analog

The fullstack meta-framework for Angular. Powered by Vite and Nitro

Analog

Analog is the meta-framework for building applications and websites with Angular.

Similar to other meta-frameworks such as Next.JS, Nuxt, SvelteKit, Qwik City, and others, Analog provides a similar experience, building on top of Angular.

Documentation

Visit the docs at https://analogjs.org

Features

• Supports Vite/Vitest/Playwright
• Server and deployment integrations powered by Nitro
• File-based routing
• Server-side data fetching
• Support for using markdown as content routes
• Integrated API/server routes
• Hybrid SSR/SSG support
• Supports Angular CLI and Nx workspaces

Getting Started

Use your package manager of choice to create a new project

With npm:

npm create analog@latest

With pnpm:

pnpm create analog@latest

With Yarn:

yarn create analog@latest

With Bun:

bun create analog@latest

Follow the prompts to scaffold the project and start the development server.

Supporting Analog

• Star the GitHub Repo
• Join the Discord
• Follow us on Twitter
• Become a Sponsor

Sponsors

Contributing

Analog welcomes contributors! Please read the contributing doc for details.

Credits

The name was inspired by this project https://github.com/rrdelaney/Analog.

Contributors ✨

Thanks goes to these wonderful people for contributing to Analog (emoji key):

Brandon 💻 📖 🤔	Lars Gyrup Brink Nielsen 📖 ⚠️	Marko Stanimirović 🔧 🚇 📖 💻 🎨	Jason Hodges 📖	Tim Deschryver 🚇	Dale Nguyen 💻 🎨	Andrés Villanueva 📖 🌍
Umair Hafeez 🚇	Brandon Largeau 🚇	Maina Wycliffe 💻 🚇	Preston Lamb 💻 📖	Andrew Luca 💻	Chau Tran 💻 🚇	Simone 💻
Kyler Johnson 💻	Marc 📖 💻	himyjan 💻	Alex Kovalev 📖	Nuhman Pk 📖	Miloš Lajtman 💻	profanis 💻
Reece McDonald 📖	Matteo Pietro Dazzi 💻	Lukáš Matta 📖	Luciano 📖 💻	Robin Goetz 💻	Vadim Evseev 💻	Danny Koppenhagen 📖 💻
Tomasz Flis 📖	AdditionAddict 📖 💻	Sander 💻	Chris Perko 💻 📖	Christian Lüdemann 💻	Yasser 💻	Michał Dyrcz 💻
Otoniel Guajardo 📖	gergobergo 💻	saurajit 📖	Mircea Rilă 📖 🚇	Dominik 📖 💻 🚇	Henrique Custódia 📖	ISODA Yu 📖
Cynthia Iradukunda 📖	Drunkenpilot 📖 💻	Jeremy Hofer 📖 💻 🚇	Olalekan Raheem 📖	Luis Castro 💻 📖 🌍	Q 💻 📖	Glenn Latomme 📖
Justin Rassier 📖 💻 🚇	Matthieu Riegler 📖 🚇 💻	Ashley Hunter 💻	Artur Androsovych 💻 📖	Bjorn Lu 🚇	Omar BELKHODJA 💻	Deepak Rudra Paul 📖
Michael Avrukin 📖	Rafael Mestre 💻 📖 🚇	Santosh Yadav 📖	Tenessy 🚇 💻 ⚠️	Jad Chahed 📖 🌍	Gesiel Rosa 📖 🌍	Besim Gürbüz 📖 🌍
Lukas Nys 📖	Andreas Ländle 💻	Pascal Küsgen 📖	Alejandro Cuba Ruiz 📖 🌍	Shreyas0410 📖	Denis Bendrikov 📖	iancharlesdouglas 📖
Olivier Combe 💻	Sasidharan SD 📖	Ajit Panigrahi 💻	nepage-l 💻	Jeff 💻	Sammy Mohamed 📖	Josh Morony 💻
Ilir Beqiri 📖	Michał Nieruchalski 💻	Angel Fraga Parodi 🚇 💻	Alex 🚇 💻	Doguhan Uluca 📖	N. Can KIRIK 💻	ShPelles 📖
Pavan Kumar Jadda 💻	Esther White 💻	Michael Richter 💻	Rafael Triantafillidis 💻	Pooya Parsa 📖	Corbin Crutchley 📖	Leblanc Meneses 🚇 💻 📖
James Culveyhouse 💻	Naji 💻	Bitcollage 📖	Sonu Kapoor 💻	ezzabuzaid 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

analog's Issues

Building error of the repo on Windows

Which analog package(s) are the source of the bug?

I cloned the current state of the repo which contains:

• vite-plugin-angular 0.2.0-alpha.6
• create-analog 0.1.6

Is this a regression?

No.

Description

Hello,

I cloned the repo and wanted to build it with the command nx run-many --target build --all (npm run build).
It failed on nx run create-analog:build with the following error:

>  NX   ERROR: Something went wrong in run-commands - Command failed: mkdir -p dist/packages/create-analog && cp -r packages/create-analog dist/packages/create-analog

Pass --verbose to see the stacktrace.

I think it's because I'm on Windows with PowerShell 7. I tested with the Windows command version of mkdir and cp but it did not work either.
I'm not familiar yet with nx, so I'm maybe missing a step.

I can't provide a reproduction as it seems to be an OS specific problem.

Please provide the environment you discovered this bug in

OS: Windows 11
Node: 16.16.0
NPM: 8.17.0
Console/Terminal: PowerShell 7.2.6 (no WSL, no GitBash)
Angular: 14 (same as on the repo)

[CI]: Use GitHub Actions to automate workflows

using [email protected]: wont create the starter app using 'yarn create analog my-angular-app --template angular-v14'

exits install with the following error :

/Users/tylermorrow/.yarn/berry/cache/create-analog-npm-0.1.9-5e311e5024-7.zip/node_modules/create-analog/index.js:4
import fs from 'node:fs';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module.extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.external_module.Module._load (/private/var/folders/46/lr11m9ls3sn9ycwdgt5hqcch0000gn/T/xfs-8b2d5a5b/dlx-12581/.pnp.js:4980:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47

[BUG] vite optimize error

Please provide the environment you discovered this bug in.

You just need to create a new analog project on stackblitz and you will face the problem (use the link from de readme)

Here is a repro:

https://stackblitz.com/edit/github-cjjxe9

Which area/package is the issue in?

create-analog

Description

Since #76, there is an error on the postinstall script vite optimize.

If I revert the PR I will face back the problem (#75) that should've been fixed by the PR.

Please provide the exception or error you saw

PS D:\GitHub\analog\analog-project> npm i

> [email protected] postinstall
> vite optimize

X [ERROR] [plugin angular-compiler] TS2593: Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add 'jest' or 'mocha' to the types field in your tsconfig.

    src/app/app.component.spec.ts:5:0:
      5 │ describe('AppComponent', () => {
        ╵ ~~~~~~~~

X [ERROR] [plugin angular-compiler] TS2304: Cannot find name 'beforeEach'.

    src/app/app.component.spec.ts:6:2:
      6 │   beforeEach(async () => {
        ╵   ~~~~~~~~~~

X [ERROR] [plugin angular-compiler] TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add 'jest' or 'mocha' to the types field in your tsconfig.

    src/app/app.component.spec.ts:15:2:
      15 │   it('should create the app', () => {
         ╵   ~~

X [ERROR] [plugin angular-compiler] TS2304: Cannot find name 'expect'.

    src/app/app.component.spec.ts:18:4:
      18 │     expect(app).toBeTruthy();
         ╵     ~~~~~~

X [ERROR] [plugin angular-compiler] TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add 'jest' or 'mocha' to the types field in your tsconfig.

    src/app/app.component.spec.ts:21:2:
      21 │   it(`should have an initial count of 0`, () => {
         ╵   ~~

X [ERROR] [plugin angular-compiler] TS2304: Cannot find name 'expect'.

    src/app/app.component.spec.ts:24:4:
      24 │     expect(app.count).toEqual(0);
         ╵     ~~~~~~

X [ERROR] [plugin angular-compiler] TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add 'jest' or 'mocha' to the types field in your tsconfig.

    src/app/app.component.spec.ts:27:2:
      27 │   it('should render title', () => {
         ╵   ~~

X [ERROR] [plugin angular-compiler] TS2304: Cannot find name 'expect'.

src/app/app.component.spec.ts:18:4: ERROR: [plugin: angular-compiler] TS2304: Cannot find name 'expect'.
src/app/app.component.spec.ts:21:2: ERROR: [plugin: angular-compiler] TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add 'jest' or 'mocha' to the types field in your tsconfig.
...
    at failureErrorWithLog (D:\GitHub\analog\analog-project\node_modules\vite\node_modules\esbuild\lib\main.js:1624:15)
    at D:\GitHub\analog\analog-project\node_modules\vite\node_modules\esbuild\lib\main.js:1266:28
    at processTicksAndRejections (node:internal/process/task_queues:96:5)npm ERR! code 1
npm ERR! path D:\GitHub\analog\analog-project
npm ERR! command failednpm ERR! command C:\Windows\system32\cmd.exe /d /s /c vite optimize

npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\Yberion\AppData\Local\npm-cache\_logs\2022-09-03T20_50_41_221Z-debug-0.log
PS D:\GitHub\analog\analog-project>

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

docs: add usage for angular component in mdx

Which scope/s are relevant/related to the feature request?

Docs

Information

Astro has an integration for mdx and I wanted to use an Angular component in the mdx file.
I couldn't find anything about mdx in docs for @analogjs/astro-angular.

Here is how it worked for me:

1. You need @astrojs/mdx and @analogjs/astro-angular installed and configured in astro.config.mjs

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import angular from "@analogjs/astro-angular";

// https://astro.build/config
export default defineConfig({
  site: "https://example.com",
  integrations: [mdx(), angular()]
});

2. Create an Angular component (e.g. src/components/hello.component.ts)

import { NgIf } from "@angular/common";
import { Component, Input } from "@angular/core";

@Component({
  selector: "app-hello",
  standalone: true,
  imports: [NgIf],
  template: `
    <p>Hello from Angular!!</p>

    <p *ngIf="show">{{ helpText }}</p>

    <button (click)="toggle()">Toggle</button>
  `,
})
export class HelloComponent {
  @Input() helpText = "help";

  show = false;

  toggle() {
    this.show = !this.show;
  }
}

3. Open/Create a .mdx file (e.g. pages/blog/using-mdx.mdx) and import the component below the front matter.

---
layout: "../../layouts/BlogPost.astro"
title: "Using MDX"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 02 2022"
heroImage: "/placeholder-hero.jpg"
---

import { HelloComponent } from "../../components/hello.component";

<HelloComponent />

The Angular component is rendered correctly. To make it interactive add a client directive client:visible.

---
layout: "../../layouts/BlogPost.astro"
title: "Using MDX"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 02 2022"
heroImage: "/placeholder-hero.jpg"
---

import { HelloComponent } from "../../components/hello.component";

<HelloComponent client:visible />

An error occurred after adding the client directive and the component wasn't interactive.

TypeError: Failed to fetch dynamically imported module: http://localhost:3000/@fs/Users/m/Dev/wip/astro-analog/src/components/hello.component

Solution is to add ts suffix to the component import.

---
layout: "../../layouts/BlogPost.astro"
title: "Using MDX"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 02 2022"
heroImage: "/placeholder-hero.jpg"
---

+import { HelloComponent } from "../../components/hello.component.ts";
import { HelloComponent } from "../../components/hello.component";

<HelloComponent client:visible />

Now the error is gone, component loaded properly and interactive.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[FEAT]: Add support for Vitest to Vite Plugin

• Use tsconfig.spec.json when NODE_ENV is test
• Invalid source file cache on each transform
• Build/analyze TypeScript files on each transform

[DOCS]: Spin up docs site

Build docs site with:

• Project overview
• Install instructions
• Contributing
• Sponsoring

Options

• Docusaurus
• Hand-rolled
• Other?

It will be hosted on analogjs.org

[REPO]: Automate publishing of packages

The Analog packages are versioned independently and this would automate the versioning and release of each package based on most recent commits.

Not sure if this would also include generating an updated changelog for each package. Ideally this could be triggered through a protected GitHub Action also

[DOCS] fix buttons styling on mobile

CTA on mobile is not responsive

Current Behaviour

Expect Behaviour

CTA buttons should be responsive on mobile

[DOCS]: Correct URL for commit samples

Currently inside the Contributing.md file the URL for additional commit samples points to https://github.com/analogjs/analog/commits/master which returns a 404.

It should point to https://github.com/analogjs/analog/commits/main

[Community]: Generate contributors section in README

Commonly used tool is All Contributors https://allcontributors.org/

[FEAT]: Add support for prod mode for multiple components in Astro

When rendering Angular components, you want to enableProdMode() when building for production. Using enableProdMode multiple times throws an error.

Should add a custom/internal function to call enableProdMode. Need to only call it one time, set a flag, and skip it upon subsequent calls.

chore: add perf changes from esbuild browser plugin

Adds checks to see if babel transform is needed

angular/angular-cli#23682

New analog project could not compile

Please provide the environment you discovered this bug in.

Apple Macbook M1 - local

Which area/package is the issue in?

Don't know / Other

Description

Steps to reproduce:

1. Run yarn create analog analog-test
2. navigate to analog-test directory
3. run yarn to install dependencies
4. Observe error

Note: I experienced the same issue using npm

I was able to solve this problem and successfully run the app after making two changes to the tsconfig.app.json:

1. Add "src/**/*.component.ts" to the includes array
2. Changing the composite compiler option to false

I'm not sure if this is the optimal solution but but it got the project running.

Please provide the exception or error you saw

✘ [ERROR] [plugin angular-compiler] TS6304: Composite projects may not disable declaration emit.

✘ [ERROR] [plugin angular-compiler] TS6307: File '/Users/kjohnson/analog-test-2/src/app/app.component.ngtypecheck.ts' is not listed within the file list of project '/Users/kjohnson/analog-test-2/tsconfig.app.json'. Projects must list all files or use an 'include' pattern.

    src/app/app.component.ts:0:0:
      0 │
        ╵ ^

✘ [ERROR] [plugin angular-compiler] TS6307: File '/Users/kjohnson/analog-test-2/src/app/app.component.ts' is not listed within the file list of project '/Users/kjohnson/analog-test-2/tsconfig.app.json'. Projects must list all files or use an 'include' pattern.

    src/main.ts:5:29:
      5 │ import { AppComponent } from './app/app.component';
        ╵                              ~~~~~~~~~~~~~~~~~~~~~

error when optimizing deps:
Error: Build failed with 3 errors:
error: TS6304: Composite projects may not disable declaration emit.
src/app/app.component.ts:0:0: ERROR: [plugin: angular-compiler] TS6307: File '/Users/kjohnson/analog-test-2/src/app/app.component.ngtypecheck.ts' is not listed within the file list of project '/Users/kjohnson/analog-test-2/tsconfig.app.json'. Projects must list all files or use an 'include' pattern.
src/main.ts:5:29: ERROR: [plugin: angular-compiler] TS6307: File '/Users/kjohnson/analog-test-2/src/app/app.component.ts' is not listed within the file list of project '/Users/kjohnson/analog-test-2/tsconfig.app.json'. Projects must list all files or use an 'include' pattern.
    at failureErrorWithLog (/Users/kjohnson/analog-test-2/node_modules/vite/node_modules/esbuild/lib/main.js:1624:15)
    at /Users/kjohnson/analog-test-2/node_modules/vite/node_modules/esbuild/lib/main.js:1266:28
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

### Other information

Node version: 16.15.1
Yarn version: 1.22.19
Npm versions: 8.11.0

### I would be willing to submit a PR to fix this issue

- [X] Yes
- [ ] No

[DOCS]: Add CNAME file for analogjs.org domain

In order to serve the GitHub pages deployment on analogjs.org, a CNAME file is needed at the root of the deployed page

Steps:
Add a CNAME (no extension) file that includes the text analogjs.org to the output of the Docs build
After its deployed, verify on GitHub pages

Example: https://github.com/ngrx/ngrx-io-previews/blob/master/CNAME

The file can be placed in the static directory for Docusaurus https://github.com/analogjs/analog/tree/main/apps/docs-app/static

[REPO]: Add issue template

• General information
  • Environment
  • Bug/Feature/Docs
• Reproduction
• Whether they would like to contribute

References: https://github.com/ngrx/platform/tree/master/.github/ISSUE_TEMPLATE

[DOCS]: Add system requirements for development

• Node 16+ is required
• Angular v14.2+

docs: incorrect edit URL

The edit URL is broken so that when we press Edit this page in the documentation, we get a 404 response.

[FEAT]: Investigate bundle size differences between Webpack build and Vite build

Currently, the Vite build is significantly larger than a Webpack build for production

The Webpack-based builder does a 2-pass transform with esbuild/terser

Vite can also do a 2-pass transform with esbuild/terser to render chunks, but it doesn't happen for each file.

[REPO]: Yarn2 or PNPM as package manager

Which scope/s are relevant/related to the feature request?

Don't known / other

Information

It would be nice to use Yarn2 or PNPM as package manager.

Pros:

1. Faster install
2. Plugins(Yarn2)
3. Faster CI(Should be tested)
4. Cache

Cons:

1. Yarn2(with Plug-n-Play) requires configuration

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[FIX]: Speed up Angular Vite Plugin

The initial implementation of the Vite Plugin for Angular builds on the POC done by the browser builder for esbuild in the Angular CLI. This doesn't take into account for watch mode, and doesn't do much caching or incremental analysis.

I ported over some of the incremental analysis from the @ngtools/webpack AngularWebpackPlugin, but more could be done here to make it fast enough. Incremental analysis is the closest we'll get to single file compilation until its supported in Angular.

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

Please provide the environment you discovered this bug in.

Our companies own app, but I bet an Ionic full feature starter (e.g. "my-first-app") will produce the same error.

Which area/package is the issue in?

vite-plugin-angular

Description

Just tested quick and added Analog-Vite to our companies Angular-Ionic-Capacitor App and ran the following:

NODE_OPTIONS="--max-old-space-size=16000" pnpm vite

it never shows the application, it just crashs after taking all RAM I allowed Node to take. Also tried with Bun but Bun does not work well with Vite yet.

Please provide the exception or error you saw

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[DOCS]: Add skipLibCheck to tsconfig example for Astro

Using the skipLibCheck: true in the tsconfig.app.json prevents compiler errors when using the integration alongside JSX dependencies such as the Astro MDX integration.

Add the flag to the tsconfig.app.json in the README.

[REFACTOR]: Only include minimal deps for Angular in Astro

When running astro add @analogjs/astro-angular, additional deps such as @angular/forms is installed but the developer may never use it.

Remove these additional deps from the peerDependencies in the package.json

@angular/forms

[FEAT]: Add support for API routes

Initial Requirements

• API routes are defined as TypeScript files as part of the source code that is only executed on the server.
• They could live under src/pages/api with a predefined definition such as .server.ts
• This will result in a server build of the application

[FEAT]: Add Git initialization to template creation

When running yarn create analog, initialize the git repository with an initial commit

SCSS pre-processing and including compiled css in index

Which scope/s are relevant/related to the feature request?

vite-plugin-angular

Information

SCSS is getting preprocessed while using vite and is not injecting complied css in index.html

include

• styles.scss in src/app/styles/
• include the same in angular.json

add following to enable scss processing
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}

result should be included styles.css in your index page

Describe any alternatives/workarounds you're currently using

New to angular thus don't have alternative solution.

I would be willing to submit a PR to fix this issue

• Yes
• No

[FEAT]: Add file-based routing

There are multiple options here, but the goal is to define a "routes" folder where each file is a route and you can build a nested hierarchy of routes based on the file system.

There are vite plugins that can do this already, such as vite-plugin-pages but it would need some customization

The underlying routing system could be based on the Angular Router or Remix Router.

With the Angular Router, its harder to generate an entire route configuration due to guards, resolvers, route data, and so on. We could look at defining some sort of exported config in the route file that provides extra metadata that gets merged into the route config if this is the path we take.

In the future, we'd have some server-side element similar to getStaticProps where server-side code is defined next to the component but not shipped to the browser.

[REFACTOR]: Move plugins into separate files

Right now there's 2 plugins

• A plugin for transforming files
  • This plugin also handles deps optimization
• A build-only plugin for optimizing

Suggest splitting these into 3 plugins in separate files and using the plugin entry point to pass them the necessary options

• Deps optimizer
• Transform
• Build optimizer

[FEAT]: Upgrade to Vite 3.0

• Update dependencies
• Upgrade Angular Plugin
• Upgrade Project Starter

bug: Vite Plugin tries to compile tsx files for React Components

Please provide the environment you discovered this bug in.

I've been using react with typescript in astro and its working ifne but, when i tried integrating Angualr with astro in the same project i'm getting errors. And Angular compiler is trying to compile react components too.

my React components : src/components/react/.ts
my Angular components : src/components/angular/.tsx
my other typescript files which handles apis and data manipulation: src/components/*.ts

How can i use both react and Angular components in astro?
How can i configure angular compiler to compile only from the select angular components directory?

Which area/package is the issue in?

astro-angular

Description

my dependencies:

"dependencies": {
"@analogjs/astro-angular": "^0.1.0-beta.3",
"@angular-devkit/build-angular": "^14.2.5",
"@angular/animations": "^14.2.5",
"@angular/common": "^14.2.5",
"@angular/compiler": "^14.2.5",
"@angular/compiler-cli": "^14.2.5",
"@angular/core": "^14.2.5",
"@angular/language-service": "^14.2.5",
"@angular/platform-browser": "^14.2.5",
"@angular/platform-browser-dynamic": "^14.2.5",
"@angular/platform-server": "^14.2.5",
"@astrojs/react": "^1.1.4",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"astro": "^1.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rxjs": "^7.5.7",
"tslib": "^2.4.0",
"zone.js": "^0.11.8"
}

my config:

{
"extends": "./tsconfig.json",
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"noEmit": false,
"target": "es2020",
"module": "es2020",
"lib": ["es2020", "dom"],
"skipLibCheck": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"files": [],
"include": ["src/**/*.ts"]
}

Please provide the exception or error you saw

Sourcemap for "D:/Program Files/Github/Repositories/HOA_Master_New/alchemy_static/node_modules/@analogjs/astro-angular/src/server.js" points to missing source files
 error   Unable to render WelcomeCard because it is undefined!
  Did you forget to import the component or is it possible there is a typo?
Error: Unable to render WelcomeCard because it is undefined!
Did you forget to import the component or is it possible there is a typo?
    at Module.renderComponent (/node_modules/astro/dist/runtime/server/render/component.js:68:11)
 error   Unable to render WelcomeCard because it is undefined!
  Did you forget to import the component or is it possible there is a typo?
Error: Unable to render WelcomeCard because it is undefined!
Did you forget to import the component or is it possible there is a typo?
    at Module.renderComponent (/node_modules/astro/dist/runtime/server/render/component.js:68:11)     
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Other information

I would be willing to submit a PR to fix this issue

• Yes
• No

Component level scss processing

Please provide the environment you discovered this bug in.

Analog generated project

Which area/package is the issue in?

vite-plugin-angular

Description

I am having problem processing component level scss. Do you have an example of such?

this seems to be a bug because in plugin you are resolving the css but not processing it if it is a scss before resolving

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[FEAT]: Add support for passing environment providers to Angular components used in Astro

Which scope/s are relevant/related to the feature request?

astro-angular

Information

Currently, you can only use component-level providers, and do not have access to pass environment-level providers when rendering on the server or hydrating on the client.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[FEAT]: Add SSR application

Vite has built-in support for SSR https://vitejs.dev/guide/ssr.html

This application could serve as the starting point for using Analog applications with SSR, and a baseline for future support of api/server routes.

Children elements in components with ng-content

Which scope/s are relevant/related to the feature request?

astro-angular

Information

Unable to render child elements in Angular components using

Button component that I want to render children inside the button
Button.ts:

import { Component } from "@angular/core";

@Component({
  standalone: true,
  template: `<button><ng-content></ng-content></button>`,
  styles: [],
})
export default class Button {}

index.astro:

---
import Layout from "../layouts/Layout.astro";
import Button from "../components/button/Button";
---

<Layout title="Astro">
  <Button><span>Click Me!</span></Button>
</Layout>

Unsure if there is a specific thing I need to import on the component, I've tried looking around but I can't find anything, wondering if anyone here can provide some insight

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

@Input doesn't work from Astro component

Please provide the environment you discovered this bug in.

Tsconfig:

{
  "extends": "./tsconfig.json",
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "noEmit": false,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "experimentalDecorators": true
  },
  "files": [],
  "include": [
    "src/**/*.ts"
  ]
}

Package.json

{
  "name": "@example/basics",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "devDependencies": {
    "@analogjs/astro-angular": "^0.1.0-beta.0",
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/compiler-cli": "^14.2.0",
    "@angular/core": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/platform-server": "^14.0.0",
    "@astrojs/react": "^1.2.0",
    "@astrojs/svelte": "^1.0.1",
    "@astrojs/tailwind": "^2.0.2",
    "@astrojs/vue": "^1.1.0",
    "astro": "^1.1.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "rxjs": "^7.5.0",
    "svelte": "^3.46.4",
    "tailwindcss": "^3.0.24",
    "tslib": "^2.0.0",
    "vue": "^3.2.30",
    "zone.js": "~0.11.4"
  }
}

Which area/package is the issue in?

astro-angular

Description

When you create your component and you use with an Input from an Astro component, you will never receive the data from you angular component. The ngOnChange is not trigger at all. You also have an error from VS Code when you add your angular component into the Astro page.

This is the Git repo where you will be able to find the issue i encounter: https://github.com/GiuntaLucas/astro-multiframework-boilerplate

Please provide the exception or error you saw

This is the error message you will get from VS Code when you hover the angular component from Astro file. 

Type '{ "client:visible": true; name: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'name' does not exist on type 'IntrinsicAttributes'

Other information

Also something i notice (maybe another topic), when you import your angular component whitout the ts extention, the client hydration is not working. I must import my angular component with this path (import { AngularHello } from "../components/hello.component.ts";) to be able to work front side.

I would be willing to submit a PR to fix this issue

• Yes
• No

[FIX]: Add support for templateUrl/styleUrls

External templates/styles do not trigger a rebuild on change. Inline styles/templates work as expected

[BUG]: Astro plugin shows sourcemap warning in the console

Please provide the environment you discovered this bug in.

Development

Which area/package is the issue in?

astro-angular

Description

When using the Astro plugin, there is a warning logged to the console about sourcemap locations

Sourcemap for "/home/projects/analogjs-astro-angular/node_modules/@analogjs/astro-angular/src/server.js" points to missing source files

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[BUG]: Sourcemaps not working correctly

Please provide the environment you discovered this bug in.

Local development

Which area/package is the issue in?

vite-plugin-angular

Description

Setting breakpoints in Chrome isn't working correctly, and viewing the source of a file displays two sets of strings for the sourcemap.

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

Double rendering of astro component

Please provide the environment you discovered this bug in.

I've recreated the issue in this repo:
https://github.com/simitch1/analog-astro-double-rendering-bug

Which area/package is the issue in?

astro-angular

Description

I saw that in some condition, the compilation or client hydration process creates multiple instance of the same component, one interactive and the other one not interactive.

I was able to recreate the bug by wrapping the angular component with a <p> tag.
I started looking for the bug but I haven't found it yet...

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[DOCS]: Update homepage header to different shade of red in dark mode

Update the color for the header to match on lite/dark modes. The red should be the one used in the light mode on both.

That being said, the red has been brightened in dark mode for accessibility WCAG-AA contrast concerns when used with black as recommended by Docusaurus.

Originally posted by @LayZeeDK in #38 (comment)

[FEAT]: Add support for HMR in development mode

Vite uses HMR to enable refreshing the app without reloading the whole page. Vite uses HMR closest to the code that accepts HMR.

Angular has some support for this but not as granular as the root app needs to be destroyed and recreated for this to work.

External styles outside of component templates and HTML work as intended.

Prior art: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts

[FEAT]: Add support for passing static props to an Angular component in Astro

Which scope/s are relevant/related to the feature request?

astro-angular

Information

You can use a self-contained Angular component in Astro.

<ProductsListComponent />

You should be able to pass down static props to the component and consume them in the Angular component.

In Astro template

---
const products = await getProducts();
---

<ProductsListComponent products={products} />

In Angular component

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { STATIC_PROPS, injectStaticProps } from '@analogjs/astro-angular';

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>Hello from Angular!!</p>

    <button (click)="toggle()">Toggle</button>
    
    <p *ngIf="show">Toggled</p>
  `,
})
export class ProductsListComponent {
  products = injectStaticProps<Product[]>(); // <-- using inject function

  constructor(@Inject(STATIC_PROPS) private ngProps: Product[]) {} // <-- using constructor injection
}

The token would be added to the providers of the component:

Through server rendering: https://github.com/analogjs/analog/blob/main/packages/astro-angular/src/server.ts#L21

Through client hydration: https://github.com/analogjs/analog/blob/main/packages/astro-angular/src/client.ts#L12

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[Test]: Set up E2E testing

Setup E2E suites for

• Cypress
• Playwright

[FEAT]: Investigate Server-Rendering/Static Site Generation

Initial Requirements

• Developers will primarily build server-rendered apps
• After initial render, the client-side app takes over routing
• Also want the ability to statically generate pages of the app
• This should be configurable per page/route

[BUG]: astro-angular integration broke Astro <script> tag

Please provide the environment you discovered this bug in.

Error reproduction

Which area/package is the issue in?

astro-angular

Description

Script tag doesn't work in astro components when I add @analogjs/astro-angular to my Astro project.

Script tag works when I add is:inline directive or an atribute. But, it is a problem when I´m using TypeScript inside or I need to import a external script, because is necessary that Astro bundle it and that is not working with astro-angular integration.

Astro docs - Client-Side Scripts

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[LIB]: Migrate Angular Integration for Astro to this repo

I've developed a plugin for Astro that let's use Angular components inside of an Astro project. The repository currently lives here https://github.com/brandonroberts/ng-astro in the integration-angular folder.

This effort would:

• Move that integration to this repo
• Rename the package to @analogjs/astro-integration-angular
• Update the package to support the new createApplication API upcoming in Angular 14.2 (TBD)

[RFC]: Explore concept of global imports for components

Which scope/s are relevant/related to the feature request?

Don't known / other

Information

In most cases, when building Angular components, there are some directives/pipes that you end up using over and over such as:

• NgIf
• NgFor
• Async Pipe

The concept of global imports would make these imports implicitly available by default by adding them to an imports.ts file defined in the project that is added to the imports array of all components/directives. There would be some way to opt-out of this behavior also.

BEFORE:

import { AsyncPipe, CurrencyPipe, NgForOf } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core';

import { Observable } from 'rxjs';
import { CartService } from '../../cart.service';

@Component({
  selector: 'app-shipping',
  standalone: true,
  imports: [NgForOf, CurrencyPipe, AsyncPipe],
  template: `
    <h3>Shipping Prices</h3>

    <div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
      <span>{{ shipping.type }}</span>
      <span>{{ shipping.price | currency }}</span>
    </div>
  `,
})
export default class ShippingComponent implements OnInit {
  private cartService = inject(CartService);

  shippingCosts!: Observable<{ type: string; price: number }[]>;

  ngOnInit(): void {
    this.shippingCosts = this.cartService.getShippingPrices();
  }
}

AFTER:

src/imports.ts

import { AsyncPipe, CurrencyPipe, NgForOf } from '@angular/common';

export const imports = [
  AsyncPipe,
  CurrencyPipe,
  NgForOf,
  // other imports
];

import { Component, inject, OnInit } from '@angular/core';

import { Observable } from 'rxjs';
import { CartService } from '../../cart.service';

@Component({
  selector: 'app-shipping',
  standalone: true,
  imports: [
    // global imports included
  ],
  template: `
    <h3>Shipping Prices</h3>

    <div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
      <span>{{ shipping.type }}</span>
      <span>{{ shipping.price | currency }}</span>
    </div>
  `,
})
export default class ShippingComponent implements OnInit {
  private cartService = inject(CartService);

  shippingCosts!: Observable<{ type: string; price: number }[]>;

  ngOnInit(): void {
    this.shippingCosts = this.cartService.getShippingPrices();
  }
}

Implementation-wise this would most likely be done with a TypeScript transformer.

Notes

• Language service integration?
• More flexible imports file?

Describe any alternatives/workarounds you're currently using

Tooling

I would be willing to submit a PR to fix this issue

• Yes
• No

[FEAT]: Update create-analog template application to latest dependencies

The package.json needs updating here https://github.com/analogjs/analog/blob/main/packages/create-analog/template-angular-v14/package.json#L34-L35

Vite ^3.0.4
Vitest ^0.21.0

[REPO]: Add pull request template

Keep it lightweight for now