@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/.cursor/rules/ux/ux-ui-foundations.mdc

@@ -0,0 +1,235 @@
+---
+description: UI/UX Foundations for AI Agents with Modus 2 + Tailwind v4
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# UI/UX Foundations for AI Agents
+
+**Scope**: Modus 2 Angular Components + Tailwind v4 (Real Config Alignment)
+
+> This file is grounded in your **real Modus 2 Angular + Tailwind v4 setup**. It uses the exact variables, color tokens, and CSS conventions from your implementation.
+
+---
+
+# Foundation & Setup
+
+## 1 Color System — From Angular Design System
+
+### Semantic Mapping
+
+Use Tailwind v4 tokens defined in your `src/styles.css`. **Do not use arbitrary colors.**
+
+| Purpose    | Tailwind Token                               | CSS Variable (from src/styles.css)                         |
+| ---------- | -------------------------------------------- | ---------------------------------------------------------- |
+| Background | `bg-background`                              | `--background` → `var(--modus-wc-color-base-page)`         |
+| Foreground | `text-foreground`                            | `--foreground` → `var(--modus-wc-color-base-content)`      |
+| Card       | `bg-card`                                    | `--card` → `var(--modus-wc-color-base-100)`                |
+| Card Text  | `text-card-foreground`                       | `--card-foreground` → `var(--modus-wc-color-base-content)` |
+| Primary    | `bg-primary` / `text-primary-foreground`     | `--primary` → `var(--modus-wc-color-info)`                 |
+| Secondary  | `bg-secondary` / `text-secondary-foreground` | `--secondary` → `var(--modus-wc-color-base-300)`           |
+| Muted      | `bg-muted` / `text-muted-foreground`         | `--muted` → `var(--modus-wc-color-base-200)`               |
+| Success    | `bg-success` / `text-success-foreground`     | `--success` → `var(--modus-wc-color-success)`              |
+| Warning    | `bg-warning` / `text-warning-foreground`     | `--warning` → `var(--modus-wc-color-warning)`              |
+| Error      | `bg-error` / `text-error-foreground`         | `--error` → `var(--modus-wc-color-error)`                  |
+| Border     | `border-border`                              | `--border` → `var(--modus-wc-color-base-200)`              |
+| Ring       | `ring`                                       | `--ring` → `var(--modus-wc-color-info)`                    |
+
+**Rules:**
+
+- Never use `#hex`, RGB, or inline color CSS.
+- All visual hierarchy comes from semantic tokens.
+- Respect light/dark context (CSS variables auto-handle switching).
+- Use custom border utilities (`.border-default`, `.border-primary`, etc.) for Tailwind v4 compatibility.
+- Use opacity utilities (`.text-foreground-80`, `.bg-primary-20`, etc.) for transparency.
+
+## 2 Tailwind v4 Configuration
+
+Tailwind v4 reads CSS variables directly from `src/styles.css`. No separate `tailwind.config.js` is required.
+
+All colors are defined in `src/styles.css` under `:root`:
+
+```css
+:root {
+  --background: var(--modus-wc-color-base-page);
+  --foreground: var(--modus-wc-color-base-content);
+  --card: var(--modus-wc-color-base-100);
+  --card-foreground: var(--modus-wc-color-base-content);
+  --muted: var(--modus-wc-color-base-200);
+  --muted-foreground: var(--modus-wc-color-base-content);
+  --secondary: var(--modus-wc-color-base-300);
+  --secondary-foreground: var(--modus-wc-color-base-content);
+  --primary: var(--modus-wc-color-info);
+  --primary-foreground: var(--modus-wc-color-base-page);
+  --success: var(--modus-wc-color-success);
+  --success-foreground: var(--modus-wc-color-base-page);
+  --warning: var(--modus-wc-color-warning);
+  --warning-foreground: var(--modus-wc-color-base-content);
+  --error: var(--modus-wc-color-error);
+  --error-foreground: var(--modus-wc-color-base-page);
+  --border: var(--modus-wc-color-base-200);
+  --ring: var(--modus-wc-color-info);
+}
+```
+
+**Custom Utilities Available:**
+
+- Border utilities: `.border-default`, `.border-thick`, `.border-primary`, `.border-success`, `.border-warning`, `.border-error`
+- Opacity utilities: `.text-foreground-80`, `.bg-primary-20`, etc. (20%, 40%, 60%, 80% variants for all colors)
+
+---
+
+# Component System
+
+## 3 Example Component System — Modus 2 Angular Wrappers
+
+**REFERENCE**: For more information reference `docs/angular-design-system.mdc`
+
+| Component | Angular Component    | Inputs/Props                       | Usage Rule                                                                 |
+| --------- | -------------------- | ---------------------------------- | -------------------------------------------------------------------------- |
+| Button    | `<modus-button>`     | `color`, `variant`, `size`, `icon` | One primary action per surface. Use `color="primary"` for primary actions. |
+| Card      | `<modus-card>`       | `bordered`, `padding`, `layout`    | For grouping or sectioning. Use `bg-card` + `border-border` in slots.      |
+| Input     | `<modus-text-input>` | `label`, `error`, `disabled`       | Must have a visible `label`. Use error state + ARIA bindings.              |
+| Select    | `<modus-select>`     | `options`, `placeholder`           | Never rely on placeholder as label.                                        |
+| Table     | `<modus-table>`      | `columns`, `data`, `sortable`      | Include empty and loading states.                                          |
+| Modal     | `<modus-modal>`      | `isOpen`, `onClose`, `title`       | Trap focus. ESC closes. Max 3 actions.                                     |
+| Tabs      | `<modus-tabs>`       | `tabs`, `activeKey`                | Keyboard accessible.                                                       |
+| Tooltip   | `<modus-tooltip>`    | `text`, `position`                 | Short contextual hints only.                                               |
+| Icon      | `<modus-icon>`       | `name`, `size`, `variant`          | Follows real Modus naming (kebab-case, outlined default).                  |
+
+## 4 Iconography
+
+**REFERENCE**: For complete icon usage guidelines see `docs/angular-design-system.mdc`
+
+### Import (already handled globally)
+
+Modus icons are imported via the Modus Web Components CDN in `src/styles.css`:
+
+```css
+@import '@trimble-oss/moduswebcomponents/modus-wc-styles.css';
+```
+
+### Supported Usage Patterns
+
+#### A) Angular Component (preferred)
+
+```html
+<!-- Informational icon (announced by screen reader) -->
+<modus-icon name="user-add" size="lg" [decorative]="false" ariaLabel="Add user" />
+
+<!-- Decorative icon (not announced) -->
+<modus-icon name="chevron-right" size="md" [decorative]="true" />
+```
+
+- **Inputs:** `name` (kebab-case), `size`: `'sm' | 'md' | 'lg'`, `decorative`: boolean.
+- **Accessibility:** If `[decorative]="false"`, include `ariaLabel`.
+- **Do not** pass numeric pixel sizes.
+
+#### B) Bare `<i>` Glyph (CDN font)
+
+```html
+<!-- Decorative icon -->
+<i class="modus-icons text-lg" aria-hidden="true">user-add</i>
+
+<!-- Informational icon -->
+<i class="modus-icons text-md" role="img" aria-label="Settings">settings</i>
+```
+
+- Size using Tailwind text utilities (`text-sm`, `text-md`, `text-lg`).
+- Keep color semantic (`text-foreground`, `text-muted-foreground`, etc.).
+
+### Rules
+
+- Naming: **kebab-case** (`file-upload`, `user-add`).
+- Style: outlined default; filled for active/selected states only.
+- One icon per control.
+- In buttons: icon left, `mr-2` or `ml-2` between icon and label, aligned baseline.
+
+---
+
+# Design Principles
+
+## 5 Gestalt Laws in Practice (UI Layout Rules)
+
+**REFERENCE**: For more information referance `.cursor/rules/ux/gestalt-laws-detailed.mdc`
+
+| Law                 | Implementation                                                                 |
+| ------------------- | ------------------------------------------------------------------------------ |
+| **Proximity**       | `gap-2` within a group; `gap-6`–`gap-8` between groups.                        |
+| **Similarity**      | Same purpose = same variant, same size.                                        |
+| **Common Region**   | Group with `<modus-card>` and `class="p-6 bg-card border-default rounded-lg"`. |
+| **Figure/Ground**   | Use `bg-card` over `bg-background` with shadow or border.                      |
+| **Continuity**      | Maintain alignment using `flex`, `items-start`, `justify-between`.             |
+| **Hick's**          | Max 3 visible CTAs per context. Overflow extra in menu.                        |
+| **Fitts's**         | Keep primary CTAs near edited content, 44×44px minimum.                        |
+| **Serial Position** | Primary actions at start or end of flow.                                       |
+| **Prägnanz**        | Remove unnecessary divs, borders, or text. Prefer whitespace.                  |
+
+---
+
+# Implementation Examples
+
+## 6 Example Snippets
+
+### Form Card
+
+```html
+<modus-card class="bg-card border-default rounded-lg">
+  <div slot="title" class="text-foreground text-lg font-medium">Profile</div>
+  <div slot="actions">
+    <modus-button color="primary">Save</modus-button>
+  </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+    <div class="flex flex-col gap-2">
+      <label for="email" class="text-sm text-muted-foreground">Email</label>
+      <modus-text-input id="email" name="email" type="email" required />
+      <div class="text-xs text-muted-foreground">Used for notifications</div>
+    </div>
+  </div>
+</modus-card>
+```
+
+### Toolbar
+
+```html
+<div class="flex items-center justify-between gap-4 border-bottom-default pb-4">
+  <div class="flex items-center gap-2">
+    <modus-icon name="filter-list" size="md" [decorative]="true" />
+    <modus-select placeholder="Sort by" [options]="sortOptions" />
+  </div>
+  <modus-button color="primary" icon="plus" iconPosition="left">New</modus-button>
+</div>
+```
+
+---
+
+# AI Guidelines
+
+## 7 AI Output Contract
+
+- Use `<modus-icon size="sm|md|lg">`, never numeric.
+- Use `[decorative]` and `ariaLabel` correctly in Angular templates.
+- Accept either `<modus-icon>` or `<i class="modus-icons">` per context.
+- All Tailwind utilities must use semantic tokens from `src/styles.css`.
+- Use custom border utilities (`.border-default`, `.border-primary`, etc.) for Tailwind v4 compatibility.
+- Use opacity utilities (`.text-foreground-80`, `.bg-primary-20`, etc.) instead of arbitrary values.
+- Accessibility attributes required for all interactive elements.
+- All motion ≤250ms; respect `prefers-reduced-motion`.
+- Use Tailwind classes (`mr-2`, `ml-2`) instead of inline styles (`[style.margin-right.px]`).
+
+## 8 PR / QA Checklist
+
+- [ ] All UI uses `<modus-*>` Angular components.
+- [ ] Tailwind tokens match design system in `src/styles.css`.
+- [ ] Custom border utilities used for borders (`.border-default`, `.border-primary`, etc.).
+- [ ] Opacity utilities used for transparency (`.text-foreground-80`, `.bg-primary-20`, etc.).
+- [ ] No inline styles except for truly dynamic values.
+- [ ] ARIA, labels, keyboard, and focus verified.
+- [ ] Empty/loading/error states present.
+- [ ] Only one primary CTA per surface.
+- [ ] Spacing follows 4/8 rhythm (`gap-2`, `gap-4`, `gap-8`).
+- [ ] Colors from design system variables only (`--background`, `--primary`, etc. from `src/styles.css`).
+- [ ] No raw Modus variables (`var(--modus-wc-color-*)`) used directly in templates.
+- [ ] No theme attributes; dark/light handled via root vars.
+
+---

