├── .editorconfig ├── .firebase └── hosting.ZGlzdC9xci1hcHA.cache ├── .firebaserc ├── .gitignore ├── README.md ├── _config.yml ├── angular.json ├── browserslist ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── firebase.json ├── karma.conf.js ├── ngsw-config.json ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── guest-list │ │ ├── guest-list.component.html │ │ ├── guest-list.component.scss │ │ ├── guest-list.component.spec.ts │ │ └── guest-list.component.ts │ ├── guest.model.ts │ ├── guest.service.spec.ts │ ├── guest.service.ts │ ├── navbar │ │ ├── navbar.component.html │ │ ├── navbar.component.scss │ │ ├── navbar.component.spec.ts │ │ └── navbar.component.ts │ ├── registration │ │ ├── registration.component.html │ │ ├── registration.component.scss │ │ ├── registration.component.spec.ts │ │ └── registration.component.ts │ └── scanner │ │ ├── scanner.component.html │ │ ├── scanner.component.scss │ │ ├── scanner.component.spec.ts │ │ └── scanner.component.ts ├── assets │ ├── .gitkeep │ └── icons │ │ ├── icon-128x128.png │ │ ├── icon-144x144.png │ │ ├── icon-152x152.png │ │ ├── icon-192x192.png │ │ ├── icon-384x384.png │ │ ├── icon-512x512.png │ │ ├── icon-72x72.png │ │ └── icon-96x96.png ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── manifest.webmanifest ├── polyfills.ts ├── styles.scss └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.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 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.firebase/hosting.ZGlzdC9xci1hcHA.cache: -------------------------------------------------------------------------------- 1 | styles.09e2c710755c8867a460.css,1573620721255,f1b651238a58fe290baec6c5e32f3bdb1943dd2bd582f02569231f7a757c7837 2 | favicon.ico,1573620721255,a2aee5309d0b59b9b66384ccc3969a07fab1b320d0bf76f1b25047a051d7f774 3 | manifest.webmanifest,1573620721255,ca2e402602905dadb474aed97933526227b4ba3a78dc7ef8c8779f9a72efd092 4 | index.html,1573620726107,d1edb515dd6e6794cc121ff680ee6149c29756a4eb6a83da8c53d21dcafc23d4 5 | ngsw.json,1573620726122,7ef451427ec9b985da36ee2e0564e797b289f84289df935b3bfd513914aacf4d 6 | 3rdpartylicenses.txt,1573620721255,8fa26e4b281c85cf0b16211eb30c47b2fdbfb3aa0c64286dd07285f18d5e674a 7 | runtime-es2015.edb2fcf2778e7bf1d426.js,1573620721880,c4aa0a348c0dcf9c6af4b7b3f066d0599bcec97472ed96ab232c8dceb70607cb 8 | runtime-es5.edb2fcf2778e7bf1d426.js,1573620721883,c4aa0a348c0dcf9c6af4b7b3f066d0599bcec97472ed96ab232c8dceb70607cb 9 | polyfills-es2015.2987770fde9daa1d8a2e.js,1573620722068,f0b875e37ea1c6be448367ad2472754104f5fc566a151ccb172df11a974dbef1 10 | safety-worker.js,1573620726123,70f226c01620bfeb85ba94aef9a23338f1da71a30d43e98456c821a3cc41f65b 11 | worker-basic.min.js,1573620726123,70f226c01620bfeb85ba94aef9a23338f1da71a30d43e98456c821a3cc41f65b 12 | assets/icons/icon-144x144.png,1573620721256,8ad379379a04d3a883f64c9d4b215ca51501f4352226d0323bff9cd9b8df18db 13 | assets/icons/icon-128x128.png,1573620721256,82273be08042beb7d17c79cd3d8a4f91a1f7aba7c4fd9f35561acfa0f3d4e86f 14 | assets/icons/icon-152x152.png,1573620721256,0dda6f1fda72dac9973fa950a48fb51c6ca0c355f8d1a4e70782d812bda84648 15 | assets/icons/icon-192x192.png,1573620721256,65605e98805d98129c99b096b03240cdc7f01fc1c52526319b5ab9269fc19557 16 | assets/icons/icon-384x384.png,1573620721256,71b724fcc39f5359dcdd66e7f77d3f2d0cdc0988a9296928e90b400be33f725f 17 | assets/icons/icon-72x72.png,1573620721256,96f667025e6f928f6c84367eb30d795517583dcb620d72d81c1d946425ef4887 18 | assets/icons/icon-96x96.png,1573620721256,695a124b4a11980d95e1539a3be0b3f823e59ac7d918085cdf85afdd3a4bb55b 19 | assets/icons/icon-512x512.png,1573620721256,2e94c56c7136de4159eedc061eb8c4c253f518c53bbe08716305297350823d01 20 | polyfills-es5.ef4b1e1fc703b3ff76e3.js,1573620724268,a4cf42ab1e802fc33456d75e1a731ccb4ff7b663dfc2090ee593163e44e464be 21 | ngsw-worker.js,1573620726123,62707aa3eac08dce541f7f9d6251d57b672ba439cd4632eb0677e803c0cc6f07 22 | main-es2015.59d5a92893bd185e935a.js,1573620726070,3d5b4812399c6670b8fdd8b02b2d426aaba92ddc67614be01a3a19b99e49d452 23 | main-es5.59d5a92893bd185e935a.js,1573620726077,8419a695264ba59735f65e7604fa9d5f8ef397ea2ffd733879cc52a83e5888d0 24 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "qr-app-79289" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.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 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # QR Code Event Registration App - Angular PWA 2 | 3 |
4 | In this tutorial I'm going to show you how to create a simple PWA that you can install in your phone. This PWA will be able to create QR codes and read them as well. With this app, you will have more control of your guests for your next event! 5 | 6 | 7 | In this app, we are going to suppose is a registration app for your event. 8 | 9 | ## Tutorial: 10 | https://dev.to/devpato/qr-code-event-registration-app-angular-pwa-2fhe 11 | 12 | ## Live App: 13 | https://qr-app-79289.firebaseapp.com/ 14 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "qr-app": { 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:browser", 19 | "options": { 20 | "outputPath": "dist/qr-app", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "tsconfig.app.json", 25 | "aot": false, 26 | "assets": [ 27 | "src/favicon.ico", 28 | "src/assets", 29 | "src/manifest.webmanifest" 30 | ], 31 | "styles": [ 32 | "src/styles.scss" 33 | ], 34 | "scripts": [] 35 | }, 36 | "configurations": { 37 | "production": { 38 | "fileReplacements": [ 39 | { 40 | "replace": "src/environments/environment.ts", 41 | "with": "src/environments/environment.prod.ts" 42 | } 43 | ], 44 | "optimization": true, 45 | "outputHashing": "all", 46 | "sourceMap": false, 47 | "extractCss": true, 48 | "namedChunks": false, 49 | "aot": true, 50 | "extractLicenses": true, 51 | "vendorChunk": false, 52 | "buildOptimizer": true, 53 | "budgets": [ 54 | { 55 | "type": "initial", 56 | "maximumWarning": "2mb", 57 | "maximumError": "5mb" 58 | }, 59 | { 60 | "type": "anyComponentStyle", 61 | "maximumWarning": "6kb", 62 | "maximumError": "10kb" 63 | } 64 | ], 65 | "serviceWorker": true, 66 | "ngswConfigPath": "ngsw-config.json" 67 | } 68 | } 69 | }, 70 | "serve": { 71 | "builder": "@angular-devkit/build-angular:dev-server", 72 | "options": { 73 | "browserTarget": "qr-app:build" 74 | }, 75 | "configurations": { 76 | "production": { 77 | "browserTarget": "qr-app:build:production" 78 | } 79 | } 80 | }, 81 | "extract-i18n": { 82 | "builder": "@angular-devkit/build-angular:extract-i18n", 83 | "options": { 84 | "browserTarget": "qr-app:build" 85 | } 86 | }, 87 | "test": { 88 | "builder": "@angular-devkit/build-angular:karma", 89 | "options": { 90 | "main": "src/test.ts", 91 | "polyfills": "src/polyfills.ts", 92 | "tsConfig": "tsconfig.spec.json", 93 | "karmaConfig": "karma.conf.js", 94 | "assets": [ 95 | "src/favicon.ico", 96 | "src/assets", 97 | "src/manifest.webmanifest" 98 | ], 99 | "styles": [ 100 | "src/styles.scss" 101 | ], 102 | "scripts": [] 103 | } 104 | }, 105 | "lint": { 106 | "builder": "@angular-devkit/build-angular:tslint", 107 | "options": { 108 | "tsConfig": [ 109 | "tsconfig.app.json", 110 | "tsconfig.spec.json", 111 | "e2e/tsconfig.json" 112 | ], 113 | "exclude": [ 114 | "**/node_modules/**" 115 | ] 116 | } 117 | }, 118 | "e2e": { 119 | "builder": "@angular-devkit/build-angular:protractor", 120 | "options": { 121 | "protractorConfig": "e2e/protractor.conf.js", 122 | "devServerTarget": "qr-app:serve" 123 | }, 124 | "configurations": { 125 | "production": { 126 | "devServerTarget": "qr-app:serve:production" 127 | } 128 | } 129 | } 130 | } 131 | }}, 132 | "defaultProject": "qr-app" 133 | } -------------------------------------------------------------------------------- /browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('qr-app app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "dist/qr-app", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/qr-app'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /ngsw-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/service-worker/config/schema.json", 3 | "index": "/index.html", 4 | "assetGroups": [ 5 | { 6 | "name": "app", 7 | "installMode": "prefetch", 8 | "resources": { 9 | "files": [ 10 | "/favicon.ico", 11 | "/index.html", 12 | "/manifest.webmanifest", 13 | "/*.css", 14 | "/*.js" 15 | ] 16 | } 17 | }, { 18 | "name": "assets", 19 | "installMode": "lazy", 20 | "updateMode": "prefetch", 21 | "resources": { 22 | "files": [ 23 | "/assets/**", 24 | "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" 25 | ] 26 | } 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qr-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~8.2.3", 15 | "@angular/common": "~8.2.3", 16 | "@angular/compiler": "~8.2.3", 17 | "@angular/core": "~8.2.3", 18 | "@angular/forms": "~8.2.3", 19 | "@angular/platform-browser": "~8.2.3", 20 | "@angular/platform-browser-dynamic": "~8.2.3", 21 | "@angular/pwa": "^0.803.18", 22 | "@angular/router": "~8.2.3", 23 | "@angular/service-worker": "~8.2.3", 24 | "@zxing/ngx-scanner": "^2.0.1", 25 | "ngx-qrcode2": "0.0.9", 26 | "rxjs": "~6.4.0", 27 | "tslib": "^1.10.0", 28 | "uuid": "^3.3.3", 29 | "zone.js": "~0.9.1" 30 | }, 31 | "devDependencies": { 32 | "@angular-devkit/build-angular": "~0.803.0", 33 | "@angular/cli": "~8.3.0", 34 | "@angular/compiler-cli": "~8.2.3", 35 | "@angular/language-service": "~8.2.3", 36 | "@types/node": "~8.9.4", 37 | "@types/jasmine": "~3.3.8", 38 | "@types/jasminewd2": "~2.0.3", 39 | "codelyzer": "^5.0.0", 40 | "jasmine-core": "~3.4.0", 41 | "jasmine-spec-reporter": "~4.2.1", 42 | "karma": "~4.1.0", 43 | "karma-chrome-launcher": "~2.2.0", 44 | "karma-coverage-istanbul-reporter": "~2.0.1", 45 | "karma-jasmine": "~2.0.1", 46 | "karma-jasmine-html-reporter": "^1.4.0", 47 | "protractor": "~5.4.0", 48 | "ts-node": "~7.0.0", 49 | "tslint": "~5.15.0", 50 | "typescript": "~3.5.3" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from "@angular/core"; 2 | import { Routes, RouterModule } from "@angular/router"; 3 | import { RegistrationComponent } from "./registration/registration.component"; 4 | import { GuestListComponent } from "./guest-list/guest-list.component"; 5 | import { ScannerComponent } from "./scanner/scanner.component"; 6 | 7 | const routes: Routes = [ 8 | { 9 | path: "", 10 | component: RegistrationComponent 11 | }, 12 | { 13 | path: "guests", 14 | component: GuestListComponent 15 | }, 16 | { 17 | path: "scanner", 18 | component: ScannerComponent 19 | } 20 | ]; 21 | 22 | @NgModule({ 23 | imports: [RouterModule.forRoot(routes)], 24 | exports: [RouterModule] 25 | }) 26 | export class AppRoutingModule {} 27 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'qr-app'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('qr-app'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('.content span').textContent).toContain('qr-app app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /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 = 'qr-app'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from "@angular/platform-browser"; 2 | import { NgModule } from "@angular/core"; 3 | import { AppRoutingModule } from "./app-routing.module"; 4 | import { AppComponent } from "./app.component"; 5 | import { ServiceWorkerModule } from "@angular/service-worker"; 6 | import { environment } from "../environments/environment"; 7 | import { ScannerComponent } from "./scanner/scanner.component"; 8 | import { RegistrationComponent } from "./registration/registration.component"; 9 | import { GuestListComponent } from "./guest-list/guest-list.component"; 10 | import { NavbarComponent } from "./navbar/navbar.component"; 11 | import { NgxQRCodeModule } from "ngx-qrcode2"; 12 | import { ZXingScannerModule } from "@zxing/ngx-scanner"; 13 | import { ReactiveFormsModule } from "@angular/forms"; 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | ScannerComponent, 18 | RegistrationComponent, 19 | GuestListComponent, 20 | NavbarComponent 21 | ], 22 | imports: [ 23 | BrowserModule, 24 | AppRoutingModule, 25 | ServiceWorkerModule.register("ngsw-worker.js", { 26 | enabled: environment.production 27 | }), 28 | ReactiveFormsModule, 29 | ZXingScannerModule, 30 | NgxQRCodeModule 31 | ], 32 | providers: [], 33 | bootstrap: [AppComponent] 34 | }) 35 | export class AppModule {} 36 | -------------------------------------------------------------------------------- /src/app/guest-list/guest-list.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 |
{{ g.firstName }}{{ g.lastName }} 8 | 13 |
17 |
18 | -------------------------------------------------------------------------------- /src/app/guest-list/guest-list.component.scss: -------------------------------------------------------------------------------- 1 | .qrcode { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/guest-list/guest-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { GuestListComponent } from './guest-list.component'; 4 | 5 | describe('GuestListComponent', () => { 6 | let component: GuestListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ GuestListComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(GuestListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/guest-list/guest-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from "@angular/core"; 2 | import { GuestService } from "../guest.service"; 3 | 4 | @Component({ 5 | selector: "app-guest-list", 6 | templateUrl: "./guest-list.component.html", 7 | styleUrls: ["./guest-list.component.scss"] 8 | }) 9 | export class GuestListComponent implements OnInit { 10 | guestList$ = this.guestService.guests$; 11 | elementType: "url" | "canvas" | "img" = "url"; 12 | constructor(private guestService: GuestService) {} 13 | ngOnInit() {} 14 | } 15 | -------------------------------------------------------------------------------- /src/app/guest.model.ts: -------------------------------------------------------------------------------- 1 | export interface Guest { 2 | id: string; 3 | firstName: string; 4 | lastName: string; 5 | qr?: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/app/guest.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { GuestService } from './guest.service'; 4 | 5 | describe('GuestService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: GuestService = TestBed.get(GuestService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/guest.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Guest } from "./guest.model"; 3 | import { BehaviorSubject } from "rxjs"; 4 | @Injectable({ 5 | providedIn: "root" 6 | }) 7 | export class GuestService { 8 | private guestSource = new BehaviorSubject(null); 9 | guests$ = this.guestSource.asObservable(); 10 | private guests = [ 11 | { 12 | id: "7558e6e5-3cfa-4c24-b5b7-653ecbd49925", 13 | firstName: "Pato", 14 | lastName: "Vargas" 15 | }, 16 | { 17 | id: "4847498c-b57f-4ceb-8c0c-8831b9972158", 18 | firstName: "Diego", 19 | lastName: "Maradona" 20 | } 21 | ]; 22 | 23 | constructor() { 24 | this.populateQR(); 25 | this.guestSource.next(this.guests); 26 | } 27 | 28 | populateQR(): void { 29 | this.guests.forEach((g: Guest) => (g.qr = JSON.stringify({ ...g }))); 30 | } 31 | 32 | addGuest(newGuest: Guest): void { 33 | this.guests.push(newGuest); 34 | this.guestSource.next(this.guests); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/app/navbar/navbar.component.html: -------------------------------------------------------------------------------- 1 |
2 | Registration 3 | QR Scanner 4 | Guest 5 |
6 | -------------------------------------------------------------------------------- /src/app/navbar/navbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/app/navbar/navbar.component.scss -------------------------------------------------------------------------------- /src/app/navbar/navbar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NavbarComponent } from './navbar.component'; 4 | 5 | describe('NavbarComponent', () => { 6 | let component: NavbarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NavbarComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NavbarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/navbar/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-navbar', 5 | templateUrl: './navbar.component.html', 6 | styleUrls: ['./navbar.component.scss'] 7 | }) 8 | export class NavbarComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/registration/registration.component.html: -------------------------------------------------------------------------------- 1 |
2 |

QR Code Registration App!

3 | Please enter your information to register for the event. 4 |
5 |
6 |
7 | 12 |
13 | 14 |
15 |
16 |
17 | 18 |
19 | 20 |
21 |
22 | 29 |
30 |
31 |
32 | -------------------------------------------------------------------------------- /src/app/registration/registration.component.scss: -------------------------------------------------------------------------------- 1 | .registration { 2 | text-align: center; 3 | margin: 8px; 4 | &-form { 5 | form { 6 | display: flex; 7 | flex-direction: column; 8 | 9 | .field { 10 | margin: 8px; 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/registration/registration.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { RegistrationComponent } from './registration.component'; 4 | 5 | describe('RegistrationComponent', () => { 6 | let component: RegistrationComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ RegistrationComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(RegistrationComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/registration/registration.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from "@angular/core"; 2 | import { FormBuilder } from "@angular/forms"; 3 | import { Validators } from "@angular/forms"; 4 | import { v4 as uuid } from "uuid"; 5 | import { GuestService } from "../guest.service"; 6 | import { Router } from "@angular/router"; 7 | @Component({ 8 | selector: "app-registration", 9 | templateUrl: "./registration.component.html", 10 | styleUrls: ["./registration.component.scss"] 11 | }) 12 | export class RegistrationComponent implements OnInit { 13 | registrationForm = this.fb.group({ 14 | firstName: ["", Validators.required], 15 | lastName: ["", Validators.required] 16 | }); 17 | 18 | constructor( 19 | private fb: FormBuilder, 20 | private guestService: GuestService, 21 | private router: Router 22 | ) {} 23 | 24 | ngOnInit() {} 25 | 26 | onSubmit(): void { 27 | const guest = { ...this.registrationForm.value, id: uuid() }; 28 | guest.qr = JSON.stringify(guest); 29 | this.guestService.addGuest(guest); 30 | this.registrationForm.reset(); 31 | this.router.navigate(["/guests"]); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/scanner/scanner.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 9 |
10 |
11 |
12 |
13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 | Welcome!! 21 |
22 |

Guest has been found on the guest lists

23 |
24 | 25 | 26 |
27 | 28 |
29 | Warning! 30 |
31 |

This person is not a guest!

32 |
33 | 34 |
35 | -------------------------------------------------------------------------------- /src/app/scanner/scanner.component.scss: -------------------------------------------------------------------------------- 1 | ::ng-deep { 2 | .qr-scan-area { 3 | position: relative; 4 | zxing-scanner { 5 | max-width: 100%; 6 | } 7 | 8 | .qr-area { 9 | position: absolute; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: calc(100% - 50px); 14 | top: 0; 15 | width: 100%; 16 | .area { 17 | height: 200px; 18 | width: 200px; 19 | border: 2px solid red; 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/scanner/scanner.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ScannerComponent } from './scanner.component'; 4 | 5 | describe('ScannerComponent', () => { 6 | let component: ScannerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ScannerComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ScannerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/scanner/scanner.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from "@angular/core"; 2 | import { Guest } from "../guest.model"; 3 | import { GuestService } from "../guest.service"; 4 | import { map } from "rxjs/operators"; 5 | 6 | @Component({ 7 | selector: "app-scanner", 8 | templateUrl: "./scanner.component.html", 9 | styleUrls: ["./scanner.component.scss"] 10 | }) 11 | export class ScannerComponent implements OnInit { 12 | availableDevices: MediaDeviceInfo[]; 13 | currentDevice: MediaDeviceInfo = null; 14 | hasDevices: boolean; 15 | hasPermission: boolean; 16 | qrResult: Guest; 17 | guestExist: boolean; 18 | 19 | constructor(private guestService: GuestService) {} 20 | 21 | ngOnInit(): void {} 22 | 23 | clearResult(): void { 24 | this.qrResult = null; 25 | } 26 | 27 | onCodeResult(resultString: string): void { 28 | this.guestExist = null; 29 | if (this.checkQRJSON(resultString)) { 30 | this.qrResult = JSON.parse(resultString); 31 | this.checkInGuest(); 32 | this.clearMessage(); 33 | } else { 34 | this.guestExist = false; 35 | this.clearMessage(); 36 | } 37 | } 38 | 39 | onHasPermission(has: boolean): void { 40 | this.hasPermission = has; 41 | } 42 | 43 | checkInGuest(): void { 44 | this.guestService.guests$ 45 | .pipe( 46 | map(guests => 47 | guests.find((guest: Guest) => guest.id === this.qrResult.id) 48 | ) 49 | ) 50 | .subscribe(guest => { 51 | if (guest !== null && guest !== undefined) { 52 | this.guestExist = true; 53 | } else { 54 | this.guestExist = false; 55 | } 56 | this.clearResult(); 57 | this.clearMessage(); 58 | }); 59 | } 60 | 61 | clearMessage() { 62 | setTimeout(() => { 63 | this.guestExist = null; 64 | }, 3000); 65 | } 66 | 67 | checkQRJSON(qrString: string): boolean { 68 | if ( 69 | /^[\],:{}\s]*$/.test( 70 | qrString 71 | .replace(/\\["\\\/bfnrtu]/g, "@") 72 | .replace( 73 | /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, 74 | "]" 75 | ) 76 | .replace(/(?:^|:|,)(?:\s*\[)+/g, "") 77 | ) 78 | ) { 79 | return true; 80 | } else { 81 | return false; 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/icons/icon-128x128.png -------------------------------------------------------------------------------- /src/assets/icons/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/icons/icon-144x144.png -------------------------------------------------------------------------------- /src/assets/icons/icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/icons/icon-152x152.png -------------------------------------------------------------------------------- /src/assets/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/icons/icon-192x192.png -------------------------------------------------------------------------------- /src/assets/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/icons/icon-384x384.png -------------------------------------------------------------------------------- /src/assets/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/icons/icon-512x512.png -------------------------------------------------------------------------------- /src/assets/icons/icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/icons/icon-72x72.png -------------------------------------------------------------------------------- /src/assets/icons/icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/assets/icons/icon-96x96.png -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devpato/angular-pwa-qrcode/838c745e6c315978f3b36d1df99511d07b57f29f/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | QrApp 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/manifest.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qr-app", 3 | "short_name": "qr-app", 4 | "theme_color": "#1976d2", 5 | "background_color": "#fafafa", 6 | "display": "standalone", 7 | "scope": "/", 8 | "start_url": "/", 9 | "icons": [ 10 | { 11 | "src": "assets/icons/icon-72x72.png", 12 | "sizes": "72x72", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "assets/icons/icon-96x96.png", 17 | "sizes": "96x96", 18 | "type": "image/png" 19 | }, 20 | { 21 | "src": "assets/icons/icon-128x128.png", 22 | "sizes": "128x128", 23 | "type": "image/png" 24 | }, 25 | { 26 | "src": "assets/icons/icon-144x144.png", 27 | "sizes": "144x144", 28 | "type": "image/png" 29 | }, 30 | { 31 | "src": "assets/icons/icon-152x152.png", 32 | "sizes": "152x152", 33 | "type": "image/png" 34 | }, 35 | { 36 | "src": "assets/icons/icon-192x192.png", 37 | "sizes": "192x192", 38 | "type": "image/png" 39 | }, 40 | { 41 | "src": "assets/icons/icon-384x384.png", 42 | "sizes": "384x384", 43 | "type": "image/png" 44 | }, 45 | { 46 | "src": "assets/icons/icon-512x512.png", 47 | "sizes": "512x512", 48 | "type": "image/png" 49 | } 50 | ] 51 | } -------------------------------------------------------------------------------- /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 Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts" 13 | ], 14 | "exclude": [ 15 | "src/test.ts", 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | }, 22 | "angularCompilerOptions": { 23 | "fullTemplateTypeCheck": true, 24 | "strictInjectionParameters": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-use-before-declare": true, 64 | "no-var-requires": false, 65 | "object-literal-key-quotes": [ 66 | true, 67 | "as-needed" 68 | ], 69 | "object-literal-sort-keys": false, 70 | "ordered-imports": false, 71 | "quotemark": [ 72 | true, 73 | "single" 74 | ], 75 | "trailing-comma": false, 76 | "no-conflicting-lifecycle": true, 77 | "no-host-metadata-property": true, 78 | "no-input-rename": true, 79 | "no-inputs-metadata-property": true, 80 | "no-output-native": true, 81 | "no-output-on-prefix": true, 82 | "no-output-rename": true, 83 | "no-outputs-metadata-property": true, 84 | "template-banana-in-box": true, 85 | "template-no-negated-async": true, 86 | "use-lifecycle-interface": true, 87 | "use-pipe-transform-interface": true 88 | }, 89 | "rulesDirectory": [ 90 | "codelyzer" 91 | ] 92 | } --------------------------------------------------------------------------------