Angular Best Practices: Building Scalable Applications in 2026

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// Feature module example
@NgModule({
  declarations: [
    UsersListComponent,
    UserDetailComponent
  ],
  imports: [
    CommonModule,
    UsersRoutingModule,
    SharedModule
  ]
})
export class UsersModule { }

// Smart Component (Container)
@Component({
  selector: 'app-user-container',
  template: `
    <app-user-list 
      [users]="users$ | async" 
      (userSelected)="onUserSelected($event)">
    </app-user-list>
  `
})
export class UserContainerComponent implements OnInit {
  users$: Observable<User[]>;
  
  constructor(private userService: UserService) {}
  
  ngOnInit() {
    this.users$ = this.userService.getUsers();
  }
  
  onUserSelected(user: User) {
    this.userService.selectUser(user);
  }
}

// Dumb Component (Presentational)
@Component({
  selector: 'app-user-list',
  template: `
    <div *ngFor="let user of users" 
         (click)="userSelected.emit(user)">
      {{ user.name }}
    </div>
  `
})
export class UserListComponent {
  @Input() users: User[];
  @Output() userSelected = new EventEmitter<User>();
}

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductCardComponent {
  @Input() product: Product;
  @Output() addToCart = new EventEmitter<Product>();
  
  onAddToCart() {
    this.addToCart.emit(this.product);
  }
}

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private apiUrl = environment.apiUrl;
  private productsSubject = new BehaviorSubject<Product[]>([]);
  public products$ = this.productsSubject.asObservable();
  
  constructor(private http: HttpClient) {}
  
  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(`${this.apiUrl}/products`)
      .pipe(
        tap(products => this.productsSubject.next(products)),
        catchError(this.handleError)
      );
  }
  
  private handleError(error: HttpErrorResponse): Observable<never> {
    console.error('An error occurred:', error);
    return throwError(() => new Error('Something went wrong'));
  }
}

export class SearchComponent implements OnInit, OnDestroy {
  searchControl = new FormControl('');
  results$: Observable<SearchResult[]>;
  private destroy$ = new Subject<void>();
  
  constructor(private searchService: SearchService) {}
  
  ngOnInit() {
    this.results$ = this.searchControl.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(term => this.searchService.search(term)),
      takeUntil(this.destroy$)
    );
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// actions
export const loadProducts = createAction('[Product List] Load Products');
export const loadProductsSuccess = createAction(
  '[Product API] Load Products Success',
  props<{ products: Product[] }>()
);

// reducer
export const productReducer = createReducer(
  initialState,
  on(loadProductsSuccess, (state, { products }) => ({
    ...state,
    products,
    loading: false
  }))
);

// selector
export const selectAllProducts = createSelector(
  selectProductState,
  (state) => state.products
);

// component usage
export class ProductListComponent implements OnInit {
  products$ = this.store.select(selectAllProducts);
  
  constructor(private store: Store) {}
  
  ngOnInit() {
    this.store.dispatch(loadProducts());
  }
}

const routes: Routes = [
  {
    path: 'products',
    loadChildren: () => import('./products/products.module')
      .then(m => m.ProductsModule)
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module')
      .then(m => m.AdminModule),
    canLoad: [AuthGuard]
  }
];

@Component({
  template: `
    <div *ngFor="let item of items; trackBy: trackByFn">
      {{ item.name }}
    </div>
  `
})
export class ItemListComponent {
  items: Item[];
  
  trackByFn(index: number, item: Item): number {
    return item.id;
  }
}

describe('ProductService', () => {
  let service: ProductService;
  let httpMock: HttpTestingController;
  
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [ProductService]
    });
    
    service = TestBed.inject(ProductService);
    httpMock = TestBed.inject(HttpTestingController);
  });
  
  it('should fetch products', () => {
    const mockProducts: Product[] = [
      { id: 1, name: 'Product 1' },
      { id: 2, name: 'Product 2' }
    ];
    
    service.getProducts().subscribe(products => {
      expect(products).toEqual(mockProducts);
    });
    
    const req = httpMock.expectOne(`${service.apiUrl}/products`);
    expect(req.request.method).toBe('GET');
    req.flush(mockProducts);
  });
  
  afterEach(() => {
    httpMock.verify();
  });
});

// Using DomSanitizer for trusted content
export class SafeHtmlComponent {
  trustedHtml: SafeHtml;
  
  constructor(private sanitizer: DomSanitizer) {}
  
  setSafeContent(html: string) {
    this.trustedHtml = this.sanitizer.sanitize(
      SecurityContext.HTML, 
      html
    );
  }
}

// HTTP Interceptor for authentication
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const authToken = this.authService.getToken();
    
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${authToken}`)
    });
    
    return next.handle(authReq);
  }
}

// Follow naming conventions
// user.service.ts
export class UserService { }

// user-list.component.ts
export class UserListComponent { }

// user.model.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

// Use barrel exports for cleaner imports
// index.ts
export * from './user.service';
export * from './user.model';
export * from './user-list.component';