mnky/NGRX-Playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement tasks feature using NGRX signals and remove the old counter store, alongside general project configuration and skill documentation updates.
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Dennis Hundertmark
2026-03-08 09:50:17 +01:00
parent 2184971175
commit 9d13cc652a
47 changed files with 15272 additions and 14144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/angular-tooling/references/tooling-patterns.md
+158 -173
View File
@@ -25,30 +25,21 @@ schematics blank --name=my-schematics
```typescript
// src/my-component/index.ts
import {
Rule,
SchematicContext,
Tree,
apply,
url,
template,
move,
mergeWith,
} from "@angular-devkit/schematics";
import { strings } from "@angular-devkit/core";
import { Rule, SchematicContext, Tree, apply, url, template, move, mergeWith } from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';
export function myComponent(options: { name: string; path: string }): Rule {
return (tree: Tree, context: SchematicContext) => {
const templateSource = apply(url("./files"), [
template({
...options,
...strings,
}),
move(options.path),
]);
return (tree: Tree, context: SchematicContext) => {
const templateSource = apply(url('./files'), [
template({
...options,
...strings,
}),
move(options.path),
]);
return mergeWith(templateSource)(tree, context);
};
return mergeWith(templateSource)(tree, context);
};
}
```
@@ -68,23 +59,23 @@ ng generate my-schematics:my-component --name=test --path=src/app
```json
{
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
},
{
"type": "anyScript",
"maximumWarning": "100kB",
"maximumError": "200kB"
}
]
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
},
{
"type": "anyScript",
"maximumWarning": "100kB",
"maximumError": "200kB"
}
]
}
```
@@ -105,16 +96,14 @@ last 2 Edge versions
```typescript
// Lazy load routes for automatic code splitting
export const routes: Routes = [
{
path: "admin",
loadChildren: () =>
import("./admin/admin.routes").then((m) => m.adminRoutes),
},
{
path: "reports",
loadComponent: () =>
import("./reports/reports.component").then((m) => m.Reports),
},
{
path: 'admin',
loadChildren: () => import('./admin/admin.routes').then((m) => m.adminRoutes),
},
{
path: 'reports',
loadComponent: () => import('./reports/reports.component').then((m) => m.Reports),
},
];
```
@@ -124,24 +113,20 @@ Ensure proper imports for tree shaking:
```typescript
// Good - tree shakeable
import { map, filter } from "rxjs";
import { map, filter } from 'rxjs';
// Avoid - imports entire library
import * as rxjs from "rxjs";
import * as rxjs from 'rxjs';
```
### Preload Strategy
```typescript
// app.config.ts
import {
provideRouter,
withPreloading,
PreloadAllModules,
} from "@angular/router";
import { provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes, withPreloading(PreloadAllModules))],
providers: [provideRouter(routes, withPreloading(PreloadAllModules))],
};
```
@@ -194,11 +179,11 @@ ng serve admin-app
```json
// projects/shared-ui/ng-package.json
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/shared-ui",
"lib": {
"entryFile": "src/public-api.ts"
}
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/shared-ui",
"lib": {
"entryFile": "src/public-api.ts"
}
}
```
@@ -206,11 +191,11 @@ ng serve admin-app
```typescript
// After building library: ng build shared-ui
import { Button } from "shared-ui";
import { Button } from 'shared-ui';
@Component({
imports: [Button],
template: `<lib-button>Click</lib-button>`,
imports: [Button],
template: `<lib-button>Click</lib-button>`,
})
export class App {}
```
@@ -224,40 +209,40 @@ export class App {}
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: "20"
cache: "npm"
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Install dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Lint
run: npm run lint
- name: Test
run: npm run test -- --watch=false --browsers=ChromeHeadless --code-coverage
- name: Test
run: npm run test -- --watch=false --browsers=ChromeHeadless --code-coverage
- name: Build
run: npm run build -- -c production
- name: Build
run: npm run build -- -c production
- name: Upload coverage
uses: codecov/codecov-action@v3
with:
files: ./coverage/lcov.info
- name: Upload coverage
uses: codecov/codecov-action@v3
with:
files: ./coverage/lcov.info
```
### GitLab CI
@@ -267,33 +252,33 @@ jobs:
image: node:20
cache:
paths:
- node_modules/
- .angular/cache/
paths:
- node_modules/
- .angular/cache/
stages:
- install
- test
- build
- install
- test
- build
install:
stage: install
script:
- npm ci
stage: install
script:
- npm ci
test:
stage: test
script:
- npm run lint
- npm run test -- --watch=false --browsers=ChromeHeadless
stage: test
script:
- npm run lint
- npm run test -- --watch=false --browsers=ChromeHeadless
build:
stage: build
script:
- npm run build -- -c production
artifacts:
paths:
- dist/
stage: build
script:
- npm run build -- -c production
artifacts:
paths:
- dist/
```
## Path Aliases
@@ -302,16 +287,16 @@ build:
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@app/*": ["src/app/*"],
"@env/*": ["src/environments/*"],
"@shared/*": ["src/app/shared/*"],
"@features/*": ["src/app/features/*"],
"@core/*": ["src/app/core/*"]
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@app/*": ["src/app/*"],
"@env/*": ["src/environments/*"],
"@shared/*": ["src/app/shared/*"],
"@features/*": ["src/app/features/*"],
"@core/*": ["src/app/core/*"]
}
}
}
}
```
@@ -319,10 +304,10 @@ build:
```typescript
// Instead of relative imports
import { User } from "../../../core/services/user.service";
import { User } from '../../../core/services/user.service';
// Use path alias
import { User } from "@core/services/user.service";
import { User } from '@core/services/user.service';
```
## Proxy Configuration
@@ -332,18 +317,18 @@ import { User } from "@core/services/user.service";
```json
// proxy.conf.json
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true
},
"/auth": {
"target": "http://localhost:4000",
"secure": false,
"pathRewrite": {
"^/auth": ""
"/api": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true
},
"/auth": {
"target": "http://localhost:4000",
"secure": false,
"pathRewrite": {
"^/auth": ""
}
}
}
}
```
@@ -351,11 +336,11 @@ import { User } from "@core/services/user.service";
```json
{
"serve": {
"options": {
"proxyConfig": "proxy.conf.json"
"serve": {
"options": {
"proxyConfig": "proxy.conf.json"
}
}
}
}
```
@@ -371,14 +356,14 @@ ng serve --proxy-config proxy.conf.json
```json
{
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"browser": "src/main.ts"
}
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"browser": "src/main.ts"
}
}
}
}
}
```
@@ -391,17 +376,17 @@ ng add @angular/ssr
```json
{
"architect": {
"build": {
"options": {
"server": "src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "server.ts"
"architect": {
"build": {
"options": {
"server": "src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "server.ts"
}
}
}
}
}
}
}
```
@@ -411,19 +396,19 @@ ng add @angular/ssr
```json
{
"configurations": {
"development": {
"sourceMap": true
},
"production": {
"sourceMap": {
"scripts": true,
"styles": false,
"hidden": true,
"vendor": false
}
"configurations": {
"development": {
"sourceMap": true
},
"production": {
"sourceMap": {
"scripts": true,
"styles": false,
"hidden": true,
"vendor": false
}
}
}
}
}
```
@@ -447,16 +432,16 @@ ng test --browsers=Chrome
```json
{
"scripts": {
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build -c production",
"test": "ng test",
"test:ci": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
"lint": "ng lint",
"lint:fix": "ng lint --fix",
"analyze": "ng build -c production --stats-json && npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open",
"update": "ng update"
}
"scripts": {
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build -c production",
"test": "ng test",
"test:ci": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
"lint": "ng lint",
"lint:fix": "ng lint --fix",
"analyze": "ng build -c production --stats-json && npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open",
"update": "ng update"
}
}
```