// OnPush strategy for performance
@Component({
  selector: 'app-user-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    
{{ user.name }}
    
{{ expensiveCalculation() }}
  `
})
export class UserCardComponent {
  @Input() user: User;
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // This won't run unnecessarily with OnPush
  expensiveCalculation() {
    console.log('Expensive calculation running');
    return this.user.posts.length * 100;
  }
  
  // Manually trigger when needed
  updateUser() {
    this.user = { ...this.user, name: 'Updated' };
    this.cdr.markForCheck();
  }
}

// Ivy's locality principle - each component is self-contained
@Component({
  selector: 'app-feature',
  template: `
{{ title }}
`
})
export class FeatureComponent {
  title = 'Feature';
  
  // Ivy generates this factory function
  static ɵcmp = ɵɵdefineComponent({
    type: FeatureComponent,
    selectors: [['app-feature']],
    factory: () => new FeatureComponent(),
    template: function(rf, ctx) {
      if (rf & 1) {
        ɵɵelementStart(0, 'div');
        ɵɵtext(1);
        ɵɵelementEnd();
      }
      if (rf & 2) {
        ɵɵadvance(1);
        ɵɵtextInterpolate(ctx.title);
      }
    }
  });
}

// Advanced DI patterns
@Injectable()
export class LoggerService {
  log(message: string) {
    console.log(`[${new Date().toISOString()}] ${message}`);
  }
}

// Factory provider for complex initialization
export function loggerFactory(config: AppConfig): LoggerService {
  const logger = new LoggerService();
  if (config.enableDebug) {
    logger.log('Debug mode enabled');
  }
  return logger;
}

@NgModule({
  providers: [
    // Different provider types
    { provide: LoggerService, useClass: LoggerService },
    { provide: API_URL, useValue: 'https://api.example.com' },
    { provide: LoggerService, useFactory: loggerFactory, deps: [AppConfig] },
    
    // Multi-providers for plugin systems
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
    
    // Conditional providers
    {
      provide: DataService,
      useClass: environment.production ? ProdDataService : MockDataService
    }
  ]
})
export class AppModule {}

// AOT compilation transforms this template
@Component({
  template: `
    

      {{ item.name | uppercase }}
    
  `
})
export class ItemsComponent {
  items = [{ id: 1, name: 'Item 1' }];
  
  trackByFn(index: number, item: any) {
    return item.id;
  }
}

// Into this optimized render function
function ItemsComponent_div_0_Template(rf, ctx) {
  if (rf & 1) {
    ɵɵelementStart(0, "div");
    ɵɵtext(1);
    ɵɵelementEnd();
  }
  if (rf & 2) {
    const item_r1 = ctx.$implicit;
    ɵɵadvance(1);
    ɵɵtextInterpolate(ɵɵpipeBind1(2, 1, item_r1.name, "uppercase"));
  }
}

// Create a custom element from Angular component
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'app-widget',
  template: `
    

      
{{ title }}
      
{{ description }}
      Click me
    
  `,
  styles: [`
    .widget { 
      border: 1px solid #ccc; 
      padding: 1rem; 
      border-radius: 4px; 
    }
  `]
})
export class WidgetComponent {
  @Input() title: string;
  @Input() description: string;
  @Output() onClick = new EventEmitter();
}

// Register as custom element
@NgModule({
  declarations: [WidgetComponent],
  entryComponents: [WidgetComponent]
})
export class WidgetModule {
  constructor(private injector: Injector) {}
  
  ngDoBootstrap() {
    const customElement = createCustomElement(WidgetComponent, { injector: this.injector });
    customElements.define('my-widget', customElement);
  }
}

// Use in any HTML (even non-Angular apps)
// 

// Advanced routing patterns
const routes: Routes = [
  {
    path: 'admin',
    canActivate: [AdminGuard],
    canActivateChild: [AdminGuard],
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    data: { preload: true, roles: ['admin'] }
  },
  {
    path: 'user/:id',
    component: UserComponent,
    resolve: { user: UserResolver },
    canDeactivate: [CanDeactivateGuard]
  }
];

// Custom preloading strategy
@Injectable()
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable): Observable {
    // Only preload routes marked with data.preload
    if (route.data && route.data.preload) {
      console.log('Preloading: ' + route.path);
      return fn();
    }
    return of(null);
  }
}

// Route resolver for data fetching
@Injectable()
export class UserResolver implements Resolve {
  constructor(private userService: UserService, private router: Router) {}
  
  resolve(route: ActivatedRouteSnapshot): Observable {
    const id = route.paramMap.get('id');
    return this.userService.getUser(id).pipe(
      catchError(error => {
        this.router.navigate(['/not-found']);
        return EMPTY;
      })
    );
  }
}

import { signal, computed, effect } from '@angular/core';

@Component({
  template: `
    
Count: {{ count() }}
    
Double: {{ doubleCount() }}
    
Message: {{ message() }}
    +
    -
  `
})
export class CounterComponent {
  // Writable signal
  count = signal(0);
  
  // Computed signal (automatically updates when count changes)
  doubleCount = computed(() => this.count() * 2);
  
  // Derived signal with complex logic
  message = computed(() => {
    const value = this.count();
    if (value === 0) return 'Zero';
    if (value < 0) return 'Negative';
    return 'Positive';
  });
  
  constructor() {
    // Effect runs when signals change
    effect(() => {
      console.log(`Count changed to: ${this.count()}`);
      
      // Automatically track dependencies
      if (this.count() > 10) {
        console.log('Count is getting high!');
      }
    });
  }
  
  increment() {
    this.count.update(value => value + 1);
  }
  
  decrement() {
    this.count.set(this.count() - 1);
  }
}

// Standalone component
@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule, FormsModule, MatButtonModule, UserCardComponent],
  template: `
    

      
{{ user.name }}
      
      Edit Profile
    
  `
})
export class UserProfileComponent {
  @Input() user: User;
  
  editProfile() {
    // Edit logic
  }
}

// Standalone directive
@Directive({
  selector: '[appHighlight]',
  standalone: true,
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}
  
  onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
  
  onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = null;
  }
}

// Bootstrap standalone app
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations(),
    importProvidersFrom(BrowserModule)
  ]
});

  
Dashboard
  
  
  
  
  
  @defer (on interaction) {
    
  } @placeholder {
    
Click to load chart
  } @loading (minimum 500ms) {
    
Loading chart...
  } @error {
    
Failed to load chart
  }
  
  
  @defer (on viewport) {
    
  } @placeholder {
    
Scroll down to load comments
  }
  
  
  @defer (when shouldLoadReports && on timer(2s)) {
    
  }
  
  
  @defer (on hover; prefetch on idle) {
    
  }
}

// 1. Tree-shaking optimization
// Instead of importing entire library
import * as _ from 'lodash'; // ❌ Imports entire lodash

// Import only what you need
import { debounce } from 'lodash-es'; // ✅ Tree-shakeable

// 2. Lazy loading with route-based code splitting
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component').then(c => c.DashboardComponent)
  }
];

// 3. Preloading strategies
@Injectable()
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable): Observable {
    // Preload based on user role or usage patterns
    if (this.shouldPreload(route)) {
      return fn();
    }
    return of(null);
  }
  
  private shouldPreload(route: Route): boolean {
    // Custom logic based on analytics, user behavior, etc.
    return route.data?.['priority'] === 'high';
  }
}

// 4. OnPush change detection strategy
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    
{{ data$ | async | json }}
    
    
  `
})
export class OptimizedComponent {
  data$ = this.service.getData();
  
