├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .husky └── pre-commit ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── README.md ├── angular.json ├── jest.config.js ├── package-lock.json ├── package.json ├── setup-jest.ts ├── src ├── app │ ├── api │ │ ├── interfaces │ │ │ └── base.interface.ts │ │ └── services │ │ │ ├── base.service.spec.ts │ │ │ └── base.service.ts │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.ts │ └── app.module.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.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 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": [ 4 | "projects/**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "parserOptions": { 12 | "project": [ 13 | "tsconfig.json" 14 | ], 15 | "createDefaultProgram": true 16 | }, 17 | "extends": [ 18 | "plugin:@angular-eslint/recommended", 19 | "plugin:@angular-eslint/template/process-inline-templates" 20 | ], 21 | "rules": { 22 | "@angular-eslint/directive-selector": [ 23 | "error", 24 | { 25 | "type": "attribute", 26 | "prefix": "app", 27 | "style": "camelCase" 28 | } 29 | ], 30 | "@angular-eslint/component-selector": [ 31 | "error", 32 | { 33 | "type": "element", 34 | "prefix": "app", 35 | "style": "kebab-case" 36 | } 37 | ] 38 | } 39 | }, 40 | { 41 | "files": [ 42 | "*.html" 43 | ], 44 | "extends": [ 45 | "plugin:@angular-eslint/template/recommended" 46 | ], 47 | "rules": {} 48 | } 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /.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 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.angular/cache 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm test 5 | npm run lint 6 | -------------------------------------------------------------------------------- /.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": "pwa-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/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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Boilerplate 2 | 3 | Boilerplate para trabajar con Angular, este proyecto listo para trabajar las pruebas unitarias con [Jestjs](https://jestjs.io) y eslint. 4 | 5 | Este proyecto fue generado con [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0. 6 | 7 | ## Installation 8 | 9 | - `$ git clone https://github.com/bezael/angular-boilerplate.git` 10 | - `$ cd angular-boilerplate/` 11 | - `$ npm install` 12 | - `$ ng serve` 13 | 14 | ## Development server 15 | 16 | Run `ng serve` for a dev server. Navigate to `http://localhost:55080/`. The app will automatically reload if you change any of the source files. 17 | 18 | ## Code scaffolding 19 | 20 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 21 | 22 | ## Build 23 | 24 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 25 | 26 | ## Running unit tests 27 | 28 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 29 | 30 | ## Running end-to-end tests 31 | 32 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 33 | 34 | ## Further help 35 | 36 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 37 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-boilerplate": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | }, 12 | "@schematics/angular:application": { 13 | "strict": true 14 | } 15 | }, 16 | "root": "", 17 | "sourceRoot": "src", 18 | "prefix": "app", 19 | "architect": { 20 | "build": { 21 | "builder": "@angular-devkit/build-angular:browser", 22 | "options": { 23 | "outputPath": "dist/angular-boilerplate", 24 | "index": "src/index.html", 25 | "main": "src/main.ts", 26 | "polyfills": "src/polyfills.ts", 27 | "tsConfig": "tsconfig.app.json", 28 | "inlineStyleLanguage": "scss", 29 | "assets": [ 30 | "src/favicon.ico", 31 | "src/assets" 32 | ], 33 | "styles": [ 34 | "src/styles.scss" 35 | ], 36 | "scripts": [] 37 | }, 38 | "configurations": { 39 | "production": { 40 | "budgets": [ 41 | { 42 | "type": "initial", 43 | "maximumWarning": "500kb", 44 | "maximumError": "1mb" 45 | }, 46 | { 47 | "type": "anyComponentStyle", 48 | "maximumWarning": "2kb", 49 | "maximumError": "4kb" 50 | } 51 | ], 52 | "fileReplacements": [ 53 | { 54 | "replace": "src/environments/environment.ts", 55 | "with": "src/environments/environment.prod.ts" 56 | } 57 | ], 58 | "outputHashing": "all" 59 | }, 60 | "development": { 61 | "buildOptimizer": false, 62 | "optimization": false, 63 | "vendorChunk": true, 64 | "extractLicenses": false, 65 | "sourceMap": true, 66 | "namedChunks": true 67 | } 68 | }, 69 | "defaultConfiguration": "production" 70 | }, 71 | "serve": { 72 | "options": { 73 | "port": 55080 74 | }, 75 | "builder": "@angular-devkit/build-angular:dev-server", 76 | "configurations": { 77 | "production": { 78 | "browserTarget": "angular-boilerplate:build:production" 79 | }, 80 | "development": { 81 | "browserTarget": "angular-boilerplate:build:development" 82 | } 83 | }, 84 | "defaultConfiguration": "development" 85 | }, 86 | "extract-i18n": { 87 | "builder": "@angular-devkit/build-angular:extract-i18n", 88 | "options": { 89 | "browserTarget": "angular-boilerplate:build" 90 | } 91 | }, 92 | "test": { 93 | "builder": "@angular-builders/jest:run", 94 | "options": { 95 | "tsConfig": "tsconfig.spec.json", 96 | "assets": [ 97 | "src/favicon.ico", 98 | "src/assets" 99 | ], 100 | "styles": [ 101 | "src/styles.scss" 102 | ], 103 | "scripts": [] 104 | } 105 | }, 106 | "lint": { 107 | "builder": "@angular-eslint/builder:lint", 108 | "options": { 109 | "lintFilePatterns": [ 110 | "src/**/*.ts", 111 | "src/**/*.html" 112 | ] 113 | } 114 | } 115 | } 116 | } 117 | }, 118 | "cli": { 119 | "schematicCollections": [ 120 | "@angular-eslint/schematics" 121 | ] 122 | } 123 | } -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleNameMapper: { 3 | '@env/(.*)': '/src/environments/$1', 4 | }, 5 | preset: 'jest-preset-angular', 6 | globalSetup: 'jest-preset-angular/global-setup', 7 | setupFilesAfterEnv: ['/setup-jest.ts'], 8 | }; 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-boilerplate", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "prepare": "husky install" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^15.2.1", 16 | "@angular/common": "^15.2.1", 17 | "@angular/compiler": "^15.2.1", 18 | "@angular/core": "^15.2.1", 19 | "@angular/forms": "^15.2.1", 20 | "@angular/platform-browser": "^15.2.1", 21 | "@angular/platform-browser-dynamic": "^15.2.1", 22 | "@angular/router": "^15.2.1", 23 | "jest-environment-jsdom": "^29.3.1", 24 | "rxjs": "7.5.7", 25 | "tslib": "^2.3.0", 26 | "zone.js": "~0.11.4" 27 | }, 28 | "devDependencies": { 29 | "@angular-builders/jest": "^15.0.0-beta.2", 30 | "@angular-devkit/build-angular": "^15.2.1", 31 | "@angular-eslint/builder": "15.0.0", 32 | "@angular-eslint/eslint-plugin": "15.0.0", 33 | "@angular-eslint/eslint-plugin-template": "15.0.0", 34 | "@angular-eslint/schematics": "15.0.0", 35 | "@angular-eslint/template-parser": "15.0.0", 36 | "@angular/cli": "^15.2.1", 37 | "@angular/compiler-cli": "^15.2.1", 38 | "@briebug/jest-schematic": "^5.0.0", 39 | "@types/jest": "28.1.3", 40 | "@types/node": "^12.20.55", 41 | "@typescript-eslint/eslint-plugin": "5.43.0", 42 | "@typescript-eslint/parser": "5.43.0", 43 | "eslint": "^8.28.0", 44 | "jest": "28.1.3", 45 | "typescript": "~4.8.4", 46 | "husky": "^8.0.0" 47 | } 48 | } -------------------------------------------------------------------------------- /setup-jest.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | 3 | /* global mocks for jsdom */ 4 | const mock = () => { 5 | let storage: { [key: string]: string } = {}; 6 | return { 7 | getItem: (key: string) => (key in storage ? storage[key] : null), 8 | setItem: (key: string, value: string) => (storage[key] = value || ''), 9 | removeItem: (key: string) => delete storage[key], 10 | clear: () => (storage = {}), 11 | }; 12 | }; 13 | 14 | Object.defineProperty(window, 'localStorage', { value: mock() }); 15 | Object.defineProperty(window, 'sessionStorage', { value: mock() }); 16 | Object.defineProperty(window, 'getComputedStyle', { 17 | value: () => ['-webkit-appearance'], 18 | }); 19 | 20 | Object.defineProperty(document.body.style, 'transform', { 21 | value: () => { 22 | return { 23 | enumerable: true, 24 | configurable: true, 25 | }; 26 | }, 27 | }); 28 | 29 | /* output shorter and more meaningful Zone error stack traces */ 30 | // Error.stackTraceLimit = 2; 31 | -------------------------------------------------------------------------------- /src/app/api/interfaces/base.interface.ts: -------------------------------------------------------------------------------- 1 | import { HttpHeaders, HttpParams } from '@angular/common/http'; 2 | import { Observable } from 'rxjs'; 3 | 4 | export interface RequestOptions { 5 | headers?: HttpHeaders | { [header: string]: string | string[] }, 6 | observe?: 'body', 7 | params?: 8 | | HttpParams 9 | | { 10 | [param: string]: 11 | | string 12 | | number 13 | | boolean 14 | | ReadonlyArray 15 | }, 16 | reportProgress?: boolean, 17 | responseType?: 'json', 18 | withCredentials?: boolean, 19 | } 20 | 21 | export interface BaseInterface { 22 | getById(endPoint: string, options?: RequestOptions): Observable; 23 | get(endPoint: string, options?: RequestOptions): Observable; 24 | delete(endPoint: string, options?: RequestOptions): Observable; 25 | post(endPoint: string, options?: RequestOptions): Observable; 26 | put(endPoint: string, options?: RequestOptions): Observable; 27 | } 28 | -------------------------------------------------------------------------------- /src/app/api/services/base.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | HttpClientTestingModule, 3 | HttpTestingController, 4 | } from '@angular/common/http/testing'; 5 | import { BaseService } from './base.service'; 6 | import { HttpClient } from '@angular/common/http'; 7 | import { TestBed } from '@angular/core/testing'; 8 | 9 | interface ApiResponseModel { 10 | id: string; 11 | status: boolean; 12 | requestedDate: Date; 13 | } 14 | 15 | const mockAPIResponse: Array = [ 16 | { 17 | id: Math.random().toString(), 18 | requestedDate: new Date(), 19 | status: true, 20 | }, 21 | ]; 22 | 23 | const API_FAKE_RESOURCE = 'entity'; 24 | const API_FAKE_HOST_RESOURCE = '/entity'; 25 | 26 | describe('base service', () => { 27 | let service: BaseService; 28 | let httpTestingController: HttpTestingController; 29 | let httpClient: HttpClient; 30 | 31 | beforeEach(() => { 32 | TestBed.configureTestingModule({ 33 | providers: [BaseService], 34 | imports: [HttpClientTestingModule], 35 | }); 36 | 37 | httpClient = TestBed.inject(HttpClient); 38 | httpTestingController = TestBed.inject(HttpTestingController); 39 | service = TestBed.inject(BaseService); 40 | }); 41 | 42 | 43 | afterEach(() => { 44 | httpTestingController.verify(); 45 | }); 46 | 47 | it('Should be created', () => { 48 | expect(service).toBeTruthy(); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /src/app/api/services/base.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '@angular/common/http'; 2 | import { Injectable, inject } from '@angular/core'; 3 | import { environment } from '@env/environment'; 4 | import { Observable } from 'rxjs'; 5 | import { BaseInterface, RequestOptions } from '@api/interfaces/base.interface'; 6 | 7 | /** 8 | * A service that extends from Angular HttpClient 9 | */ 10 | @Injectable({ providedIn: 'root' }) 11 | export class BaseService implements BaseInterface { 12 | private readonly API = environment.apiUrl; 13 | private readonly http = inject(HttpClient); 14 | 15 | /** 16 | * GET request 17 | * @param {string} endPoint end point for the get by Id 18 | * @param {RequestOptions} options options of the request like headers, body, etc. 19 | * @returns {Observable} 20 | */ 21 | public getById(endPoint: string, options?: RequestOptions): Observable { 22 | return this.http.get(`${this.API}${endPoint}`, options); 23 | } 24 | 25 | /** 26 | * GET request 27 | * @param {string} endPoint end point for the get 28 | * @param {RequestOptions} options options of the request like headers, body, etc. 29 | * @returns {Observable} 30 | */ 31 | public get(endPoint: string, options?: RequestOptions): Observable { 32 | return this.http.get(`${this.API}${endPoint}`, options); 33 | } 34 | 35 | /** 36 | * POST request 37 | * @param {string} endPoint end point of the api 38 | * @param {RequestOptions} options options of the request like headers, body, etc. 39 | * @returns {Observable} 40 | */ 41 | public post(endPoint: string, options?: RequestOptions): Observable { 42 | return this.http.post(`${this.API}${endPoint}`, options); 43 | } 44 | 45 | /** 46 | * PUT request 47 | * @param {string} endPoint end point of the api 48 | * @param {RequestOptions} options options of the request like headers, body, etc. 49 | * @returns {Observable} 50 | */ 51 | public put(endPoint: string, options?: RequestOptions): Observable { 52 | return this.http.put(`${this.API}${endPoint}`, options); 53 | } 54 | 55 | /** 56 | * DELETE request 57 | * @param {string} endPoint end point of the api 58 | * @param {RequestOptions} options options of the request like headers, body, etc. 59 | * @returns {Observable} 60 | */ 61 | public delete(endPoint: string, options?: RequestOptions): Observable { 62 | return this.http.delete(`${this.API}${endPoint}`, options); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

