Angular project structure

Angular project structure

Explorer

  • .angular…, not committed
  • .git…
  • .huskynew
  • pre-commitnew
  • commit-msgnew
  • .vscode
  • extensions.json
  • launch.json
  • settings.jsonnew
  • tasks.json
  • coverage…new, not committed
  • dist…new, not committed
  • node_modules…, not committed
  • public
  • favicon.ico
  • src
  • index.html
  • main.ts
  • styles.css
  • .editorconfig
  • .gitignore
  • .lintstagedrc.jsonnew
  • .mcp.json
  • .nvmrcnew
  • .prettierignorenew
  • .prettierrc
  • AGENTS.md
  • CLAUDE.md
  • docker-compose.ymlnew
  • README.md
  • angular.json
  • commitlint.config.jsnew
  • eslint.config.jsnew
  • package-lock.json
  • package.json
  • proxy.conf.jsonnew
  • tsconfig.app.json
  • tsconfig.json
  • tsconfig.spec.json
  • vitest-base.config.mtsnew
  1. # Create the workspace (asks for styles, SSR and which AI tools to configure)

    npx @angular/cli@latest new my-app
  2. # Start the dev server on localhost:4200

    cd my-app && npm start
  3. # Generate a component in a feature folder

    npx ng generate component features/orders/orders-list
  4. # Add environment files

    npx ng generate environments
  5. # Add ESLint for TypeScript and templates

    npx ng add angular-eslint
  6. # Add end-to-end tests

    npm init playwright@latest
  7. # Add a shared UI library inside the workspace (Expert)

    npx ng generate library ui