Angular Frontend Added to Stack #310
Conversation
|
WalkthroughThis change introduces first-class Angular support to the CLI and project generation system. It adds Angular as a selectable frontend option, updates compatibility and validation logic, integrates Angular-specific templates for frontend, authentication, examples, and PWA addons, and manages Angular dependencies and configuration files. All relevant prompts, validation, and stack builder logic are updated to recognize and handle Angular alongside existing frameworks. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CLI
participant TemplateManager
participant AngularTemplates
participant DependencyManager
User->>CLI: Selects "Angular" as frontend
CLI->>TemplateManager: Initiate project generation
TemplateManager->>AngularTemplates: Copy Angular frontend/auth/addon/example templates
TemplateManager->>DependencyManager: Add Angular dependencies (core, service worker, query)
DependencyManager-->>TemplateManager: Dependencies installed
TemplateManager-->>CLI: Project setup complete with Angular support
CLI-->>User: Angular project ready
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (9)
🚧 Files skipped from review as they are similar to previous changes (9)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 27
🔭 Outside diff range comments (4)
apps/cli/src/prompts/frontend.ts (1)
81-86:⚠️ Potential issueFix inconsistent Angular-Convex compatibility filtering.
There's an inconsistency: Angular is marked as incompatible with Convex in
backend.ts(line 13), but the filtering logic here doesn't exclude Angular whenbackend === "convex".Apply this fix to maintain consistency:
const webOptions = allWebOptions.filter((option) => { if (backend === "convex") { - return option.value !== "nuxt" && option.value !== "solid"; + return option.value !== "nuxt" && option.value !== "solid" && option.value !== "angular"; } return true; });apps/cli/src/prompts/api.ts (1)
39-54:⚠️ Potential issueFix the hint message to include Angular.
The conditional logic correctly includes Angular, but the hint message doesn't account for it in the ternary operator.
Apply this fix:
hint: `End-to-end type-safe APIs (Recommended for ${ - includesNuxt ? "Nuxt" : includesSvelte ? "Svelte" : "Solid" + includesNuxt ? "Nuxt" : includesSvelte ? "Svelte" : includesSolid ? "Solid" : "Angular" } frontend)`,apps/cli/templates/frontend/angular/src/environments/enviroments.ts (1)
1-17:⚠️ Potential issueCritical: Fix the filename typo.
The filename contains a typo:
enviroments.tsshould beenvironments.ts(missing 'n'). Angular CLI depends on the correct filenameenvironment.tsfor the build replacement mechanism to work properly. This typo would break the file replacement specified inangular.json.Rename the file from
enviroments.tstoenvironment.ts:- apps/cli/templates/frontend/angular/src/environments/enviroments.ts + apps/cli/templates/frontend/angular/src/environments/environment.tsapps/cli/src/validation.ts (1)
122-125: 🛠️ Refactor suggestionUpdate error message to include Angular.
The error message listing valid web frameworks should include "angular" for completeness.
- "Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, svelte, solid", + "Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, svelte, solid, angular",
🧹 Nitpick comments (26)
apps/cli/templates/frontend/angular/.postcssrc.json (1)
1-5: Consider adding Autoprefixer
Tailwind CSS typically pairs withautoprefixerto ensure proper vendor prefixing across browsers.Example:
{ "plugins": { "@tailwindcss/postcss": {}, + "autoprefixer": {} } }apps/cli/src/types.ts (1)
32-32: AlignFrontendunion ordering with CLI choices
The position of"angular"in the type union differs from its placement incli.ts. Consider reordering to maintain consistency in both definitions.apps/cli/src/prompts/addons.ts (1)
22-23: Extended addon compatibility checks for Angular
Angular now correctly appears in both PWA and Tauri compatibility lists.Consider abstracting the repeated
frontends?.includes(...)checks into a shared constant to reduce duplication and improve maintainability.Also applies to: 31-32
apps/cli/templates/addons/pwa/apps/web/angular/public/manifest.webmanifest (1)
1-57: Consider adding theme and background colors for better PWA experience.The manifest is missing
theme_colorandbackground_colorproperties which enhance the PWA user experience by providing consistent branding and smoother loading transitions.{ "name": "{{projectName}}", "short_name": "{{projectName}}", + "theme_color": "#000000", + "background_color": "#ffffff", "display": "standalone", "scope": "./", "start_url": "./",apps/cli/templates/auth/web/angular/src/guards/auth.guard.ts (1)
5-15: LGTM! Consider adding enhanced error handling and logging.The functional guard implementation follows modern Angular patterns correctly. The logic is sound - checking authentication status and redirecting unauthenticated users to login.
Consider these enhancements for production robustness:
export const authGuard: CanActivateFn = (route, state) => { const authService = inject(AuthService); const router = inject(Router); + try { if (authService.isLoggedIn()) { return true; } - router.navigate(['/login']); + router.navigate(['/login'], { queryParams: { returnUrl: state.url } }); return false; + } catch (error) { + console.error('Auth guard error:', error); + router.navigate(['/login']); + return false; + } };This adds error handling and preserves the intended destination for post-login redirect.
apps/cli/templates/frontend/angular/src/environments/environment.prod.ts (2)
4-4: Remove trailing space from appName.The
appNamehas an unnecessary trailing space.- appName: "Auth Kit ", + appName: "Auth Kit",
1-5: Addas constassertion for type safety consistency.The development environment file uses
as constassertion but this production file doesn't, creating inconsistency.export const environment = { production: true, baseUrl: "http://localhost:6100", appName: "Auth Kit ", -}; +} as const;apps/cli/templates/frontend/angular/src/main.ts (1)
24-24: Fix typo in Self-XSS warning message.There's a typo in the warning message: "sing an attack" should be "using an attack".
- %cThis is a browser feature intended for developers. Using this console may allow attackers to impersonate you and steal your information sing an attack called Self-XSS. Do not enter or paste code that you do not understand.`, + %cThis is a browser feature intended for developers. Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS. Do not enter or paste code that you do not understand.`,apps/cli/templates/frontend/angular/src/index.html.hbs (1)
5-5: Consider making the title configurable.The title is hardcoded as "MyApp". Consider making it configurable through the template context to match the project name or allow customization.
- <title>MyApp</title> + <title>{{projectName}}</title>apps/cli/templates/frontend/angular/src/components/home/home.component.ts.hbs (1)
3-3: Remove unused RouterLink import.The
RouterLinkimport is not used in this component's template or imports array.-import { RouterLink } from '@angular/router';apps/cli/templates/auth/web/angular/src/components/auth/login/login.component.html (1)
11-16: Consider standardizing styling approach.The email input uses DaisyUI classes (
input input-bordered), while the password input uses custom Tailwind classes. Consider using a consistent styling approach throughout the form for better maintainability.<input type="email" [name]="email.api.name" [id]="email.api.name" [value]="email.api.state.value" - (input)="email.api.handleChange($any($event).target.value)" class="input input-bordered w-full" + (input)="email.api.handleChange($any($event).target.value)" + class="w-full px-4 py-2 rounded-lg bg-gray-50 dark:bg-black border border-gray-200 dark:border-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-hidden focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-primary-500/20 focus:border-primary-500 dark:focus:border-primary-500 transition-colors"apps/cli/templates/auth/web/angular/src/components/auth/login/login.component.ts (1)
16-17: Remove unused properties.The
passwordproperties are not used since the form values are managed by TanStack Form.- email = ''; - password = '';apps/cli/templates/frontend/angular/src/app.config.ts.hbs (1)
46-49: Consider adjusting the service worker registration strategy.The 30-second delay (
registerWhenStable:30000) for service worker registration might be too long for users to benefit from PWA features. Consider reducing this to improve user experience.- registrationStrategy: 'registerWhenStable:30000', + registrationStrategy: 'registerWhenStable:10000',apps/cli/templates/auth/web/angular/src/components/auth/signup/signup.component.ts (1)
18-23: Improve password validation.Consider strengthening the password validation to include character requirements for better security.
password: z.string() - .min(8, "Password must be at least 8 characters") + .min(8, "Password must be at least 8 characters") + .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, + "Password must contain at least one uppercase letter, one lowercase letter, and one number")apps/cli/templates/frontend/angular/package.json (1)
6-6: Consider making dev port configurable.The hardcoded port 3001 may conflict with other services. Consider making this configurable through environment variables or Angular configuration.
- "dev": "ng serve --port=3001", + "dev": "ng serve --port=${PORT:-3001}",apps/cli/src/validation.ts (1)
408-412: Improve error message specificity.The ternary chain for determining which frontend is incompatible with tRPC could be simplified and made more maintainable.
- consola.fatal( - `tRPC API is not supported with '${ - includesNuxt ? "nuxt" : includesSvelte ? "svelte" : includesSolid ? "solid" : "angular" - }' frontend. Please use --api orpc or --api none or remove '${ - includesNuxt ? "nuxt" : includesSvelte ? "svelte" : includesSolid ? "solid" : "angular" - }' from --frontend.`, - ); + const incompatibleFrontend = includesNuxt ? "nuxt" + : includesSvelte ? "svelte" + : includesSolid ? "solid" + : "angular"; + consola.fatal( + `tRPC API is not supported with '${incompatibleFrontend}' frontend. Please use --api orpc or --api none or remove '${incompatibleFrontend}' from --frontend.`, + );apps/cli/templates/examples/todo/web/angular/src/components/todo-list/todo-list.component.ts.hbs (1)
15-17: Consider making RpcService public for template access.The
_rpcservice is private but might need to be accessed in the template. Consider making it public or creating getter methods for template access.-private _rpc = inject(RpcService); +rpc = inject(RpcService);Or update the mutation configurations to use
this.rpcinstead ofthis._rpc.apps/cli/templates/frontend/angular/src/components/header/header.component.html.hbs (1)
35-48: Add keyboard navigation support.The theme toggle button should support keyboard navigation (Enter/Space) and the dropdown should support arrow key navigation for better accessibility.
Add keyboard event handlers:
<button (click)="toggleThemeMenu()" + (keydown.enter)="toggleThemeMenu()" + (keydown.space)="$event.preventDefault(); toggleThemeMenu()" class="icon-btn" aria-label="Toggle theme" + aria-expanded="{{showThemeMenu}}" + aria-haspopup="true" >apps/cli/src/helpers/setup/api-setup.ts (2)
110-127: Fix formatting and improve error handling consistency.The Angular API setup block has several formatting issues and lacks consistent error handling:
- Missing spaces after
ifstatements (lines 110, 118)- No try-catch blocks like other framework implementations
Apply this diff to fix formatting and add consistent error handling:
- } else if (hasAngularWeb) { - if(api === "trpc"){ - await addPackageDependency({ - dependencies: [ - "@trpc/client", - "@trpc/server", - ], - projectDir: webDir, - }); - } else if (api === "orpc") { - await addPackageDependency({ - dependencies: [ - "@orpc/tanstack-query", - "@orpc/client", - "@orpc/server", - ], - projectDir: webDir, - }); - } + } else if (hasAngularWeb) { + if (api === "trpc") { + await addPackageDependency({ + dependencies: [ + "@trpc/client", + "@trpc/server", + ], + projectDir: webDir, + }); + } else if (api === "orpc") { + await addPackageDependency({ + dependencies: [ + "@orpc/tanstack-query", + "@orpc/client", + "@orpc/server", + ], + projectDir: webDir, + }); + }
228-238: Fix formatting and add error handling for Angular query setup.The Angular query dependency setup has formatting issues and lacks the error handling present in similar blocks.
Apply this diff to improve formatting and add consistent error handling:
- if(needsAngularQuery && !isConvex){ - if(webDirExists){ - const webPkgJsonPath = path.join(webDir, "package.json"); - if (await fs.pathExists(webPkgJsonPath)) { - await addPackageDependency({ - dependencies: ["@tanstack/angular-query-experimental"], - projectDir: webDir, - }); - } - } - } + if (needsAngularQuery && !isConvex) { + if (webDirExists) { + const webPkgJsonPath = path.join(webDir, "package.json"); + if (await fs.pathExists(webPkgJsonPath)) { + try { + await addPackageDependency({ + dependencies: ["@tanstack/angular-query-experimental"], + projectDir: webDir, + }); + } catch (_error) {} + } + } + }apps/cli/templates/auth/web/angular/src/components/auth/signup/signup.component.html (1)
18-18: Consider removing type assertions for better type safety.The
$any($event)type assertions disable TypeScript's type checking, which reduces type safety.Consider updating the component to handle the events with proper typing:
- (input)="name.api.handleChange($any($event).target.value)" + (input)="name.api.handleChange($event.target.value)"This would require ensuring the component's event handling methods accept the correct event types, or create a helper method:
onInputChange(event: Event, api: any): void { const target = event.target as HTMLInputElement; api.handleChange(target.value); }Also applies to: 40-40, 62-62
apps/cli/templates/api/orpc/web/angular/src/services/rpc.service.ts.hbs (1)
11-24: Consider providing QueryClient through Angular's DI system.While the current approach works, exporting
queryClientas a standalone constant doesn't align well with Angular's dependency injection patterns. Consider providing it through a provider or factory function for better testability and consistency with Angular conventions.-export const queryClient = new QueryClient({ - queryCache: new QueryCache({ - onError: (error) => { - toast.error(error.message, { - action: { - label: "retry", - onClick: () => { - queryClient.invalidateQueries(); - }, - }, - }); - }, - }), -}); +// Consider providing through Angular DI instead +export function createQueryClient(): QueryClient { + return new QueryClient({ + queryCache: new QueryCache({ + onError: (error) => { + toast.error(error.message, { + action: { + label: "retry", + onClick: () => { + // Access client through service + }, + }, + }); + }, + }), + }); +}apps/cli/templates/auth/web/angular/src/services/auth.service.ts (1)
23-37: Consider separating navigation concerns from authentication service.The service directly handles router navigation, which violates separation of concerns. Consider emitting events or using a pattern that allows components to handle navigation.
login(email: string, password: string): void { this.authClient.signIn.email({ email, password }, { onSuccess: (session) => { if(session.data?.user) { this.isAuthenticated.next(true); this.user.set(session.data?.user ?? null); - this.router.navigate(['/dashboard']); + // Emit success event or return observable for component to handle navigation } }, onError: (error) => { console.error(error); toast.error(error.error.message); } }); }apps/cli/templates/examples/todo/web/angular/src/components/todo-list/todo-list.component.html (1)
24-24: Inconsistent CSS framework usage.The
loading loading-spinnerclasses appear to be from DaisyUI, while the rest of the template uses Tailwind CSS. Consider using consistent styling approach.-<span *ngIf="isSubmitting()" class="loading loading-spinner mr-2"></span> +<span *ngIf="isSubmitting()" class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></span>apps/cli/templates/frontend/angular/angular.json.hbs (1)
46-46: Consider disabling source maps in production.Source maps are enabled in production, which may not be desired for security and performance reasons in a production environment.
"production": { // ... other config "optimization": true, - "sourceMap": true, + "sourceMap": false, "namedChunks": false, // ... rest of configapps/cli/src/helpers/project-generation/template-manager.ts (1)
795-801: Angular examples template setup looks correct.The Angular example template setup follows the same pattern as other frameworks. However, there's a subtle difference in the
overwriteparameter compared to other frameworks.Consider using
falsefor the overwrite parameter to match the pattern used by other frameworks:- await processAndCopyFiles("**/*", exampleWebAngularSrc, webAppDir, context); + await processAndCopyFiles("**/*", exampleWebAngularSrc, webAppDir, context, false);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
apps/cli/templates/addons/pwa/apps/web/angular/public/icons/icon-128x128.pngis excluded by!**/*.pngapps/cli/templates/addons/pwa/apps/web/angular/public/icons/icon-144x144.pngis excluded by!**/*.pngapps/cli/templates/addons/pwa/apps/web/angular/public/icons/icon-152x152.pngis excluded by!**/*.pngapps/cli/templates/addons/pwa/apps/web/angular/public/icons/icon-192x192.pngis excluded by!**/*.pngapps/cli/templates/addons/pwa/apps/web/angular/public/icons/icon-384x384.pngis excluded by!**/*.pngapps/cli/templates/addons/pwa/apps/web/angular/public/icons/icon-512x512.pngis excluded by!**/*.pngapps/cli/templates/addons/pwa/apps/web/angular/public/icons/icon-72x72.pngis excluded by!**/*.pngapps/cli/templates/addons/pwa/apps/web/angular/public/icons/icon-96x96.pngis excluded by!**/*.pngapps/cli/templates/frontend/angular/public/favicon.icois excluded by!**/*.icoapps/web/public/icon/angular.svgis excluded by!**/*.svg
📒 Files selected for processing (53)
apps/cli/src/cli.ts(1 hunks)apps/cli/src/constants.ts(2 hunks)apps/cli/src/helpers/project-generation/template-manager.ts(9 hunks)apps/cli/src/helpers/setup/api-setup.ts(4 hunks)apps/cli/src/prompts/addons.ts(1 hunks)apps/cli/src/prompts/api.ts(2 hunks)apps/cli/src/prompts/backend.ts(1 hunks)apps/cli/src/prompts/examples.ts(1 hunks)apps/cli/src/prompts/frontend.ts(1 hunks)apps/cli/src/types.ts(1 hunks)apps/cli/src/utils/template-processor.ts(1 hunks)apps/cli/src/validation.ts(6 hunks)apps/cli/templates/addons/pwa/apps/web/angular/ngsw-config.json(1 hunks)apps/cli/templates/addons/pwa/apps/web/angular/public/manifest.webmanifest(1 hunks)apps/cli/templates/api/orpc/web/angular/src/services/rpc.service.ts.hbs(1 hunks)apps/cli/templates/auth/web/angular/src/components/auth/login/login.component.html(1 hunks)apps/cli/templates/auth/web/angular/src/components/auth/login/login.component.ts(1 hunks)apps/cli/templates/auth/web/angular/src/components/auth/signup/signup.component.html(1 hunks)apps/cli/templates/auth/web/angular/src/components/auth/signup/signup.component.ts(1 hunks)apps/cli/templates/auth/web/angular/src/components/dashboard/dashboard.component.html(1 hunks)apps/cli/templates/auth/web/angular/src/components/dashboard/dashboard.component.ts(1 hunks)apps/cli/templates/auth/web/angular/src/guards/auth.guard.ts(1 hunks)apps/cli/templates/auth/web/angular/src/services/auth.service.ts(1 hunks)apps/cli/templates/examples/todo/web/angular/src/components/todo-list/todo-list.component.html(1 hunks)apps/cli/templates/examples/todo/web/angular/src/components/todo-list/todo-list.component.ts.hbs(1 hunks)apps/cli/templates/frontend/angular/.editorconfig(1 hunks)apps/cli/templates/frontend/angular/.gitignore(1 hunks)apps/cli/templates/frontend/angular/.postcssrc.json(1 hunks)apps/cli/templates/frontend/angular/angular.json.hbs(1 hunks)apps/cli/templates/frontend/angular/package.json(1 hunks)apps/cli/templates/frontend/angular/src/app.component.html(1 hunks)apps/cli/templates/frontend/angular/src/app.component.ts(1 hunks)apps/cli/templates/frontend/angular/src/app.config.ts.hbs(1 hunks)apps/cli/templates/frontend/angular/src/app.routes.ts.hbs(1 hunks)apps/cli/templates/frontend/angular/src/components/header/header.component.html.hbs(1 hunks)apps/cli/templates/frontend/angular/src/components/header/header.component.ts.hbs(1 hunks)apps/cli/templates/frontend/angular/src/components/home/home.component.html.hbs(1 hunks)apps/cli/templates/frontend/angular/src/components/home/home.component.ts.hbs(1 hunks)apps/cli/templates/frontend/angular/src/components/not-found/not-found-component.html(1 hunks)apps/cli/templates/frontend/angular/src/components/not-found/not-found-component.ts(1 hunks)apps/cli/templates/frontend/angular/src/environments/enviroments.ts(1 hunks)apps/cli/templates/frontend/angular/src/environments/environment.prod.ts(1 hunks)apps/cli/templates/frontend/angular/src/index.html.hbs(1 hunks)apps/cli/templates/frontend/angular/src/main.ts(1 hunks)apps/cli/templates/frontend/angular/src/polyfills.ts(1 hunks)apps/cli/templates/frontend/angular/src/services/theme.service.ts(1 hunks)apps/cli/templates/frontend/angular/src/styles.css(1 hunks)apps/cli/templates/frontend/angular/src/types/env.d.ts(1 hunks)apps/cli/templates/frontend/angular/tsconfig.app.json(1 hunks)apps/cli/templates/frontend/angular/tsconfig.json(1 hunks)apps/cli/templates/frontend/angular/tsconfig.spec.json(1 hunks)apps/web/src/app/(home)/_components/stack-builder.tsx(9 hunks)apps/web/src/lib/constant.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (7)
apps/cli/templates/frontend/angular/src/components/not-found/not-found-component.ts (2)
apps/cli/templates/auth/web/angular/src/components/dashboard/dashboard.component.ts (1)
Component(4-11)apps/cli/templates/frontend/angular/src/app.component.ts (1)
Component(8-24)
apps/cli/templates/frontend/angular/src/environments/environment.prod.ts (1)
apps/cli/templates/frontend/angular/src/environments/enviroments.ts (1)
environment(5-8)
apps/cli/templates/auth/web/angular/src/components/dashboard/dashboard.component.ts (4)
apps/cli/templates/auth/web/angular/src/components/auth/login/login.component.ts (1)
Component(9-39)apps/cli/templates/auth/web/angular/src/components/auth/signup/signup.component.ts (1)
Component(9-39)apps/cli/templates/frontend/angular/src/components/not-found/not-found-component.ts (1)
Component(5-11)apps/cli/templates/frontend/angular/src/app.component.ts (1)
Component(8-24)
apps/cli/templates/auth/web/angular/src/components/auth/login/login.component.ts (1)
apps/cli/templates/auth/web/angular/src/components/auth/signup/signup.component.ts (1)
Component(9-39)
apps/cli/templates/frontend/angular/src/main.ts (2)
apps/cli/templates/frontend/angular/src/environments/enviroments.ts (1)
environment(5-8)apps/cli/templates/frontend/angular/src/environments/environment.prod.ts (1)
environment(1-5)
apps/cli/src/helpers/setup/api-setup.ts (1)
apps/cli/src/utils/add-package-deps.ts (1)
addPackageDependency(6-43)
apps/cli/templates/frontend/angular/src/environments/enviroments.ts (1)
apps/cli/templates/frontend/angular/src/environments/environment.prod.ts (1)
environment(1-5)
🔇 Additional comments (57)
apps/cli/src/cli.ts (1)
50-50: Addedangularto CLI frontend choices
Integration is correct and consistent with templates and validation.apps/cli/src/utils/template-processor.ts (1)
35-35: RegisterednotHandlebars helper
Helper correctly inverts boolean values and complements existingor/eqhelpers.apps/cli/src/prompts/backend.ts (1)
12-14:❓ Verification inconclusive
Verify Angular-Convex incompatibility is intentional.
The addition of Angular to the incompatible frontend list appears consistent with Nuxt and Solid. However, please confirm that Angular is genuinely incompatible with Convex backend to ensure this restriction is necessary.
🏁 Script executed:
#!/bin/bash # Verify if Angular incompatibility with Convex is consistently applied across the codebase rg -A 3 -B 3 "convex.*angular|angular.*convex" --type tsLength of output: 58
Confirm Angular-Convex compatibility
We ran a search across the TypeScript codebase for any existing “angular” ↔ “convex” references and found none. Please verify that Angular is indeed incompatible with the Convex backend and, if so, update the relevant documentation or tests to reflect this restriction.
• apps/cli/src/prompts/backend.ts (lines 12–14):
const hasIncompatibleFrontend = frontends?.some( (f) => f === "nuxt" || f === "solid" || f === "angular", );apps/cli/src/prompts/frontend.ts (1)
74-78: LGTM! Angular option properly added.The Angular frontend option is well-defined with appropriate label and descriptive hint text.
apps/cli/templates/frontend/angular/.editorconfig (1)
1-18: Well-configured EditorConfig for Angular projects.The configuration follows Angular Style Guide conventions with appropriate settings for TypeScript, general files, and Markdown. The 2-space indentation and single quotes align with Angular best practices.
apps/cli/src/prompts/examples.ts (1)
41-41: LGTM: Consistent exclusion pattern for Angular compatibility.The addition of Angular to the AI Chat exclusion condition follows the same pattern as the existing Solid frontend exclusion and aligns with the documented compatibility constraints.
apps/cli/templates/frontend/angular/src/components/not-found/not-found-component.html (1)
1-15: LGTM: Well-structured 404 component with excellent accessibility and design.The template demonstrates good practices with:
- Proper responsive design and centering
- Comprehensive dark mode support
- Correct Angular routing integration with
routerLink- Good typography hierarchy and spacing
- Accessible button design with hover states
The implementation follows modern Angular and Tailwind CSS conventions effectively.
apps/cli/templates/auth/web/angular/src/components/dashboard/dashboard.component.html (1)
1-12: Clean and responsive dashboard template.The HTML structure follows good practices with semantic elements, responsive design using Tailwind CSS, and proper accessibility considerations. The fade-in animation class adds a nice touch for user experience.
apps/cli/templates/auth/web/angular/src/components/dashboard/dashboard.component.ts (1)
4-11: Well-structured standalone component following Angular best practices.The component correctly implements the standalone pattern, uses appropriate imports, and follows Angular naming conventions. The minimal implementation is perfect for a CLI template that developers can extend.
apps/web/src/lib/constant.ts (1)
84-91: LGTM! Angular framework addition is well-structured.The Angular entry follows the established pattern with all required properties and appropriate default settings. The description is comprehensive and the color scheme is consistent with Angular's branding.
apps/cli/templates/frontend/angular/src/index.html.hbs (1)
9-17: LGTM! PWA conditional logic is properly implemented.The conditional inclusion of PWA manifest and noscript tags based on the addon configuration is well-implemented and follows proper Handlebars templating patterns.
apps/cli/templates/frontend/angular/src/app.component.ts (1)
1-24: LGTM! Clean Angular component implementation.The component follows modern Angular best practices with standalone components, proper dependency injection using
inject(), and appropriate theme initialization on startup.apps/cli/templates/frontend/angular/src/app.routes.ts.hbs (1)
14-25: Well-structured routing configuration.The conditional routing based on features and proper use of route guards demonstrates good Angular routing practices. The wildcard route is correctly placed at the end.
apps/cli/templates/frontend/angular/.gitignore (1)
1-43: Comprehensive and well-structured .gitignore file.This follows Angular CLI best practices, covering all necessary build outputs, dependencies, IDE files, and Angular-specific cache directories. The VS Code exceptions for useful configuration files are appropriate.
apps/cli/templates/frontend/angular/tsconfig.spec.json (1)
1-18: Standard Angular testing TypeScript configuration.The configuration properly extends the base tsconfig, includes necessary Jasmine types, and follows Angular CLI conventions for test file compilation.
apps/cli/src/prompts/api.ts (1)
19-19: Good addition of Angular detection.The Angular detection follows the same pattern as other frontend frameworks.
apps/cli/templates/frontend/angular/tsconfig.app.json (1)
1-30: LGTM! Well-structured TypeScript configuration.The configuration follows Angular CLI conventions with appropriate path mappings and file inclusion/exclusion patterns. The
@server/*path mapping effectively enables cross-boundary imports between frontend and backend in the monorepo structure.apps/cli/templates/frontend/angular/src/components/home/home.component.ts.hbs (1)
9-22: Well-implemented conditional service integration.The component correctly uses standalone architecture and conditionally injects the RPC service only when needed. The TanStack Query integration follows Angular best practices.
apps/cli/templates/addons/pwa/apps/web/angular/ngsw-config.json (1)
1-30: Excellent PWA service worker configuration.The configuration properly implements Angular PWA best practices with appropriate caching strategies:
- App assets are prefetched for immediate availability
- Media assets use lazy loading with background updates
- File patterns comprehensively cover necessary resources
apps/cli/templates/auth/web/angular/src/components/auth/login/login.component.html (1)
7-22: Excellent form integration with TanStack and Angular.The TanStack form integration is well-implemented with proper validation, error handling, and Angular control flow. Good accessibility with proper labels and IDs.
apps/cli/templates/frontend/angular/src/polyfills.ts (1)
1-53: LGTM! Standard Angular polyfills configuration.This is a well-structured polyfills file that follows Angular conventions with proper documentation and zone.js configuration guidance.
apps/cli/templates/frontend/angular/tsconfig.json (1)
1-43: Excellent TypeScript configuration with strict settings.The configuration enables strict typing and modern Angular compiler options, which will help catch errors early and improve code quality.
apps/cli/templates/frontend/angular/src/components/home/home.component.html.hbs (1)
18-28:✅ Verification successful
Verify template processing order and syntax consistency.
The template mixes Handlebars conditionals with escaped Angular interpolation. Ensure the build process correctly handles this template transformation and consider documenting the dual-templating approach for maintainability.
🏁 Script executed:
#!/bin/bash # Check if other Angular templates use similar Handlebars/Angular syntax mixing fd -e hbs . | head -5 | xargs grep -l "{{.*}}" | xargs grep -C 2 "\\\\{{"Length of output: 73
🏁 Script executed:
#!/bin/bash # Search all Handlebars templates for escaped Angular interpolations (\{{…}}) find . -type f -name '*.hbs' -exec grep -F -Hn '\{{' {} +Length of output: 5032
Confirmed dual-templating pattern is intentional
We’ve verified that escaped Angular interpolations (\{{…}}) appear consistently across all Handlebars templates (Angular, Nuxt, React Native, etc.), so the build pipeline already handles Handlebars first and then emits valid Angular syntax. No template changes are required here.Consider adding a short note in your docs (e.g.
CONTRIBUTING.mdor a newdocs/templates.md) to explain:
- The use of backslashes to escape Handlebars (
\{{…}})- Handlebars → Angular (or Vue/React) transformation order
With that, this comment can be resolved.
apps/cli/templates/auth/web/angular/src/components/auth/login/login.component.ts (1)
9-39: Well-structured Angular component with modern patterns.The component correctly uses standalone architecture, TanStack Form for reactive form handling, Zod for validation, and proper Angular dependency injection patterns. The implementation is consistent with the SignupComponent pattern shown in the relevant code snippets.
apps/cli/templates/frontend/angular/src/app.config.ts.hbs (1)
24-32: Security concern: Review the global withCredentials interceptor.The HTTP interceptor automatically adds
withCredentials: trueto ALL HTTP requests, which includes credentials (cookies, authorization headers) in cross-origin requests. This could be a security risk if the application makes requests to untrusted third-party APIs.Consider making the interceptor more selective:
const withCredentialsInterceptor: HttpInterceptorFn = ( req: HttpRequest<unknown>, next: HttpHandlerFn, ) => { + // Only add credentials for API requests to your own backend + if (!req.url.includes('/api/')) { + return next(req); + } const modifiedReq = req.clone({ withCredentials: true, }); return next(modifiedReq); };apps/cli/templates/auth/web/angular/src/components/auth/signup/signup.component.ts (1)
37-38: LGTM: Good use of reactive form state.The reactive approach to tracking form submission state is well implemented and follows TanStack Form best practices.
apps/cli/templates/frontend/angular/package.json (1)
14-21:✅ Verification successful
Verify Angular 20.0.0 availability and stability.
Angular 20.0.0 appears to be a very recent or potentially unreleased version. Ensure this version is stable and publicly available to avoid installation failures.
🌐 Web query:
What is the latest stable version of Angular as of June 2025?💡 Result:
As of June 2025, the latest stable version of Angular is Angular 20.0.2, released on June 6, 2025. Angular 20 was initially released on May 28, 2025, approximately one week and four days ago[2].
Angular 20 brings several significant improvements and features, including:
- Further stabilized reactivity based on the Signals API, with three key APIs (effect, linkedSignal, and toSignal) now designated as stable[8]
- A developer preview of zoneless architecture (without ZoneJS) to improve performance[8]
- Experimental support for the vitest testing framework as a replacement for the deprecated Karma test runner[8]
- Improved server-side rendering with stable incremental hydration[8]
- Angular-specific profiling in Chrome DevTools[8]
Angular follows a semantic versioning system (major.minor.patch) and has a regular release cycle with major versions approximately every six months[1][5]. Each Angular release is supported for 18 months - six months of active support with regular updates followed by 12 months of long-term support (LTS) with security-only fixes[8][9].
Prior to Angular 20, Angular 19 was released in November 2024, with version 19.2.14 being the latest update to that major version as of May 28, 2025[6].
Citations:
- 1: https://angular.dev/reference/releases
- 2: https://endoflife.date/angular
- 3: https://en.wikipedia.org/wiki/Angular_(web_framework)
- 4: https://javascript.plainenglish.io/stop-what-youre-doing-angular-20-s-new-superpowers-will-change-how-you-code-forever-7b8faddb4989
- 5: https://www.sparkcodehub.com/angular/basics/angular-history-and-versions
- 6: https://www.c-metric.com/blog/angular-version-history/
- 7: microsoft/vscode-copilot-release#3663
- 8: https://devclass.com/2025/06/04/angular-20-focus-on-reactivity-and-performance-possible-solution-for-deprecated-karma-testing/
- 9: https://tuxcare.com/blog/rethinking-your-angular-end-of-life-eol-strategy/
- 10: https://www.tektutorialshub.com/angular/angular-versions-history/
Angular 20.0.x Dependency Is Stable and Available
The initial Angular 20.0.0 release went live on May 28, 2025, and the latest patch (20.0.2) was published on June 6, 2025. Your use of
"^20.0.0"will automatically pick up these patch releases, so the dependency is both stable and installable as specified. No changes required.apps/cli/src/validation.ts (1)
402-415: LGTM! Consistent validation pattern.The Angular validation logic follows the same pattern as other frameworks and correctly prevents incompatible combinations with tRPC.
apps/cli/templates/examples/todo/web/angular/src/components/todo-list/todo-list.component.ts.hbs (2)
19-26: LGTM! Proper query and mutation setup.The query and mutation setup follows TanStack Query best practices with proper invalidation and form handling.
42-43: 🛠️ Refactor suggestionReplace deprecated
nonempty()withmin(1).The
nonempty()method is deprecated in recent versions of Zod. Usemin(1)instead for consistency with current best practices.-todo: z.string().nonempty("Todo is required"), +todo: z.string().min(1, "Todo is required"),Likely an incorrect or invalid review comment.
apps/cli/templates/frontend/angular/src/components/header/header.component.html.hbs (2)
1-31: LGTM! Clean navigation structure.The navigation structure is well-organized with proper conditional rendering and router integration.
91-93:⚠️ Potential issueFix template interpolation escaping.
The double backslashes in the template suggest incorrect escaping. Angular template interpolation should use single curly braces.
-\{{ userInitial }} +{{ userInitial }} -\{{ authService.user()?.name }} +{{ authService.user()?.name }}Also apply to lines 101-102:
-\{{ this.authService.user()?.name }} +{{ this.authService.user()?.name }} -\{{ this.authService.user()?.email }} +{{ this.authService.user()?.email }}Likely an incorrect or invalid review comment.
apps/web/src/app/(home)/_components/stack-builder.tsx (1)
94-94: Excellent Angular integration implementation.The Angular support has been comprehensively and consistently integrated throughout the stack builder:
✅ Added to web frontend detection functions
✅ Included in PWA and Tauri compatibility checks
✅ Properly handles tRPC → oRPC conversion requirement
✅ Correctly excludes AI example (consistent with Solid)
✅ Maintains consistency with existing framework patternsThe implementation correctly reflects Angular's current limitations and requirements in the stack.
Also applies to: 104-104, 116-116, 560-560, 658-664, 704-713, 740-740, 748-748, 752-752, 1115-1122, 1329-1335
apps/cli/templates/api/orpc/web/angular/src/services/rpc.service.ts.hbs (1)
30-42: Good implementation of RPC client with credentials.The RPC client setup is well-structured with proper credential handling and environment-based URL configuration. The public utils exposure provides good integration with TanStack Query.
apps/cli/templates/auth/web/angular/src/services/auth.service.ts (1)
81-83: Good synchronous authentication state check.The
isLoggedIn()method provides a clean synchronous way to check authentication state, which is useful for guards and conditional rendering.apps/cli/templates/examples/todo/web/angular/src/components/todo-list/todo-list.component.html (2)
29-33: Excellent use of modern Angular control flow.Good use of
@ifand@forcontrol flow syntax with proper error handling display. The reactive validation feedback enhances user experience.
47-47: Good accessibility and user experience.The todo toggle functionality includes proper aria-labels and visual feedback. The mutation-driven approach with TanStack Query provides good user experience.
apps/cli/templates/frontend/angular/angular.json.hbs (2)
62-64: Excellent conditional PWA configuration.The conditional service worker configuration based on PWA addon selection is well-implemented and follows good templating practices.
49-60: Well-configured bundle budgets.The budget configuration provides reasonable limits for initial bundle size and component styles, helping maintain performance standards.
apps/cli/src/helpers/project-generation/template-manager.ts (9)
7-7: Good addition for Angular PWA support.The import of
addPackageDependencyis correctly added to support Angular service worker dependency injection in the PWA addon setup.
74-74: Consistent Angular detection pattern.The
hasAngularWebvariable follows the same naming convention and detection pattern as other frameworks.
80-80: Angular properly included in web framework condition.Angular is correctly added to the conditional check for web frameworks alongside existing frameworks.
185-201: Angular template setup follows established pattern.The Angular template setup correctly follows the same pattern as other frameworks with proper path construction and API template support for both ORPC and tRPC.
400-400: Angular detection added to auth template setup.Consistent with the pattern established in other functions.
457-457: Angular included in auth web framework condition.Properly integrated into the conditional logic for web auth templates.
525-531: Angular auth template setup is correct.The auth template setup for Angular follows the same pattern as other frameworks without conditional API restrictions (unlike Svelte and Solid which only support ORPC).
598-607: Angular PWA addon setup with dependency injection.The Angular PWA setup correctly:
- Uses a dedicated Angular PWA template path
- Adds the required
@angular/service-workerdependency to the web app directory- Follows the established addon pattern
This is a good implementation that handles Angular's specific PWA requirements.
645-645: Angular detection added to examples template.Consistent with other framework detections in the examples setup.
apps/cli/templates/frontend/angular/src/styles.css (5)
1-4: Modern Tailwind CSS v4 integration.The file correctly uses the new
@import 'tailwindcss'syntax and defines a custom dark mode variant using the modern CSS nesting approach.
5-53: Well-structured theme variables and animations.The theme definition includes:
- Comprehensive color palettes for primary, success, warning, and error states
- Custom animation variables for reusable animations
- Properly defined keyframes for fadeIn and slideIn effects
The color scale follows Tailwind's naming convention (50-900) and the animations are appropriately subtle.
55-71: Good compatibility handling for Tailwind v4.The compatibility styles properly address the border color change in Tailwind v4. The comment clearly explains the purpose and future migration path.
73-103: Comprehensive utility classes for common UI patterns.The utility classes provide:
- Base button styles with consistent spacing and transitions
- Primary and secondary button variants with proper dark mode support
- Input field styling with focus states
- Card, todo-item, and icon-button utilities
All utilities properly implement dark mode variants and smooth transitions.
104-125: Solid base styles with accessibility considerations.The base styles establish:
- Proper typography hierarchy
- System font stack fallback
- Full viewport height coverage
- Consistent transition effects
- Dark mode support throughout
The implementation follows modern CSS best practices.
apps/cli/templates/frontend/angular/src/components/header/header.component.ts.hbs (4)
1-14: Modern Angular component structure.The component correctly uses:
- Standalone component pattern (Angular 17+)
- Modern import syntax
- Proper decorator configuration
- Conditional imports with Handlebars templating
The structure follows Angular best practices.
17-20: Good use of dependency injection and reactive patterns.The component properly:
- Uses
inject()for dependency injection (modern Angular pattern)- Exposes reactive
darkMode$observable from theme service- Manages local state for menu visibility
This follows current Angular best practices.
21-37: Well-structured conditional authentication features.The authentication section properly:
- Uses conditional compilation with Handlebars
- Exposes authentication state as observable
- Provides computed user initial from user name
- Implements menu toggling with proper state management
- Handles logout with menu cleanup
The implementation is clean and follows Angular patterns.
38-48: Clean theme management implementation.The theme functionality correctly:
- Toggles theme menu with proper state isolation
- Delegates theme setting to the service
- Closes menu after theme selection
- Supports light, dark, and system modes
The implementation is straightforward and effective.
apps/cli/templates/addons/pwa/apps/web/angular/public/manifest.webmanifest
Outdated
Show resolved
Hide resolved
apps/cli/templates/frontend/angular/src/components/not-found/not-found-component.ts
Outdated
Show resolved
Hide resolved
apps/cli/templates/api/orpc/web/angular/src/services/rpc.service.ts.hbs
Outdated
Show resolved
Hide resolved
apps/cli/templates/auth/web/angular/src/services/auth.service.ts
Outdated
Show resolved
Hide resolved
apps/cli/templates/auth/web/angular/src/services/auth.service.ts
Outdated
Show resolved
Hide resolved
apps/cli/templates/examples/todo/web/angular/src/components/todo-list/todo-list.component.html
Outdated
Show resolved
Hide resolved
|
Dont worry ill fix the conflicts 👍 |
|
Thank you ✌️, looking forward to use it. 😁 |
|
Serious ques. Why do you like angular? I am not able to understand anything here. How will i be able to maintain it :( |
|
@Vijayabaskar56 how to fix this? |
|
Hey I am Vijayabaskar, this is a work account , Basically, angular compiler is extending is type check to the backend itself when import something from the server , and it doesn't have native type support for node environments, so need to add the env type def mannually , here is a reference repo and file |
but it seems too much hassle for you and you decided not to include angular in the stack , I okay with the decision as well. |
|
If nobody wants Angular, maybe we just don’t bother with it at all? 😄 |
AmanVarshney01
force-pushed
the
main
branch
2 times, most recently
from
6227ae8 to
864e863
Compare
Angular Stack Added to FrontEnd
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Documentation
.editorconfig,.gitignore, and TypeScript configs.Style