package/templates/angular/.cursor/skills/run-lint-checks/SKILL.md

@@ -0,0 +1,169 @@
+---
+name: run-lint-checks
+description: Run comprehensive lint checks for Angular + Vite project to ensure design system compliance, type safety, and code quality. Use when making code changes, before completing tasks, or when the user requests lint checks.
+---
+
+# Run Lint Checks
+
+Automatically run all linting and quality checks for the Angular + Vite project to ensure design system compliance, type safety, and code quality.
+
+## When to Use
+
+- **Before completing any task** - Always run lint checks before marking tasks as complete
+- **After making code changes** - Run checks after modifying TypeScript, HTML, CSS, or SCSS files
+- **Before committing code** - Ensure all quality gates pass before committing
+- **When user requests** - Run checks when explicitly requested by the user
+- **During code review** - Verify code quality and design system compliance
+
+## Instructions
+
+### Mandatory Pre-Completion Checklist
+
+**CRITICAL**: Before marking any development task as complete, you MUST:
+
+1. Run all lint checks using `npm run lint:all`
+2. Fix any violations found
+3. Verify TypeScript type checking passes
+4. Ensure all design system compliance checks pass
+
+### Running Lint Checks
+
+Execute the comprehensive lint check command:
+
+```bash
+npm run lint:all
+```
+
+This command runs all checks in sequence:
+- TypeScript type checking (`npm run type-check`)
+- Color compliance (`npm run lint:colors`)
+- Inline styles validation (`npm run lint:styles`)
+- Border violations (`npm run lint:borders`)
+- Opacity utilities (`npm run lint:opacity`)
+- Icon usage (`npm run lint:icons`)
+- Icon name validation (`npm run lint:icon-names`)
+
+### Individual Lint Commands
+
+If you need to run checks individually:
+
+```bash
+# TypeScript type checking
+npm run type-check
+
+# Design system color compliance
+npm run lint:colors
+
+# Inline styles validation
+npm run lint:styles
+
+# Border pattern violations
+npm run lint:borders
+
+# Opacity utilities validation
+npm run lint:opacity
+
+# Modus icons library validation
+npm run lint:icons
+
+# Icon name validation
+npm run lint:icon-names
+```
+
+### Handling Violations
+
+When violations are found:
+
+1. **Read the error messages carefully** - Each lint script provides specific file locations and violation details
+2. **Fix violations immediately** - Don't proceed until all violations are resolved
+3. **Re-run checks** - After fixing, run `npm run lint:all` again to verify
+4. **Document fixes** - If a fix requires architectural changes, explain the reasoning
+
+### Common Violations to Fix
+
+#### Inline Styles
+```typescript
+// ❌ VIOLATION
+template: `<div style="background-color: var(--modus-wc-color-base-page)">`
+template: `<div [style.margin-right.px]="8">`
+
+// ✅ CORRECT
+template: `<div class="bg-background mr-2 text-foreground">`
+```
+
+#### Color Usage
+```typescript
+// ❌ VIOLATION
+template: `<div style="background-color: #ffffff">`
+template: `<div class="bg-blue-500 text-red-400">`
+
+// ✅ CORRECT
+template: `<div class="bg-background text-foreground">`
+```
+
+#### Icon Usage
+```typescript
+// ❌ VIOLATION
+template: `<i class="fa fa-home"></i>`
+template: `<mat-icon>home</mat-icon>`
+
+// ✅ CORRECT
+template: `<i class="modus-icons">home</i>`
+template: `<modus-icon name="home" />`
+```
+
+#### Border Violations
+```html
+<!-- ❌ VIOLATION -->
+<div class="border border-red-500">Error message</div>
+
+<!-- ✅ CORRECT -->
+<div class="border-destructive">Error message</div>
+```
+
+#### Opacity Violations
+```html
+<!-- ❌ VIOLATION -->
+<div class="text-foreground/80">Text with opacity</div>
+
+<!-- ✅ CORRECT -->
+<div class="text-foreground-80">Text with opacity</div>
+```
+
+## Quality Gates
+
+All of these must pass before code is considered complete:
+
+- [ ] `npm run type-check` - 0 TypeScript errors
+- [ ] `npm run lint:colors` - 0 color violations
+- [ ] `npm run lint:styles` - 0 inline style violations
+- [ ] `npm run lint:borders` - 0 border violations
+- [ ] `npm run lint:opacity` - 0 opacity violations
+- [ ] `npm run lint:icons` - 0 icon violations
+- [ ] `npm run lint:icon-names` - 0 invalid icon names
+
+## Integration with Development Workflow
+
+This skill integrates with the project's development workflow:
+
+1. **During Development**: Run checks periodically to catch issues early
+2. **Before Completion**: Always run `npm run lint:all` before marking tasks complete
+3. **Pre-Commit**: All checks must pass before committing code
+4. **CI/CD**: These same checks run in CI/CD pipelines
+
+## Error Handling
+
+If lint checks fail:
+
+1. **Don't skip or ignore violations** - All violations must be fixed
+2. **Provide clear error messages** - Show the user exactly what failed and where
+3. **Suggest fixes** - When possible, provide specific guidance on how to fix violations
+4. **Re-run after fixes** - Always verify fixes by running checks again
+
+## Notes
+
+- Lint checks are fast and should be run frequently during development
+- Some violations may require architectural changes - discuss these with the user if needed
+- The `lint:all` command stops on first failure - fix issues sequentially
+- All lint scripts are located in `scripts/` directory
+- These checks enforce the Modus Design System compliance requirements

