II、Project Environment and Packages

Environment Setup

VScode Extension Installation

Search for @recommended within EXTENSIONS (as shown in the image above), and you will see the Extensions recommended for installation. Please install all of them.

III、Project Startup

Enter the following command to install the packages:

npm install

After the packages are installed, enter the following command to start the project:

ng serve

IV、Project Commit

Enter the following command to invoke the Commitizen tool to assist in writing commit messages:

npm run commit

V、Commands

• ng serve - Start the development server.
• ng build - Generate the build package.
• ng test - Run unit tests.
• npm run lint - Execute code checks.
• npm run commit- Use Commitizen to submit changes.

VI、 Project Folder Structure

- 📂 angular-boilerplate-standalone
  - 📂 .angular
  - 📂 .vscode (VSCode Settings)
  - 📂 .husky (Husky Configuration)
  - 📂 e2e
  - 📂 node_modules (Dependencies)
  - 📂 src
      - 📂 app
          - 📂 core (Shared Utility Modules)
               - 📂 enums (Enumeration Declarations)
                   - 📄 common.enum.ts
               - 📂 guards (Route Guards)
               - 📂 utils (Helper Tools)
                   - 📄 common-utils.ts
               - 📂 consts (Constant Declarations)
                   - 📄 common.consts.ts
               - 📂 models (Common Data Models)
                   - 📄 a.model.ts
                   - 📄 b.model.ts
               - 📂 services (Common Services: e.g., Storage)
               - 📂 validators (Validators)
               - 📂 interceptors
          - 📂 features (Feature Modules)
               - 📂 feature-a
                    - 📄 feature-a.component.html
                    - 📄 feature-a.component.scss
                    - 📄 feature-a.component.ts
                    - 📄 feature-a.component.spec.ts
                    - 📂 models (Data Models used by the feature)
          - 📂 shared (Shared Components)
               - 📂 components (Common Components, e.g., dialog, toast)
               - 📂 pipes
               - 📂 directives
               - 📂 layout (Layout Components, e.g., header, navbar)
          - 📄 app.component.html
          - 📄 app.component.scss
          - 📄 app.component.ts
          - 📄 app.module.ts
          - 📄 app.routing-module.ts
     - 📂 assets (Static Resources)
         - 📂 images (Images)
         - 📂 data (Mock API Data)
         - 📂 scripts (External JS)
         - 📂 icons 🔸
     - 📂 styles (Style Files)
          - 📄 _custom.scss 🔸 (Styles for External Packages)
          - 📄 styles.scss
     - 📂 environments (Environment Variables)
          - 📄 environment.ts
          - 📄 environment.prod.ts
     - 📄 index.html
     - 📄 main.ts
     - 📄 polyfills.ts
  - 📄 .eslintrc.json
  - 📄 .eslintignore.json
  - 📄 .lintstagedrc.json
  - 📄 .gitignore
  - 📄 .commitlint.config.js
  - 📄 angular.json
  - 📄 package.json
  - 📄 tsconfig.json
  - 📄 README.md