  // Proper trackBy function prevents unnecessary re-renders
  trackByFn(index: number, item: any) {
    return item.id;
  }
}

// HTTP Interceptor for caching
@Injectable()
export class CacheInterceptor implements HttpInterceptor {
  private cache = new Map>();
  
  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    // Only cache GET requests
    if (req.method !== 'GET') {
      return next.handle(req);
    }
    
    // Check cache first
    const cachedResponse = this.cache.get(req.url);
    if (cachedResponse) {
      return of(cachedResponse);
    }
    
    // Make request and cache response
    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cache.set(req.url, event);
        }
      })
    );
  }
}

// Service Worker for offline caching
@Injectable()
export class OfflineService {
  constructor(private swUpdate: SwUpdate) {
    if (swUpdate.isEnabled) {
      // Check for updates
      swUpdate.available.subscribe(() => {
        if (confirm('New version available. Load?')) {
          window.location.reload();
        }
      });
    }
  }
  
  // Cache API responses
  cacheApiResponse(url: string, data: any) {
    if ('caches' in window) {
      caches.open('api-cache').then(cache => {
        cache.put(url, new Response(JSON.stringify(data)));
      });
    }
  }
}

// Advanced component testing
describe('UserListComponent', () => {
  let component: UserListComponent;
  let fixture: ComponentFixture;
  let userService: jasmine.SpyObj;
  
  beforeEach(() => {
    const userServiceSpy = jasmine.createSpyObj('UserService', ['getUsers', 'deleteUser']);
    
    TestBed.configureTestingModule({
      declarations: [UserListComponent],
      imports: [HttpClientTestingModule, NoopAnimationsModule],
      providers: [
        { provide: UserService, useValue: userServiceSpy }
      ]
    });
    
    fixture = TestBed.createComponent(UserListComponent);
    component = fixture.componentInstance;
    userService = TestBed.inject(UserService) as jasmine.SpyObj;
  });
  
  it('should display users when loaded', fakeAsync(() => {
    const mockUsers = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' }
    ];
    
    userService.getUsers.and.returnValue(of(mockUsers));
    
    component.ngOnInit();
    tick(); // Simulate async operation
    fixture.detectChanges();
    
    const userElements = fixture.debugElement.queryAll(By.css('.user-item'));
    expect(userElements.length).toBe(2);
    expect(userElements[0].nativeElement.textContent).toContain('John');
  }));
  
  it('should handle delete user with confirmation', () => {
    spyOn(window, 'confirm').and.returnValue(true);
    userService.deleteUser.and.returnValue(of({}));
    
    component.deleteUser(1);
    
    expect(window.confirm).toHaveBeenCalledWith('Are you sure?');
    expect(userService.deleteUser).toHaveBeenCalledWith(1);
  });
});

