Angular 18 is the framework used throughout Part 5 to build the full-stack client for the BlogApp ASP.NET Core Web API. The Angular CLI is the primary tool for creating projects, generating components, running the dev server, and building for production. Unlike raw webpack configuration, the CLI handles build orchestration, TypeScript compilation, CSS preprocessing, and code splitting automatically. This lesson covers the complete setup from Node.js installation through to a running Angular project connected to the .NET backend.
Angular CLI Setup
// ── Install Node.js (LTS) and the Angular CLI ─────────────────────────────
// node --version → v20.x or later
// npm install -g @angular/cli
// ng version → Angular CLI: 18.x
// ── Create the BlogApp Angular project ────────────────────────────────────
// ng new blog-app
// ? Would you like to add Angular routing? Yes
// ? Which stylesheet format would you like to use? SCSS
// cd blog-app
// ng serve → http://localhost:4200
// ── Generated project structure ───────────────────────────────────────────
// blog-app/
// ├── src/
// │ ├── app/
// │ │ ├── app.component.ts ← root component
// │ │ ├── app.component.html
// │ │ ├── app.component.scss
// │ │ ├── app.component.spec.ts ← unit test
// │ │ ├── app.config.ts ← standalone bootstrap config
// │ │ └── app.routes.ts ← route definitions
// │ ├── environments/
// │ │ ├── environment.ts ← development config
// │ │ └── environment.prod.ts ← production config
// │ ├── index.html
// │ ├── main.ts ← bootstrap entry point
// │ └── styles.scss ← global styles
// ├── angular.json ← CLI workspace config
// ├── tsconfig.json ← TypeScript config
// └── package.json
// ── Environment configuration — API base URL ──────────────────────────────
// src/environments/environment.ts
export const environment = {
production: false,
apiBaseUrl: 'https://localhost:5001',
signalRUrl: 'https://localhost:5001/hubs',
};
// src/environments/environment.prod.ts
export const environment = {
production: true,
apiBaseUrl: 'https://api.blogapp.com',
signalRUrl: 'https://api.blogapp.com/hubs',
};
// ── Dev server proxy — avoids CORS during development ─────────────────────
// proxy.conf.json
// {
// "/api": {
// "target": "https://localhost:5001",
// "secure": false,
// "changeOrigin": true
// }
// }
// angular.json: "serve": { "options": { "proxyConfig": "proxy.conf.json" } }
// Now Angular's dev server proxies /api/* to the .NET backendNote: The
proxy.conf.json approach proxies API requests through Angular’s webpack dev server, making the API appear to be on the same origin as the Angular app — no CORS headers needed during development. In production, the Angular app and API are on different origins and CORS headers are essential. The proxy is a development convenience that works because the webpack dev server rewrites the request origin. Never rely on the proxy approach in production — configure proper CORS on the ASP.NET Core API for production deployment.Tip: Use
ng generate (or ng g) for all code generation: ng g component features/posts/post-list, ng g service core/services/auth, ng g interface models/post. The CLI generates the correct file structure, creates spec files, and updates imports automatically. In Angular 18, generated components are standalone by default. If you forget --standalone or need to override, use ng g component name --standalone.Warning: Angular 18 uses standalone components by default when you create a new project with the CLI. The traditional NgModule-based architecture is still supported but new projects should use standalone. If you see tutorials using
AppModule, declarations: [], or NgModule, they are using the older pattern. The BlogApp in Part 5 uses the standalone architecture throughout — you will see app.config.ts instead of app.module.ts as the application configuration entry point.Key CLI Commands
// ng new blog-app --routing --style=scss // create project
// ng serve // start dev server (port 4200)
// ng serve --open // start and open browser
// ng build // build for development
// ng build --configuration production // build for production (optimised)
// ng test // run unit tests with Karma
// ng e2e // run end-to-end tests
// ── Code generation ───────────────────────────────────────────────────────
// ng g component features/posts/post-list
// ng g service core/services/posts
// ng g interface models/post-dto
// ng g guard core/guards/auth
// ng g interceptor core/interceptors/auth
// ng g pipe shared/pipes/time-ago
// ── Useful options ────────────────────────────────────────────────────────
// --dry-run (-d) shows what would be generated without creating files
// --skip-tests skip spec file generation
// --flat don't create a subfolderCommon Mistakes
Mistake 1 — Using Node version that is incompatible with Angular CLI
❌ Wrong — Node 16 with Angular 18; some CLI features and build tools fail.
✅ Correct — use Node 20 LTS or later with Angular 18; use nvm to manage multiple Node versions.
Mistake 2 — Hardcoding API URLs in services instead of using environment files
❌ Wrong — http.get('https://localhost:5001/api/posts') in a service; production build still hits localhost.
✅ Correct — use environment.apiBaseUrl in all service HTTP calls; Angular CLI swaps environment files at build time.