Xây dựng dự án Angular 2025 - Bí kíp cho "dân chơi" Frontend!

ng new <project-name>

# tạo file .postcssrc.json với nội dung:
echo '{ "plugins": { "@tailwindcss/postcss": {} } }' > .postcssrc.json

# thêm @import "tailwindcss"; vào cuối file styles.css
echo '@import "tailwindcss";' >> ./src/styles.css

ng add @angular-eslint/schematics

echo '{ "printWidth": 100, "tabWidth": 2, "useTabs": false, "singleQuote": true, "quoteProps": "preserve", "bracketSpacing": true, "semi": false, "htmlWhitespaceSensitivity": "ignore", "trailingComma": "none", "overrides": [ { "files": "*.html", "options": { "parser": "angular" } } ] }' > .prettierrc

echo -e "package.json\npackage-lock.json\ndist\nnode_modules\n.angular/cache" > .prettierignore

// @ts-check
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");
const prettierPlugin = require("eslint-plugin-prettier");
const prettierConfig = require("eslint-config-prettier");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
      prettierConfig,
    ],
    plugins: {
      prettier: prettierPlugin,
    },
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
      '@typescript-eslint/no-explicit-any': 'error', // Forbid usage of 'any'
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  }
);

"scripts": {
  "lint:fix": "prettier --write . && ng lint --fix"
},

{ 
  "editor.formatOnSave": true
}

git commit --no-verify -m "message"

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.mjs

ng generate environments

src/
  environments/
    environment.ts
    environment.development.ts
    environment.staging.ts
    environment.production.ts

export const environment = {
  production: false,
  development: false,
  staging: false,
  apiUrl: 'http://localhost:3000/api',
  appName: 'Angular Starter Local',
  enableDebugTools: true,
  logLevel: 'debug'
}

export const environment = {
  production: false,
  development: true,
  staging: false,
  apiUrl: 'https://dev-api.myapp.com/api',
  appName: 'Angular Starter Development',
  enableDebugTools: true,
  logLevel: 'debug'
}

export const environment = {
  production: false,
  development: false,
  staging: true,
  apiUrl: 'https://staging-api.myapp.com/api',
  appName: 'Angular Starter Staging',
  enableDebugTools: true,
  logLevel: 'info'
}

export const environment = {
  production: true,
  development: false,
  staging: false,
  apiUrl: 'https://api.myapp.com/api',
  appName: 'Angular Starter Production',
  enableDebugTools: false,
  logLevel: 'error'
}

"build": {
  "builder": "@angular/build:application",
  "options": {
    "browser": "src/main.ts",
    "tsConfig": "tsconfig.app.json",
    "assets": [
      {
        "glob": "**/*",
        "input": "public"
      }
    ],
    "styles": ["src/styles.css"]
  },
  "configurations": {
    "development": {
      "optimization": false,
      "extractLicenses": false,
      "sourceMap": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.development.ts"
        }
      ],
      "budgets": [
        {
          "type": "anyComponentStyle",
          "maximumWarning": "4kB",
          "maximumError": "8kB"
        }
      ]
    },
    "staging": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": true,
      "extractLicenses": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.staging.ts"
        }
      ],
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kB",
          "maximumError": "1MB"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "4kB",
          "maximumError": "8kB"
        }
      ]
    },
    "production": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractLicenses": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.production.ts"
        }
      ],
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kB",
          "maximumError": "1MB"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "4kB",
          "maximumError": "8kB"
        }
      ]
    }
  },
  "defaultConfiguration": "development"
},
"serve": {
  "builder": "@angular/build:dev-server",
  "configurations": {
    "development": {
      "buildTarget": "angular-starter:build:development"
    },
    "staging": {
      "buildTarget": "angular-starter:build:staging"
    },
    "production": {
      "buildTarget": "angular-starter:build:production"
    }
  },
  "defaultConfiguration": "development"
},

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@app/*": ["src/app/*"],
      "@core/*": ["src/app/core/*"],
      "@shared/*": ["src/app/shared/*"],
      "@environments/*": ["src/environments/*"],
      "@assets/*": ["src/assets/*"],
      "@models/*": ["src/app/models/*"],
      "@services/*": ["src/app/services/*"],
      "@components/*": ["src/app/components/*"]
    }
  }
}

src/
├── app/
│   ├── core/                          # Singleton services, guards, interceptors
│   │   ├── guards/
│   │   │   ├── auth.guard.ts
│   │   │   └── role.guard.ts
│   │   ├── interceptors/
│   │   │   ├── auth.interceptor.ts
│   │   │   ├── error.interceptor.ts
│   │   │   └── loading.interceptor.ts
│   │   ├── services/
│   │   │   ├── api.service.ts
│   │   │   ├── auth.service.ts
│   │   │   ├── storage.service.ts
│   │   │   └── logger.service.ts
│   │   ├── models/
│   │   │   ├── user.model.ts
│   │   │   ├── api-response.model.ts
│   │   │   └── error.model.ts
│   │   ├── interfaces/
│   │   │   ├── auth.interface.ts
│   │   │   └── config.interface.ts
│   │   └── constants/
│   │       ├── api.constants.ts
│   │       └── app.constants.ts
│   │
│   ├── features/                      # Feature modules (lazy loaded)
│   │   ├── auth/
│   │   │   ├── pages/
│   │   │   │   ├── login/
│   │   │   │   ├── register/
│   │   │   │   └── forgot-password/
│   │   │   ├── components/
│   │   │   │   └── auth-form/
│   │   │   ├── services/
│   │   │   │   └── auth-feature.service.ts
│   │   │   ├── store/
│   │   │   │   └── auth.store.ts
│   │   │   └── auth.routes.ts
│   │   │
│   │   ├── dashboard/
│   │   │   ├── pages/
│   │   │   │   ├── overview/
│   │   │   │   └── analytics/
│   │   │   ├── components/
│   │   │   │   ├── chart/
│   │   │   │   └── stats-card/
│   │   │   ├── services/
│   │   │   ├── store/
│   │   │   └── dashboard.routes.ts
│   │   │
│   │   └── user/
│   │       ├── pages/
│   │       │   ├── profile/
│   │       │   └── settings/
│   │       ├── components/
│   │       ├── services/
│   │       ├── store/
│   │       └── user.routes.ts
│   │
│   ├── layout/                        # Layout components
│   │   ├── header/
│   │   ├── footer/
│   │   ├── sidebar/
│   │   └── main-layout/
│   │
│   ├── app.component.ts               # Root component (standalone)
│   ├── app.config.ts                  # Application config
│   └── app.routes.ts                  # Root routes
│
├── assets/
│   ├── images/
│   ├── icons/
│   ├── fonts/
│   └── i18n/                          # Translations
│       ├── en.json
│       └── vi.json
│
├── environments/
│   ├── environment.ts
│   ├── environment.development.ts
│   └── environment.staging.ts
│
├── styles/
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _reset.scss
│   └── styles.scss
│
├── index.html
├── main.ts
└── styles.scss