// Testing RxJS streams with marble testing
import { TestScheduler } from 'rxjs/testing';

describe('SearchService', () => {
  let testScheduler: TestScheduler;
  let service: SearchService;
  
  beforeEach(() => {
    testScheduler = new TestScheduler((actual, expected) => {
      expect(actual).toEqual(expected);
    });
    
    TestBed.configureTestingModule({
      providers: [SearchService]
    });
    service = TestBed.inject(SearchService);
  });
  
  it('should debounce search queries', () => {
    testScheduler.run(({ cold, expectObservable }) => {
      // Simulate user typing
      const searchTerms = cold('a-b-c-d|', {
        a: 'ang',
        b: 'angu',
        c: 'angul',
        d: 'angular'
      });
      
      const expected = '    ---d|';
      const expectedValues = { d: 'angular' };
      
      const result = searchTerms.pipe(
        debounceTime(300, testScheduler),
        distinctUntilChanged()
      );
      
      expectObservable(result).toBe(expected, expectedValues);
    });
  });
  
  it('should handle error and retry', () => {
    testScheduler.run(({ cold, expectObservable }) => {
      const source = cold('--#--#--a|', { a: 'success' });
      const expected = '   --------a|';
      
      const result = source.pipe(
        retry(2),
        catchError(() => of('fallback'))
      );
      
      expectObservable(result).toBe(expected, { a: 'success' });
    });
  });
});

// NgRx state management
// State interface
interface AppState {
  users: UserState;
  products: ProductState;
  ui: UiState;
}

// Actions
export const loadUsers = createAction('[User] Load Users');
export const loadUsersSuccess = createAction(
  '[User] Load Users Success',
  props<{ users: User[] }>()
);
export const loadUsersFailure = createAction(
  '[User] Load Users Failure',
  props<{ error: string }>()
);

// Reducer
const userReducer = createReducer(
  initialUserState,
  on(loadUsers, state => ({ ...state, loading: true })),
  on(loadUsersSuccess, (state, { users }) => ({
    ...state,
    users,
    loading: false,
    error: null
  })),
  on(loadUsersFailure, (state, { error }) => ({
    ...state,
    loading: false,
    error
  }))
);

// Effects for side effects
@Injectable()
export class UserEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsers),
      switchMap(() =>
        this.userService.getUsers().pipe(
          map(users => loadUsersSuccess({ users })),
          catchError(error => of(loadUsersFailure({ error: error.message })))
        )
      )
    )
  );
  
  constructor(
    private actions$: Actions,
    private userService: UserService
  ) {}
}

// Selectors for derived state
export const selectUserState = (state: AppState) => state.users;
export const selectAllUsers = createSelector(
  selectUserState,
  state => state.users
);
export const selectUserById = (id: number) => createSelector(
  selectAllUsers,
  users => users.find(user => user.id === id)
);

💬 Your Prompt to AI:
"Create an Angular component for a user profile card with:
- User avatar, name, email, and bio
- Edit mode toggle
- Form validation
- Responsive design
- OnPush change detection
- Accessibility features"

🤖 AI generates complete component with:
- TypeScript class with proper typing
- HTML template with semantic markup
- CSS with responsive grid
- Form validation logic
- ARIA attributes for accessibility

💬 You: "My NestJS API returns 500 error, here's the stack trace..."

🤖 AI: "I see 3 potential issues:
1. Missing await in your async function (line 23)
2. Database connection not properly initialized 
3. TypeORM entity relationship misconfigured

Here's the fix for each..."

💬 You: "The database connection issue - can you show me proper setup?"

🤖 AI: "Here's a complete TypeORM configuration with:
- Environment-based config
- Connection pooling
- Error handling
- Migration setup"

💬 Prompt: "Generate comprehensive unit tests for this Angular service"

🤖 AI creates:
- Test setup with proper mocking
- Happy path test cases
- Error handling scenarios
- Edge cases you didn't think of
- Performance tests
- Integration test suggestions

💬 Prompt: "Review this code for potential issues"

🤖 AI identifies:
- Memory leaks (unsubscribed observables)
- Security vulnerabilities (XSS risks)
- Performance bottlenecks
- Accessibility issues
- TypeScript strict mode violations

🎯 Perfect AI Prompt Structure:

"I'm building a [Angular/NestJS] [feature/component/service] for [use case].

Requirements:
- [Specific requirement 1]
- [Specific requirement 2]
- [Performance/security/accessibility needs]

Current tech stack:
- Angular 18 / NestJS 10
- TypeScript strict mode
- [Database/state management tools]

Please provide:
1. Complete implementation
2. Best practices applied
3. Error handling
4. Unit tests
5. Documentation

Focus on [production-ready/scalable/maintainable] code."