analogjs / analog Goto Github PK

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

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

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

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

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

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.

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.

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

Keep it lightweight for now

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

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

• Update dependencies
• Upgrade Angular Plugin
• Upgrade Project Starter

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.

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

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)

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

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

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

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

Setup E2E suites for

• Cypress
• Playwright

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.

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

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

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

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

CTA on mobile is not responsive

Current Behaviour

Expect Behaviour

CTA buttons should be responsive on mobile

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

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

Adds checks to see if babel transform is needed

angular/angular-cli#23682

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

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

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.

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

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

Build docs site with:

• Project overview
• Install instructions
• Contributing
• Sponsoring

Options

• Docusaurus
• Hand-rolled
• Other?

It will be hosted on analogjs.org

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

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

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

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)

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

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

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)

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

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.

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

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

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

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

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

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