/angular-17-app-template

A basic Angular 17 template with ESLint, Prettier, Angular Material, and TailwindCSS

Primary LanguageHTMLMIT LicenseMIT

angular-17-app-template

About

a basic Angular 17 starter template that includes TailwindCSS, Angular Material, ESLint, Prettier and Husky.

Dependencies

  • angular
  • angular material

Dev Dependencies

  • typescript
  • eslint
  • tailwindcss
  • postcss
  • autoprefixer
  • lint-staged
  • husky

Installation

  1. Select to use the template in GitHub and create a new repository
  2. Clone your new repository
git clone <repository_link>.git
  1. Udpate package.json to change the name, description, version, keywords etc. to match your project.
  2. Install project dependencies using your package manager of choice
npm install
  1. Update angular.json to remove angular-17-app-template as the project name to whatever you want
  2. Update src/custom-theme.scss to change angular-17-app-template to the project name you want
  3. Change app component title to project name or any other title
  4. Install recommended vscode extensions
    1. Angular Language Service
    2. ESLint
    3. PostCSS Language Support
    4. Prettier - Code Formatter
    5. Tailwind CSS IntelliSense
  5. Consider configuring vscode to run prettier on file saved
    1. Open settings.json
    2. Add the following rules
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}
  1. Start the development server
npm run start

Environments

The project comes pre-configured with production and development environments. The environment files can be found in src/environments. For more on environments see the Angular docs.

Lint

Lint and don't apply fixes

npm run lint

Lint and apply fixes where possible

npm lint:fix

Format

Check for format errors:

npm run prettier:check

Format files:

npm run prettier:write

Test

npm run test

License

MIT
https://choosealicense.com/licenses/mit/