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

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

• [X] Yes
• [ ] No

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.

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

Add the Discord link to the main navigation

Closes #170

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] The commit message follows our guidelines: https://github.com/analogjs/analog/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [x] Documentation content changes
• [ ] Other... Please describe:

Which package are you modifying?

• [ ] vite-angular-plugin
• [ ] astro-angular
• [ ] create-analog
• [ ] router

What is the current behavior?

There was only a link to the GitHub repo in the navbar

Issue Number: #170

What is the new behavior?

A link to chat.analogjs.org has been added to the header

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

I think that to enable angular prod mode like requested in this issue #64 , we could simply use the astro:build:start or astro:build:setup hook to enable the prod compilation a single time. I tried the build locally and seems to work, but I don't really know how to test further.

Before:

After:

Tests are failing right know but build is good. If the solution is ok I can work on it. Let me know what do you think.

Hello,

This PR does

• Closes #44

Remarks/Questions

• The default port is now 5173
• The default host should be localhost but on Node.js under v17 it's displayed as http://127.0.0.1:5173/, what do you want to do ?
  • Keep it like this
  • Apply the workaround from the doc https://vitejs.dev/config/server-options.html#server-host
  • Set minimum Node.js version to 17+
• Vite no longer supports Node.js 12 / 13 / 15
  • Should we set minimum Node.js version to 14.18+ / 16+ ?

References

• Closes #3
• Preview environment

Documentation

• Create docs website using Docusaurus
• Brand Docusaurus theme
• Add logo and favicon
• List features on home page
• Add StackBlitz link to home page
• Add docs pages:
  • Introduction
  • Installation
  • Contributors
  • Contributing
    • Describe folder structure
    • Add section on contributing to the docs and website
  • Sponsoring

CI

• Deploy docs website to GitHub Pages

Build

• Update Node.js to version 16.16.0 to support Docusaurus
• Configure a Yarn workspace to isolate Docusaurus dependencies in the docs-app project
• Mark CONTRIBUTING.md as implicit dependency for the docs-app project to make this Markdown document part of affected detection despite it being located outside of the project root
• Add the @nx-plus/docusaurus Nx plugin
• Add @ngtools/webpack as an explicit dev dependency to fix the build of the analog-app project

To do

Before merge

• [x] Filter branches to main for push events in the CI workflow
• [x] Enable condition for Upload docs website step in the checks job in the CI workflow
• [x] Enable condition for deploy-docs job in the CI workflow
• [x] Configure Docusaurus for upstream organization and repository (analogjs/analog)
• [x] Configure Docusaurus for custom domain (https://analogjs.org)
• [ ] Select GitHub Actions as Source in Settings -> Pages -> Build and deployment
• [ ] Configure GitHub Pages for custom domain (https://analogjs.org)
• [ ] Configure custom domain DNS records for GitHub Pages

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

PR Checklist

Please check if your PR fulfills the following requirements:

• [X] The commit message follows our guidelines: https://github.com/analogjs/analog/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• [X] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [X] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

Which package are you modifying?

• [X] vite-angular-plugin
• [ ] astro-angular
• [ ] create-analog
• [ ] router

What is the current behavior?

The peer dependency @angular-devkit/build-angular supports only major version 14.

Issue Number: N/A

What is the new behavior?

The peer dependency @angular-devkit/build-angular should also support major version 15.

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

PR Checklist

Please check if your PR fulfills the following requirements:

• [ ] The commit message follows our guidelines: https://github.com/analogjs/analog/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

Which package are you modifying?

• [ ] vite-angular-plugin
• [ ] astro-angular
• [x] create-analog
• [ ] router

What is the current behavior?

Issue Number: N/A

What is the new behavior?

• Ability to generate Angular 15 template

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Update the side menu and pages to list Analog features instead of a collection of separate packages. The only standalone package is the Astro / Angular integration.

The rest of the plugins are going to be rolled under the @analogjs/platform package.

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

vite-plugin-angular

Information

Problem: I want to be able to define custom path aliases for import paths in my scss stylesheets and I am not able to.

Angular+Webpack alternative: @nrwl/angular:webpack-browser executor and Angular CLI allows me to define stylePreprocessorOptions.includePaths to define custom paths (except node_modules) to search for scss modules at.

Solution: createCompilerPlugin function accepts 2nd parameter styleOptions, that can contain includePaths property. That option is consumed by sass plugin.

My proposed solution has two parts:

• automatic inclusion of resolve.alias from user Vite config here: https://github.com/analogjs/analog/blob/cee43a996377765a1f3305e8c28cfa8993d2e4e3/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts#L85
• manual configuration through new plugin option includePaths that would push new paths to the includePaths option mentioned above

Please let me know if you are ok with this solution 🙏

Describe any alternatives/workarounds you're currently using

No alternative exists except of patching the package

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

• [X] Yes
• [ ] No

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

Don't known / other

Information

I don't really care about ISR support specifically, but automating the Cache-Control header in serverless functions.

I want something that uses the Cache-Control header, and I don't have to deal with it.

NextJS used to use ISR, but now they realize the important part of it is just automatically dealing with caching period. This would be huge for this framework considering NextJS is the only Framework that has it for the moment (SvelteKit confirmed eventually, and Nuxt3 eventually).

I am not a fan of using fetch like Next13 uses, as we may have our own fetch functions we can't control like with Supabase or Firebase.

Just dealing with the caching is what is important.

Describe any alternatives/workarounds you're currently using

We could use ngx-isr, but it really uses in-memory cache under-the-hood.

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

• [ ] Yes
• [X] No

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.

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
• [X] No

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