package/templates/angular/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/templates/angular/.github/dependabot.yml

@@ -0,0 +1,19 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/'
+    groups:
+      all-dependencies:
+        patterns:
+          - '*'
+        update-types:
+          - 'minor'
+          - 'patch'
+    schedule:
+      interval: monthly
+    versioning-strategy: increase
+
+  - package-ecosystem: github-actions
+    directory: '/'
+    schedule:
+      interval: weekly

package/templates/angular/.github/workflows/a11y-check.yml

@@ -0,0 +1,135 @@
+name: Check Accessibility
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  a11y-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Angular application
+        run: npm run build
+
+      - name: Install Puppeteer and axe-core
+        run: npm install --save-dev puppeteer axe-core
+
+      - name: Install http-server
+        run: npm install --save-dev http-server
+
+      - name: Start server and run accessibility tests
+        run: |
+          # Start http-server in background
+          npx http-server dist/angular-vite/browser -p 4200 > /dev/null 2>&1 &
+          SERVER_PID=$!
+
+          # Wait for server to be ready
+          sleep 5
+
+          # Run accessibility tests
+          node << EOF
+          const puppeteer = require('puppeteer');
+          const axeCore = require('axe-core');
+
+          (async () => {
+            try {
+              const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
+              const page = await browser.newPage();
+
+              // Helper function to delay (replaces deprecated waitForTimeout)
+              const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+              // Routes to test for accessibility
+              const routes = [
+                '/',
+                '/theme-demo',
+                '/button-demo'
+              ];
+
+              let hasViolations = false;
+
+              // Configure axe-core to disable specific rules
+              const axeConfig = {
+                runOnly: {
+                  type: 'tag',
+                  values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa', 'best-practice']
+                },
+                rules: {
+                  'document-title': { enabled: false },
+                  'html-has-lang': { enabled: false },
+                  'landmark-one-main': { enabled: false },
+                  'page-has-heading-one': { enabled: false },
+                  'region': { enabled: false }
+                }
+              };
+
+              for (const route of routes) {
+                const url = \`http://localhost:4200\${route}\`;
+                console.log(\`Checking accessibility for: \${url}\`);
+
+                try {
+                  await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 });
+
+                  // Wait for Angular to render
+                  await delay(1000);
+
+                  await page.evaluate(axeCore.source);
+                  const results = await page.evaluate((config) => {
+                    return axe.run(document, config);
+                  }, axeConfig);
+
+                  if (results.violations.length > 0) {
+                    console.error(\`❌ Accessibility violations found in \${route}:\`);
+                    results.violations.forEach(violation => {
+                      console.error(\`  - \${violation.id}: \${violation.description}\`);
+                      if (violation.nodes.length > 0) {
+                        violation.nodes.forEach(node => {
+                          console.error(\`    * \${node.html}\`);
+                        });
+                      }
+                    });
+                    hasViolations = true;
+                  } else {
+                    console.log(\`✅ No violations found in \${route}\`);
+                  }
+                } catch (error) {
+                  console.error(\`❌ Error checking \${route}: \${error.message}\`);
+                  hasViolations = true;
+                }
+              }
+
+              await browser.close();
+
+              if (hasViolations) {
+                console.error('❌ Accessibility tests failed. Please fix the issues before merging.');
+                process.exit(1);
+              } else {
+                console.log('✅ All accessibility tests passed!');
+              }
+            } catch (error) {
+              console.error('❌ An error occurred:', error);
+              process.exit(1);
+            }
+          })();
+          EOF
+
+          # Cleanup: Kill the server
+          kill $SERVER_PID 2>/dev/null || true
+
+      - name: Check test results
+        if: failure()
+        run: |
+          echo "❌ Accessibility tests failed. Please fix the issues before merging."
+          exit 1

package/templates/angular/.github/workflows/ci.yml

@@ -0,0 +1,44 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+        # Note: .npmrc contains legacy-peer-deps=true to handle Angular 20.x + Modus compatibility
+
+      - name: Run type checks
+        run: npm run type-check
+
+      - name: Run Modus linting suite
+        run: |
+          npm run lint:colors
+          npm run lint:styles
+          npm run lint:borders
+          npm run lint:opacity
+          npm run lint:icons
+          npm run lint:icon-names
+
+      - name: Build application
+        run: npm run build
+
+      - name: Run tests (if available)
+        run: npm run test -- --watch=false --browsers=ChromeHeadless
+        continue-on-error: true

package/templates/angular/.husky/pre-commit

@@ -0,0 +1,32 @@
+# Run all linting checks before commit
+echo "🔍 Running pre-commit checks..."
+
+# TypeScript type checking
+echo "📝 Checking TypeScript types..."
+npm run type-check
+
+# Design system colors compliance
+echo "🎨 Checking design system colors..."
+npm run lint:colors
+
+# Inline styles compliance
+echo "💅 Checking inline styles..."
+npm run lint:styles
+
+# Border violations compliance
+echo "🔲 Checking border patterns..."
+npm run lint:borders
+
+# Opacity utilities compliance
+echo "🌈 Checking opacity utilities..."
+npm run lint:opacity
+
+# Modus Icons compliance
+echo "🎨 Checking Modus Icons usage..."
+npm run lint:icons
+
+# Icon names validation
+echo "🏷️  Checking icon names..."
+npm run lint:icon-names
+
+echo "✅ All pre-commit checks passed!"

package/templates/angular/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

package/templates/angular/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/templates/angular/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}