{{title}}

2 | 3 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bezael/angular-boilerplate/e9006b9b810bfd6dc7ad089c89e99111086856f7/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'angular-boilerplate'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { provideHttpClient } from '@angular/common/http'; 2 | import { NgModule } from '@angular/core'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | 5 | import { AppRoutingModule } from './app-routing.module'; 6 | import { AppComponent } from './app.component'; 7 | 8 | @NgModule({ 9 | declarations: [AppComponent], 10 | imports: [BrowserModule, AppRoutingModule], 11 | providers: [provideHttpClient()], 12 | bootstrap: [AppComponent], 13 | }) 14 | export class AppModule {} 15 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bezael/angular-boilerplate/e9006b9b810bfd6dc7ad089c89e99111086856f7/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | apiUrl: '', 3 | production: true, 4 | }; 5 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | apiUrl:'', 3 | production: false, 4 | }; 5 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bezael/angular-boilerplate/e9006b9b810bfd6dc7ad089c89e99111086856f7/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularBoilerplate 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | 6 | platformBrowserDynamic().bootstrapModule(AppModule) 7 | .catch(err => console.error(err)); 8 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including 12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | 51 | /*************************************************************************************************** 52 | * APPLICATION IMPORTS 53 | */ 54 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "paths": { 7 | "@app/*": [ 8 | "src/app/*" 9 | ], 10 | "@env/*": [ 11 | "src/environments/*" 12 | ], 13 | "@shared/*": [ 14 | "src/app/shared/*" 15 | ], 16 | "@pages/*": [ 17 | "src/app/pages/*" 18 | ], 19 | "@components/*": [ 20 | "src/app/components/*" 21 | ], 22 | "@api/*": [ 23 | "src/app/api/*" 24 | ] 25 | }, 26 | "outDir": "./dist/out-tsc", 27 | "forceConsistentCasingInFileNames": true, 28 | "strict": true, 29 | "noImplicitOverride": true, 30 | "noPropertyAccessFromIndexSignature": true, 31 | "noImplicitReturns": true, 32 | "noFallthroughCasesInSwitch": true, 33 | "sourceMap": true, 34 | "declaration": false, 35 | "downlevelIteration": true, 36 | "experimentalDecorators": true, 37 | "moduleResolution": "node", 38 | "importHelpers": true, 39 | "target": "ES2022", 40 | "module": "es2020", 41 | "lib": [ 42 | "es2020", 43 | "dom" 44 | ], 45 | "useDefineForClassFields": false 46 | }, 47 | "angularCompilerOptions": { 48 | "enableI18nLegacyMessageIdFormat": false, 49 | "strictInjectionParameters": true, 50 | "strictInputAccessModifiers": true, 51 | "strictTemplates": true 52 | } 53 | } -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": ["jest"], 6 | "module": "commonjs", 7 | "emitDecoratorMetadata": true, 8 | "allowJs": true 9 | }, 10 | "files": ["src/polyfills.ts"], 11 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 12 | } 13 | --------------------------------------------------------------------------------