├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .github ├── dependabot.yml └── workflows │ └── cypress.yml ├── .gitignore ├── .husky ├── .huskyrc ├── commit-msg ├── pre-commit └── pre-push ├── .huskyrc ├── .prettierignore ├── .prettierrc.json ├── .storybook ├── main.ts ├── preview.ts ├── tsconfig.json └── typings.d.ts ├── .vscode ├── extensions.json ├── launch.json ├── settings.json └── tasks.json ├── LICENSE ├── README.md ├── SECURITY.md ├── angular.json ├── cypress.config.ts ├── cypress ├── e2e │ ├── 1-getting-started │ │ └── todo.cy.js │ └── 2-advanced-examples │ │ ├── actions.cy.js │ │ ├── aliasing.cy.js │ │ ├── assertions.cy.js │ │ ├── connectors.cy.js │ │ ├── cookies.cy.js │ │ ├── cypress_api.cy.js │ │ ├── files.cy.js │ │ ├── location.cy.js │ │ ├── misc.cy.js │ │ ├── navigation.cy.js │ │ ├── network_requests.cy.js │ │ ├── querying.cy.js │ │ ├── spies_stubs_clocks.cy.js │ │ ├── storage.cy.js │ │ ├── traversal.cy.js │ │ ├── utilities.cy.js │ │ ├── viewport.cy.js │ │ ├── waiting.cy.js │ │ └── window.cy.js ├── fixtures │ └── example.json └── support │ ├── commands.ts │ └── e2e.ts ├── package-lock.json ├── package.json ├── server.ts ├── src ├── app │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.config.server.ts │ ├── app.config.ts │ ├── app.routes.ts │ ├── core │ │ ├── guards │ │ │ ├── guards.spec.ts │ │ │ └── maintenance │ │ │ │ ├── maintenance.guard.spec.ts │ │ │ │ └── maintenance.guard.ts │ │ └── services │ │ │ ├── site-status.service.spec.ts │ │ │ └── site-status.service.ts │ ├── features │ │ ├── error │ │ │ ├── error.component.html │ │ │ ├── error.component.scss │ │ │ ├── error.component.spec.ts │ │ │ └── error.component.ts │ │ ├── home │ │ │ ├── home.component.html │ │ │ ├── home.component.scss │ │ │ ├── home.component.spec.ts │ │ │ └── home.component.ts │ │ ├── maintenance │ │ │ ├── maintenance.component.html │ │ │ ├── maintenance.component.scss │ │ │ ├── maintenance.component.spec.ts │ │ │ └── maintenance.component.ts │ │ └── terms │ │ │ ├── term-of-privacy │ │ │ ├── term-of-privacy.component.html │ │ │ ├── term-of-privacy.component.scss │ │ │ ├── term-of-privacy.component.spec.ts │ │ │ └── term-of-privacy.component.ts │ │ │ └── term-of-service │ │ │ ├── term-of-service.component.html │ │ │ ├── term-of-service.component.scss │ │ │ ├── term-of-service.component.spec.ts │ │ │ └── term-of-service.component.ts │ └── shared │ │ └── components │ │ ├── footer │ │ ├── footer.component.html │ │ ├── footer.component.scss │ │ ├── footer.component.spec.ts │ │ └── footer.component.ts │ │ └── menu │ │ ├── menu.component.html │ │ ├── menu.component.scss │ │ ├── menu.component.spec.ts │ │ └── menu.component.ts ├── assets │ ├── .gitkeep │ └── data │ │ └── db.json ├── favicon.ico ├── index.html ├── main.server.ts ├── main.ts ├── setup.jest.ts ├── stories │ ├── Button.stories.ts │ ├── Configure.mdx │ ├── Header.stories.ts │ ├── Page.stories.ts │ ├── User.ts │ ├── assets │ │ ├── accessibility.png │ │ ├── accessibility.svg │ │ ├── addon-library.png │ │ ├── assets.png │ │ ├── context.png │ │ ├── discord.svg │ │ ├── docs.png │ │ ├── figma-plugin.png │ │ ├── github.svg │ │ ├── share.png │ │ ├── styling.png │ │ ├── testing.png │ │ ├── theming.png │ │ ├── tutorials.svg │ │ └── youtube.svg │ ├── button.component.ts │ ├── button.css │ ├── header.component.ts │ ├── header.css │ ├── page.component.ts │ ├── page.css │ └── stories.module.ts └── styles.scss ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = crlf 7 | indent_style = space 8 | indent_size = 4 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.ts] 13 | quote_type = single 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": ["projects/**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts"], 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:@typescript-eslint/recommended", 10 | "plugin:@angular-eslint/recommended", 11 | "plugin:@angular-eslint/template/process-inline-templates", 12 | "plugin:prettier/recommended" 13 | ], 14 | "rules": { 15 | "@angular-eslint/directive-selector": [ 16 | "error", 17 | { 18 | "type": "attribute", 19 | "prefix": "app", 20 | "style": "camelCase" 21 | } 22 | ], 23 | "@angular-eslint/component-selector": [ 24 | "error", 25 | { 26 | "type": "element", 27 | "prefix": "app", 28 | "style": "kebab-case" 29 | } 30 | ], 31 | "prettier/prettier": [ 32 | "error", 33 | { 34 | "singleQuote": true, 35 | "semi": false 36 | } 37 | ] 38 | } 39 | }, 40 | { 41 | "files": ["*.html"], 42 | "extends": [ 43 | "plugin:@angular-eslint/template/recommended", 44 | "plugin:@angular-eslint/template/accessibility" 45 | ], 46 | "rules": {} 47 | }, 48 | { 49 | "files": ["*.scss", "*.css"], 50 | "excludedFiles": ["*inline-template-*.component.html"], 51 | "extends": ["plugin:prettier/recommended"], 52 | "rules": { 53 | "prettier/prettier": [ 54 | "error", 55 | { 56 | "parser": "angular" 57 | } 58 | ] 59 | } 60 | } 61 | ], 62 | "extends": ["plugin:storybook/recommended"] 63 | } 64 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=crlf 2 | *.ts text eol=crlf 3 | *.html text eol=crlf 4 | *.scss text eol=crlf 5 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | -------------------------------------------------------------------------------- /.github/workflows/cypress.yml: -------------------------------------------------------------------------------- 1 | name: Cypress Tests 2 | on: [push] 3 | jobs: 4 | cypress-run: 5 | runs-on: ubuntu-latest 6 | # Runs tests in parallel with matrix strategy https://docs.cypress.io/guides/guides/parallelization 7 | # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs 8 | # Also see warning here https://github.com/cypress-io/github-action#parallel 9 | strategy: 10 | fail-fast: false # https://github.com/cypress-io/github-action/issues/48 11 | matrix: 12 | containers: [1, 2] # Uses 2 parallel instances 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v3 16 | - name: Cypress run 17 | # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action 18 | uses: cypress-io/github-action@v6 19 | with: 20 | # Starts web server for E2E tests - replace with your own server invocation 21 | # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server 22 | start: npm start 23 | wait-on: 'http://localhost:4200' # Waits for above 24 | # Records to Cypress Cloud 25 | # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record 26 | record: true 27 | parallel: true # Runs test in parallel using settings above 28 | env: 29 | # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY 30 | # in GitHub repo → Settings → Secrets → Actions 31 | CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} 32 | # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token 33 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.husky/.huskyrc: -------------------------------------------------------------------------------- 1 | # ~/.huskyrc 2 | export NVM_DIR="$HOME/.nvm" 3 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" 4 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run lint 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run pretty-quick 5 | npm test 6 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm test 5 | -------------------------------------------------------------------------------- /.huskyrc: -------------------------------------------------------------------------------- 1 | # ~/.huskyrc 2 | export NVM_DIR="$HOME/.nvm" 3 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "useTabs": false, 4 | "singleQuote": true, 5 | "semi": false, 6 | "bracketSpacing": true, 7 | "arrowParens": "avoid", 8 | "trailingComma": "es5", 9 | "endOfLine": "crlf", 10 | "bracketSameLine": true, 11 | "printWidth": 80 12 | } 13 | -------------------------------------------------------------------------------- /.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/angular' 2 | 3 | const config: StorybookConfig = { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: [ 6 | '@storybook/addon-links', 7 | '@storybook/addon-essentials', 8 | '@storybook/addon-interactions', 9 | '@storybook/addon-mdx-gfm', 10 | '@chromatic-com/storybook', 11 | ], 12 | framework: { 13 | name: '@storybook/angular', 14 | options: {}, 15 | }, 16 | docs: {}, 17 | } 18 | export default config 19 | -------------------------------------------------------------------------------- /.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/angular'; 2 | 3 | const preview: Preview = { 4 | parameters: { 5 | actions: { argTypesRegex: '^on[A-Z].*' }, 6 | controls: { 7 | matchers: { 8 | color: /(background|color)$/i, 9 | date: /Date$/i, 10 | }, 11 | }, 12 | }, 13 | }; 14 | 15 | export default preview; 16 | -------------------------------------------------------------------------------- /.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.app.json", 3 | "compilerOptions": { 4 | "types": ["node"], 5 | "allowSyntheticDefaultImports": true, 6 | "resolveJsonModule": true 7 | }, 8 | "exclude": ["../src/test.ts", "../src/**/*.spec.ts"], 9 | "include": ["../src/**/*", "./preview.ts"], 10 | "files": ["./typings.d.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /.storybook/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.md' { 2 | const content: string; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[html]": { 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll.eslint": "explicit" 6 | }, 7 | "editor.formatOnSave": true 8 | }, 9 | "[typescript]": { 10 | "editor.defaultFormatter": "esbenp.prettier-vscode", 11 | "editor.codeActionsOnSave": { 12 | "source.fixAll.eslint": "explicit" 13 | }, 14 | "editor.formatOnSave": true 15 | }, 16 | "[scss]": { 17 | "editor.defaultFormatter": "esbenp.prettier-vscode", 18 | "editor.codeActionsOnSave": { 19 | "source.fixAll.eslint": "explicit" 20 | }, 21 | "editor.formatOnSave": true 22 | }, 23 | "[css]": { 24 | "editor.defaultFormatter": "esbenp.prettier-vscode", 25 | "editor.codeActionsOnSave": { 26 | "source.fixAll.eslint": "explicit" 27 | }, 28 | "editor.formatOnSave": true 29 | }, 30 | "autoimport.useSemiColon": false, 31 | "prettier.semi": false, 32 | "javascript.format.semicolons": "remove", 33 | "typescript.format.semicolons": "remove", 34 | "vs-code-prettier-eslint.prettierLast": true, 35 | "cSpell.language": "en,pt,pt_BR", 36 | "cSpell.words": ["npmcli", "Parens"], 37 | "[css][html][scss][typescript]": { 38 | "editor.codeActionsOnSave": { 39 | "source.fixAll.eslint": "explicit" 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Gabriel Toth Gonçalves 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular V17 Template · ![GitHub License](https://img.shields.io/github/license/GabrielToth/Angular-V17-Template?color=blue) ![Static Badge](https://img.shields.io/badge/-18.10.0-g?style=&logo=node.js&logoColor=white) ![Static Badge](https://img.shields.io/badge/PRs-welcome-g) 2 | 3 | The Angular V17 Template is an advanced and comprehensive tool for efficiently bootstrapping Angular projects. Built for the latest version of Angular, this template offers a well-organized directory structure, ready for scalable development. Additionally, it features an integrated system to handle error pages and site maintenance states, providing a robust development experience and easing the creation of modern web applications. With clear requirements and simple installation, the Angular V17 Template is the ideal choice for developers seeking a solid and flexible foundation for their Angular projects. 4 | 5 | ## Prerequisites 6 | 7 | - Node Package Manager 18.10.0 or later installed in your system. 8 | - Look at the [get npm guide](https://www.npmjs.com/get-npm?utm_source=house&utm_medium=homepage&utm_campaign=free%20orgs&utm_term=Install%20npm) for more info. 9 | - Basic knowledge in [Angular](https://angular.io/). 10 | 11 | ## Step 1 - Install the Angular CLI 12 | 13 | You are first going to need to install the Angular CLI (Command Line Interface) tool. The CLI helps you to start new Angular project as well as assist you during development. In your CMD (terminal) type: 14 | 15 | ``` 16 | npm install -g @angular/cli 17 | ``` 18 | 19 | ## Step 2 - Clone the template 20 | 21 | ### If you are using GitHub Desktop: 22 | 23 | 1. On GitHub Desktop, click on "File" and then "Clone Repository." 24 | 2. Paste the URL of the repository you copied earlier into the "Repository URL" box. 25 | 3. Choose the local directory where you want to clone the repository. 26 | 4. Click the "Clone" button to initiate the cloning process. 27 | 28 | ### If you are using only Git Bash: 29 | 30 | 1. Open Git Bash in the directory where you want to clone the repository. 31 | 2. Enter the command `git clone` followed by the URL you copied: 32 | ``` 33 | git clone https://github.com/GabrielToth/Angular-V17-Template 34 | ``` 35 | 3. Use the `cd` command to enter the directory of the cloned repository: 36 | ``` 37 | cd Angular-V17-Template 38 | ``` 39 | 40 | ## Step 3 - Install all packages 41 | 42 | Install all packages and dependences from package.json: 43 | 44 | ``` 45 | npm i 46 | ``` 47 | 48 | ## Step 4 - Change project name 49 | 50 | In Visual Studio Code open Search Tool, search for: 51 | 52 | ``` 53 | put-your-project-name 54 | ``` 55 | 56 | On replace type the name of your project. 57 | 58 | ## Folder Structure 59 | 60 | The project follows a specific folder structure to ensure organization and clarity. Please adhere to the following guidelines: 61 | 62 | - **`/src`**: Contains the source code of the project. 63 | 64 | - **`/app`**: Main application code. 65 | 66 | - **`/core`** : This folder often contains core functionalities that are not directly related to a specific feature or page. It's a good place to put services, guards, interceptors, and other pieces of code that are critical to the application but not tied to a particular feature. 67 | 68 | - **`/auth`** : This folder contain authentication-related code, such as services or guards responsible for handling user authentication and authorization. 69 | - **`/guards`** : Guards are used to control access to certain routes in your application. They can be placed here to keep the code organized. 70 | - **`/interceptors`** : Interceptors can be used to modify HTTP requests or responses globally. Placing them in this folder helps maintain a clean structure. 71 | - **`/layout`** : This might be used for components or services related to the overall layout of your application, such as a navigation bar or footer. 72 | - **`/models`** : This folder can contain data models used throughout the application. Defining models in one place makes it easier to manage and maintain consistency. 73 | - **`/services`** : Services that are shared across multiple features or components can be placed here. These could include data services, utility services, etc. 74 | 75 | * **`/features`** : This folder is typically used for organizing pages or features of your application. Each feature might have its own subfolder containing components, services, and other files specific to that feature. 76 | * **`/shared`** : This folder is for components, services, or other pieces of code that are shared across multiple features. It helps to avoid duplication and ensures consistency in the application." 77 | 78 | - **`/components`**: This directory contains reusable UI components utilized across various features of the application. Organizing components here promotes reusability, maintains consistency in design patterns, and facilitates easier maintenance and development. 79 | - **`/styles`**: Housing global and component-specific stylesheets, this directory centralizes the styling resources for the application. Global stylesheets define overarching design principles, while component-specific stylesheets tailor the appearance of individual components, fostering a cohesive and visually appealing user interface. 80 | 81 | - **`/assets`**: Resources like images, fonts and databases. 82 | 83 | - **`/data`**: Houses data-related files or mockups used in the project. 84 | 85 | - **`db.json`**: JSON file serving as the database for the json-server mock API. This file contains mock data used for simulating API responses during development. 86 | 87 | - **`/images`**: Stores image files used within the application. These include icons, graphics, and other visual elements. 88 | - **`/fonts`**: Holds font files utilized for typography and styling purposes in the application. 89 | 90 | - **`/stories`**: Storybook for automatic components documentation. Try: `ng storybook` 91 | 92 | - **`/docs`**: Documentation files. 93 | - **`/tests`**: Unit, integration, e2e and other tests. 94 | 95 | ## Project Organization 96 | 97 | To maintain consistency and ease collaboration, the project follows the GitFlow branching model. The main branches are: 98 | 99 | - **`main`**: Represents the production-ready code. Only merge into this branch after thorough testing. 100 | - **`develop`**: The main branch for ongoing development. Feature branches branch off from here, and completed features are merged back. 101 | - **`feature/branch-name`**: Feature branches for new features or enhancements. Always branch off from `develop`. 102 | - **`bugfix/branch-name`**: Bugfix branches for resolving issues. Always branch off from `develop`. 103 | - **`hotfix/branch-name`**: Hotfix branches for critical fixes in the production code. Branch off from `main`. 104 | 105 | ## Commit and Push Guidelines 106 | 107 | To maintain a clean and well-documented version history, follow these guidelines: 108 | 109 | 1. **Feature Development:** 110 | 111 | - Create a new branch for each feature or enhancement. 112 | - Use clear and concise commit messages, adhering to the [Conventional Commits standard](https://www.conventionalcommits.org/en/v1.0.0/) (e.g., 'feat:', 'fix:', 'docs:', etc.). 113 | - Regularly push changes to the remote repository. 114 | 115 | 2. **Bug Fixes:** 116 | 117 | - Create a new branch for each bug fix. 118 | - Include a reference to the issue being addressed in your commit message. 119 | - Use clear and concise commit messages, following the Conventional Commits standard. 120 | - Push changes promptly. 121 | 122 | 3. **Code Review:** 123 | 124 | - Before merging into `develop` or `main`, ensure that your code has been reviewed. 125 | - Address feedback and retest. 126 | - Ensure commit messages follow the Conventional Commits standard. 127 | 128 | 4. **GitFlow Model:** 129 | 130 | - Strictly adhere to the GitFlow branching model. 131 | - Respect the roles and responsibilities defined by GitFlow. 132 | - Use Conventional Commits standard for commit messages. 133 | 134 | By adhering to these guidelines, we can maintain a well-organized and collaborative development environment. If you have any questions or encounter issues, please refer to this documentation or reach out to the project team. 135 | 136 | ## Issues with Husky? 137 | 138 | If you are experiencing difficulties while committing or pushing your solution, we recommend checking Issue #5 or the issues in the Husky repository for a more detailed understanding of reported problems. 139 | 140 | **Issue #5**: [Link to Issue #5](https://github.com/GabrielToth/Angular-V17-Template/issues/5) 141 | 142 | Husky plays a crucial role in code quality control, and issues related to it can impact the development workflow. Make sure to review discussions in the issues to find solutions or relevant information about any specific problem you might be facing. 143 | 144 | Remember, transparent and collaborative communication is key to overcoming challenges and continuously improving the development environment. We are here to help ensure a positive experience with the Angular V17 Template. 145 | 146 | --- 147 | 148 | Feel free to tailor this draft to fit the specifics of your project and documentation style. 149 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | Our project is committed to ensuring a secure environment for all users. We encourage and value any contributions or reports related to security vulnerabilities. This policy outlines the procedures for reporting vulnerabilities, as well as our approach to addressing and managing them. 4 | 5 | ## Reporting Security Vulnerabilities 6 | 7 | If you discover a security vulnerability within our project, we kindly request that you report it to our team immediately. To report a vulnerability, please follow these steps: 8 | 9 | 1. **Submission:** Please submit a detailed report of the vulnerability via email. Include a clear description, steps to reproduce, and any relevant details. 10 | 11 | 2. **Responsible Disclosure:** We appreciate responsible disclosure and kindly request that you allow us a reasonable amount of time to address the vulnerability before publicly disclosing any details. 12 | 13 | 3. **Cooperation:** We encourage collaboration and welcome any additional information or guidance you can provide to assist in resolving the vulnerability. 14 | 15 | ## Vulnerability Response and Resolution 16 | 17 | We are committed to promptly addressing reported vulnerabilities and taking the necessary steps to resolve them. Here is our approach: 18 | 19 | 1. **Assessment:** Upon receiving a vulnerability report, we will assess the issue and verify its validity. 20 | 21 | 2. **Resolution:** Once validated, we will work diligently to develop and implement an appropriate fix for the vulnerability. 22 | 23 | 3. **Communication:** We will maintain open and transparent communication with the reporter throughout the resolution process, providing updates on the progress and expected timelines for fixes. 24 | 25 | 4. **Versioning Policy:** Updates addressing security vulnerabilities will be released promptly following a fix. We adhere to semantic versioning ([Learn more](https://semver.org/)) to indicate the impact of changes: 26 | 27 | - **Patch Releases:** These are reserved for security updates addressing vulnerabilities without impacting existing functionality. Users are encouraged to update to the latest patch release within the same major version. 28 | 29 | - **Minor/Major Releases:** These include additional features or significant changes and may also include security updates. Users are advised to review release notes and upgrade accordingly based on the impact and backward compatibility. 30 | 31 | ## Supported Versions 32 | 33 | We maintain security updates for the following versions: 34 | 35 | - **Major Version 1.0.2:** All patch releases within this major version will receive security updates and patches. 36 | 37 | We encourage users to regularly update to the latest versions to benefit from security enhancements and fixes. 38 | 39 | ## Acknowledgments 40 | 41 | We deeply appreciate the contributions and efforts of individuals or organizations who help the community maintain a secure environment for all users. 42 | 43 | For any questions, concerns, or to report a vulnerability, please contact me. 44 | 45 | Thank you for your cooperation and commitment to security. 46 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "Angular-V17-Template": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:application", 19 | "options": { 20 | "outputPath": "dist/Angular-V17-Template", 21 | "index": "src/index.html", 22 | "browser": "src/main.ts", 23 | "polyfills": ["zone.js"], 24 | "tsConfig": "tsconfig.app.json", 25 | "inlineStyleLanguage": "scss", 26 | "assets": ["src/favicon.ico", "src/assets"], 27 | "styles": ["src/styles.scss"], 28 | "scripts": [], 29 | "server": "src/main.server.ts", 30 | "prerender": true, 31 | "ssr": { 32 | "entry": "server.ts" 33 | } 34 | }, 35 | "configurations": { 36 | "production": { 37 | "budgets": [ 38 | { 39 | "type": "initial", 40 | "maximumWarning": "500kb", 41 | "maximumError": "1mb" 42 | }, 43 | { 44 | "type": "anyComponentStyle", 45 | "maximumWarning": "2kb", 46 | "maximumError": "4kb" 47 | } 48 | ], 49 | "outputHashing": "all" 50 | }, 51 | "development": { 52 | "optimization": false, 53 | "extractLicenses": false, 54 | "sourceMap": true 55 | } 56 | }, 57 | "defaultConfiguration": "production" 58 | }, 59 | "serve": { 60 | "builder": "@angular-devkit/build-angular:dev-server", 61 | "configurations": { 62 | "production": { 63 | "buildTarget": "Angular-V17-Template:build:production" 64 | }, 65 | "development": { 66 | "buildTarget": "Angular-V17-Template:build:development" 67 | } 68 | }, 69 | "defaultConfiguration": "development" 70 | }, 71 | "extract-i18n": { 72 | "builder": "@angular-devkit/build-angular:extract-i18n", 73 | "options": { 74 | "buildTarget": "Angular-V17-Template:build" 75 | } 76 | }, 77 | "lint": { 78 | "builder": "@angular-eslint/builder:lint", 79 | "options": { 80 | "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] 81 | } 82 | }, 83 | "storybook": { 84 | "builder": "@storybook/angular:start-storybook", 85 | "options": { 86 | "configDir": ".storybook", 87 | "browserTarget": "Angular-V17-Template:build", 88 | "compodoc": false, 89 | "port": 6006 90 | } 91 | }, 92 | "build-storybook": { 93 | "builder": "@storybook/angular:build-storybook", 94 | "options": { 95 | "configDir": ".storybook", 96 | "browserTarget": "Angular-V17-Template:build", 97 | "compodoc": false, 98 | "outputDir": "storybook-static" 99 | } 100 | } 101 | } 102 | } 103 | }, 104 | "cli": { 105 | "schematicCollections": [ 106 | "@angular-eslint/schematics" 107 | ], 108 | "analytics": false 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | 3 | export default defineConfig({ 4 | projectId: '3cc5x9', 5 | e2e: { 6 | setupNodeEvents(on, config) { 7 | // implement node event listeners here 8 | }, 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /cypress/e2e/1-getting-started/todo.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // Welcome to Cypress! 4 | // 5 | // This spec file contains a variety of sample tests 6 | // for a todo list app that are designed to demonstrate 7 | // the power of writing tests in Cypress. 8 | // 9 | // To learn more about how Cypress works and 10 | // what makes it such an awesome testing tool, 11 | // please read our getting started guide: 12 | // https://on.cypress.io/introduction-to-cypress 13 | 14 | describe('example to-do app', () => { 15 | beforeEach(() => { 16 | // Cypress starts out with a blank slate for each test 17 | // so we must tell it to visit our website with the `cy.visit()` command. 18 | // Since we want to visit the same URL at the start of all our tests, 19 | // we include it in our beforeEach function so that it runs before each test 20 | cy.visit('https://example.cypress.io/todo') 21 | }) 22 | 23 | it('displays two todo items by default', () => { 24 | // We use the `cy.get()` command to get all elements that match the selector. 25 | // Then, we use `should` to assert that there are two matched items, 26 | // which are the two default items. 27 | cy.get('.todo-list li').should('have.length', 2) 28 | 29 | // We can go even further and check that the default todos each contain 30 | // the correct text. We use the `first` and `last` functions 31 | // to get just the first and last matched elements individually, 32 | // and then perform an assertion with `should`. 33 | cy.get('.todo-list li').first().should('have.text', 'Pay electric bill') 34 | cy.get('.todo-list li').last().should('have.text', 'Walk the dog') 35 | }) 36 | 37 | it('can add new todo items', () => { 38 | // We'll store our item text in a variable so we can reuse it 39 | const newItem = 'Feed the cat' 40 | 41 | // Let's get the input element and use the `type` command to 42 | // input our new list item. After typing the content of our item, 43 | // we need to type the enter key as well in order to submit the input. 44 | // This input has a data-test attribute so we'll use that to select the 45 | // element in accordance with best practices: 46 | // https://on.cypress.io/selecting-elements 47 | cy.get('[data-test=new-todo]').type(`${newItem}{enter}`) 48 | 49 | // Now that we've typed our new item, let's check that it actually was added to the list. 50 | // Since it's the newest item, it should exist as the last element in the list. 51 | // In addition, with the two default items, we should have a total of 3 elements in the list. 52 | // Since assertions yield the element that was asserted on, 53 | // we can chain both of these assertions together into a single statement. 54 | cy.get('.todo-list li') 55 | .should('have.length', 3) 56 | .last() 57 | .should('have.text', newItem) 58 | }) 59 | 60 | it('can check off an item as completed', () => { 61 | // In addition to using the `get` command to get an element by selector, 62 | // we can also use the `contains` command to get an element by its contents. 63 | // However, this will yield the