Monorepo Fixes Summary

Issues Fixed

1. ✅ CommonModule Incompatibility (371 Files)

Problem: Angular 20 standalone components cannot import CommonModule
Error: Component imports must be standalone components, directives, pipes, or must be NgModules

Solution:

• Created automated fix script: tools/scripts/fix-commonmodule-imports.js
• Fixed 347 files across the monorepo
• Replaced CommonModule with specific imports: NgClass, NgStyle, NgIf, NgFor, AsyncPipe, etc.

Files Fixed:

• libs/ux-ui-core - 15 files
• libs/widgets - 42 files
• libs/* - 290+ other files

2. ✅ Build Script Path Error

Problem: build-angular-library.js had incorrect require path
Error: Cannot find module '../../fix-max-listeners.js'

Solution:

• Fixed require path in tools/scripts/build-scripts/build-angular-library.js
• Changed from ../../fix-max-listeners.js to ../fix-max-listeners.js

Verified Working Libraries

• ✅ ux-ui-core - builds successfully
• ✅ widgets - builds successfully
• ✅ ux-top-nav - builds successfully
• ✅ storage-system - builds successfully

Best Practices Going Forward

For Angular 20 Components

DON'T:

import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [CommonModule],  // ❌ ERROR
})

DO:

import { NgClass, NgIf } from '@angular/common';

@Component({
  standalone: true,
  imports: [NgClass, NgIf],  // ✅ CORRECT
})

BEST:

// Use Angular 20 built-in control flow (no imports needed!)
@Component({
  template: `
    @if (condition) {
      <div>Content</div>
    }
  `
})

Build Commands

# Build specific library
yarn nx build library-name

# Build with fresh cache
yarn nx build library-name --skip-nx-cache

# Build all libraries
yarn nx run-many -t build --all

# Fix CommonModule issues
node tools/scripts/fix-commonmodule-imports.js libs

Tools Created

1. fix-commonmodule-imports.js - Automatically fixes CommonModule imports

   node tools/scripts/fix-commonmodule-imports.js libs --dry-run  # Preview
   node tools/scripts/fix-commonmodule-imports.js libs            # Apply
   

Documentation

• 📖 docs/@angular20-standalone-rules.md - Complete Angular 20 rules reference
• 📖 docs/@monorepo-fixes-summary.md - This file

Status

All critical issues resolved ✅

The monorepo is now properly configured for Angular 20 with standalone components.