{"id":19,"date":"2026-07-04T01:54:15","date_gmt":"2026-07-04T01:54:15","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/angular\/02-angular-cli-setup\/"},"modified":"2026-07-04T09:42:46","modified_gmt":"2026-07-04T09:42:46","slug":"02-angular-cli-setup","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/angular\/02-angular-cli-setup\/","title":{"rendered":"Angular CLI Setup \u2014 Create Your First App (Angular 21+)"},"content":{"rendered":"<p><!-- ktg-updated-banner --><\/p>\n<div class=\"ktg-updated-banner\" style=\"margin:0 0 1.25em;padding:0.75em 1em;background:#fefce8;border-left:4px solid #ca8a04;border-radius:4px;\">\n<p><strong>Updated July 4, 2026.<\/strong> Refreshed for Angular 21 and current SEO best practices.<\/p>\n<\/div>\n<p><!-- ktg-series-toc --><\/p>\n<nav class=\"ktg-series-toc\" aria-label=\"Angular tutorial table of contents\" style=\"margin:1.5em 0;padding:1em 1.25em;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;\">\n<h2>Table of Contents<\/h2>\n<p>Follow the Angular tutorial series in order:<\/p>\n<ol>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/angular\/01-angular-introduction\/\">Lesson 1: Angular Tutorial \u2014 Introduction (2026)<\/a><\/li>\n<li><strong aria-current=\"page\">Lesson 2: Angular CLI Setup \u2014 Create Your First App (Angular 21+)<\/strong><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/angular\/03-angular-components-and-templates\/\">Lesson 3: Angular Components and Templates \u2014 Build Your First UI<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/angular\/04-angular-routing\/\">Lesson 4: Angular Routing \u2014 Navigate Between Pages (Angular 21+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/angular\/05-angular-services-di\/\">Lesson 5: Angular Services and Dependency Injection (Angular 21+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/angular\/06-angular-http-client\/\">Lesson 6: Angular HTTP Client \u2014 Fetch Data from APIs (Angular 21+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/angular\/07-angular-forms\/\">Lesson 7: Angular Forms \u2014 Reactive Forms and Signal Forms Preview (Angular 21+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/angular\/\">\u2190 Back to Angular Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<p>In this lesson you will complete your <strong>Angular CLI setup<\/strong> and create a running Angular 21+ project. By the end you will have a dev server, a editable homepage component, and a mental model of the default project structure.<\/p>\n<p><strong>Prerequisites:<\/strong> Lesson 1 (<a href=\"https:\/\/www.kindsonthegenius.com\/angular\/01-angular-introduction\/\">Angular Introduction<\/a>). <strong>Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n<h4 id=\"prerequisites\">1. Prerequisites: Node.js 22.12+<\/h4>\n<p>Angular 21 requires <strong>Node.js 22.12 or newer<\/strong> and npm. Download the LTS or Current release from <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">nodejs.org<\/a>.<\/p>\n<p>Verify in your terminal:<\/p>\n<pre><code class=\"language-bash\">node --version\nnpm --version\n<\/code><\/pre>\n<p>You should see Node <code>v22.12.x<\/code> or newer. If commands fail, restart the terminal after installing Node.<\/p>\n<p><strong>VS Code extensions (recommended):<\/strong><\/p>\n<ul>\n<li><strong>Angular Language Service<\/strong> \u2014 template autocomplete and diagnostics<\/li>\n<li><strong ESLint<\/strong> \u2014 linting (Angular CLI can add ESLint during <code>ng new<\/code>)<\/li>\n<\/ul>\n<figure style=\"margin:1.5em 0;text-align:center;\"><img decoding=\"async\" src=\"https:\/\/www.kindsonthegenius.com\/angular\/wp-content\/uploads\/2026\/07\/02-angular-cli-setup-section-1.jpg\" alt=\"Terminal running Angular CLI ng serve command\" width=\"1200\" height=\"675\" loading=\"lazy\" style=\"max-width:100%;height:auto;border-radius:8px;border:1px solid #dee2e6;\" \/><figcaption style=\"font-size:0.85em;color:#666;margin-top:0.5em;\">Photo by <a href=\"https:\/\/unsplash.com\/@afgprogrammer?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Mohammad Rahmani<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Unsplash<\/a><\/figcaption><\/figure>\n<h4 id=\"install-cli\">2. Install the Angular CLI<\/h4>\n<p>Install the CLI globally so you can run <code>ng<\/code> from any folder:<\/p>\n<pre><code class=\"language-bash\">npm install -g @angular\/cli@21\nng version\n<\/code><\/pre>\n<p>The output shows your Angular CLI version, Node version, and package versions. Keep CLI and project versions aligned (both 21.x for this series).<\/p>\n<h4 id=\"ng-new\">3. Create a Project with ng new<\/h4>\n<p>Choose a parent folder (for example <code>~\/projects<\/code>) and run:<\/p>\n<pre><code class=\"language-bash\">ng new my-angular-app\n<\/code><\/pre>\n<p>Angular CLI 21 prompts for options. Recommended answers for this tutorial:<\/p>\n<ul>\n<li><strong>Routing?<\/strong> Yes (we use it in later lessons)<\/li>\n<li><strong>Stylesheet format?<\/strong> CSS (simplest) or SCSS if you prefer<\/li>\n<li><strong>SSR \/ SSG?<\/strong> No for now (add later for SEO sites)<\/li>\n<\/ul>\n<p>New Angular 21 projects are <strong>standalone by default<\/strong>, use <strong>Vitest<\/strong> for unit tests, and do <strong>not<\/strong> include zone.js unless you opt in. That means faster startup and more predictable updates \u2014 signals drive change detection.<\/p>\n<pre><code class=\"language-bash\">cd my-angular-app\nng serve\n<\/code><\/pre>\n<p>Open <a href=\"http:\/\/localhost:4200\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:4200\/<\/a> \u2014 you should see the default Angular welcome page.<\/p>\n<h4 id=\"project-structure\">4. Project Structure Walkthrough<\/h4>\n<p>Key files in a fresh Angular 21 app:<\/p>\n<pre><code>my-angular-app\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 app\/\n\u2502   \u2502   \u251c\u2500\u2500 app.ts          # Root standalone component\n\u2502   \u2502   \u251c\u2500\u2500 app.html        # Root template\n\u2502   \u2502   \u251c\u2500\u2500 app.css         # Root styles\n\u2502   \u2502   \u251c\u2500\u2500 app.config.ts   # App-wide providers (router, etc.)\n\u2502   \u2502   \u2514\u2500\u2500 app.routes.ts   # Route definitions\n\u2502   \u251c\u2500\u2500 index.html          # Single HTML shell\n\u2502   \u251c\u2500\u2500 main.ts             # Bootstrap entry point\n\u2502   \u2514\u2500\u2500 styles.css          # Global styles\n\u251c\u2500\u2500 angular.json            # Workspace \/ build configuration\n\u251c\u2500\u2500 package.json            # Dependencies and scripts\n\u2514\u2500\u2500 tsconfig.json           # TypeScript compiler options\n<\/code><\/pre>\n<p>Open <code>src\/app\/app.html<\/code> and replace the default template with:<\/p>\n<pre><code class=\"language-html\">&lt;h1&gt;Hello Angular 21!&lt;\/h1&gt;\n&lt;p&gt;My first Angular app is running.&lt;\/p&gt;\n<\/code><\/pre>\n<p>Save the file \u2014 the browser refreshes automatically (hot reload).<\/p>\n<h4 id=\"vitest\">5. Run Tests with Vitest<\/h4>\n<p>Angular 21 uses <strong>Vitest<\/strong> instead of Karma:<\/p>\n<pre><code class=\"language-bash\">ng test\n<\/code><\/pre>\n<p>Vitest runs faster and fits modern JavaScript tooling. You will write meaningful tests in later lessons; for now, confirm the default spec passes.<\/p>\n<h4 id=\"troubleshooting\">6. Troubleshooting<\/h4>\n<ul>\n<li><strong>Node version too old<\/strong> \u2014 upgrade to 22.12+; use <code>nvm install 22<\/code> if you use nvm<\/li>\n<li><strong>Port 4200 in use<\/strong> \u2014 run <code>ng serve --port 4300<\/code><\/li>\n<li><strong>ng: command not found<\/strong> \u2014 reinstall CLI globally or use <code>npx @angular\/cli@21 new my-app<\/code><\/li>\n<li><strong>Permission errors on npm -g<\/strong> \u2014 fix npm global prefix or use a Node version manager<\/li>\n<\/ul>\n<h4 id=\"next\">7. Next Steps<\/h4>\n<p>Your Angular 21 app is running. Continue to <a href=\"https:\/\/www.kindsonthegenius.com\/angular\/03-angular-components-and-templates\/\">Lesson 3 \u2014 Components and Templates<\/a> to build standalone components, bindings, and signals.<\/p>\n<h4 id=\"faq\">Frequently Asked Questions<\/h4>\n<p><strong>What Node version do I need for Angular 21?<\/strong><br \/>\nNode.js 22.12 or newer. Check with <code>node --version<\/code> before running <code>ng new<\/code>.<\/p>\n<p><strong>Does Angular 21 still use zone.js?<\/strong><br \/>\nNot in new projects by default. Angular 21 scaffolds zoneless apps that rely on signals and explicit change detection. Existing apps can still use zone.js during migration.<\/p>\n<p><strong>Should I use npm, yarn, or pnpm?<\/strong><br \/>\nAny works. This series uses npm because it ships with Node.js.<\/p>\n<p><!-- ktg-faq-schema --><br \/>\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What Node version do I need for Angular 21?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Node.js 22.12 or newer. Verify with node --version before running ng new.\"}},{\"@type\":\"Question\",\"name\":\"Does Angular 21 still use zone.js?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Not in new projects by default. Angular 21 scaffolds zoneless apps using signals.\"}}]}<\/script><\/p>\n<p><!-- ktg-lesson-nav --><\/p>\n<nav class=\"ktg-lesson-nav\" aria-label=\"Lesson navigation\">\n<p><strong>Previous:<\/strong> <a href=\"https:\/\/www.kindsonthegenius.com\/angular\/01-angular-introduction\/\">Lesson 1: Angular Tutorial \u2014 Introduction (2026)<\/a><\/p>\n<p><strong>Next:<\/strong> <a href=\"https:\/\/www.kindsonthegenius.com\/angular\/03-angular-components-and-templates\/\">Lesson 3: Angular Components and Templates \u2014 Build Your First UI<\/a><\/p>\n<\/nav>\n<p><!-- ktg-alkademy-cta --><\/p>\n<div class=\"ktg-alkademy-cta\">\n<p><strong>Want live Angular or frontend classes?<\/strong> Join <a href=\"https:\/\/www.alkademy.com\/courses\" target=\"_blank\" rel=\"noopener noreferrer\">Alkademy<\/a> for instructor-led Angular and frontend courses with hands-on projects.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Updated July 4, 2026. Refreshed for Angular 21 and current SEO best practices. Table of Contents Follow the Angular tutorial series in order: Lesson 1: Angular Tutorial \u2014 Introduction (2026) Lesson 2: Angular CLI Setup \u2014 Create Your First App (Angular 21+) Lesson 3: Angular Components and Templates \u2014 Build Your First UI Lesson 4: &#8230; <a title=\"Angular CLI Setup \u2014 Create Your First App (Angular 21+)\" class=\"read-more\" href=\"https:\/\/www.kindsonthegenius.com\/angular\/02-angular-cli-setup\/\" aria-label=\"Read more about Angular CLI Setup \u2014 Create Your First App (Angular 21+)\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":17,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-19","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-tutorials"],"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/posts\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":4,"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/posts\/19\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/posts\/19\/revisions\/67"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/media\/17"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/media?parent=19"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/categories?post=19"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/angular\/wp-json\/wp\/v2\/tags?post=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}