├── src
├── assets
│ └── .gitkeep
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── shared
│ │ └── todo.service.ts
│ ├── todo
│ │ ├── todo.component.ts
│ │ └── todo.component.html
│ └── app.component.spec.ts
├── favicon.ico
├── styles.css
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── main.ts
├── test.ts
├── index.html
└── polyfills.ts
├── .vscode
├── settings.json
├── extensions.json
├── launch.json
└── tasks.json
├── .editorconfig
├── tsconfig.app.json
├── app-structure.txt
├── tsconfig.spec.json
├── .browserslistrc
├── .gitignore
├── tsconfig.json
├── package.json
├── karma.conf.js
├── README.md
└── angular.json
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "git.enabled": false
3 | }
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodAffection/To-Do-List-App-with-Angular-14-Firebase/main/src/favicon.ico
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | .list-group-item span {
3 | cursor: pointer;
4 | }
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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.css']
7 | })
8 | export class AppComponent {
9 | title = 'todoApp';
10 | }
11 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/app-structure.txt:
--------------------------------------------------------------------------------
1 | ● src
2 | +---● app
3 | | |
4 | | +--● todo
5 | | | |--todo.component.ts|.html|.css
6 | | |
7 | | +--● shared
8 | | | |--todo.service.ts
9 | | |
10 | | |--app.module.ts (configured firebase connection)
11 | |
12 | +---● environments
13 | | |--environment.ts (saved firebase connection details)
14 | |
15 | |--index.html (cdn path for bootstrap and fa icons)
--------------------------------------------------------------------------------
/tsconfig.spec.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/spec",
6 | "types": [
7 | "jasmine"
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 |
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | firebaseConfig:{
4 | apiKey: "AIzaSyAu2AjmjPPKspDcPDa7-ZlJipakGQwLJh0",
5 | authDomain: "todo-app-4fb0d.firebaseapp.com",
6 | projectId: "todo-app-4fb0d",
7 | storageBucket: "todo-app-4fb0d.appspot.com",
8 | messagingSenderId: "907150069430",
9 | appId: "1:907150069430:web:70cd0b50e50161efcc2017"
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
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 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import {AngularFireModule} from '@angular/fire/compat'
4 | import {AngularFirestoreModule} from '@angular/fire/compat/firestore'
5 |
6 | import { AppComponent } from './app.component';
7 | import { environment } from 'src/environments/environment';
8 | import { TodoComponent } from './todo/todo.component';
9 |
10 | @NgModule({
11 | declarations: [
12 | AppComponent,
13 | TodoComponent
14 | ],
15 | imports: [
16 | BrowserModule,
17 | AngularFireModule.initializeApp(environment.firebaseConfig),
18 | AngularFirestoreModule
19 | ],
20 | providers: [],
21 | bootstrap: [AppComponent]
22 | })
23 | export class AppModule { }
24 |
--------------------------------------------------------------------------------
/src/app/shared/todo.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import {AngularFirestore, AngularFirestoreCollection} from '@angular/fire/compat/firestore'
3 |
4 | @Injectable({
5 | providedIn: 'root'
6 | })
7 | export class TodoService {
8 | firestoreCollection : AngularFirestoreCollection;
9 |
10 | constructor(private firestore: AngularFirestore) {
11 | this.firestoreCollection = firestore.collection('todos');
12 | }
13 |
14 | addTodo(title: string){
15 | this.firestoreCollection.add({
16 | title,
17 | isDone : false
18 | })
19 | }
20 |
21 | updateTodoStatus(id:string, newStatus:boolean){
22 | this.firestoreCollection.doc(id).update({isDone:newStatus});
23 | }
24 |
25 | deleteTodo(id:string){
26 | this.firestoreCollection.doc(id).delete();
27 | }
28 |
29 | }
30 |
--------------------------------------------------------------------------------
/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/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: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | (id: string): T;
13 | keys(): string[];
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting(),
21 | );
22 |
23 | // Then we find all the tests.
24 | const context = require.context('./', true, /\.spec\.ts$/);
25 | // And load the modules.
26 | context.keys().forEach(context);
27 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | TodoApp
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "es2020",
20 | "module": "es2020",
21 | "lib": [
22 | "es2020",
23 | "dom"
24 | ]
25 | },
26 | "angularCompilerOptions": {
27 | "enableI18nLegacyMessageIdFormat": false,
28 | "strictInjectionParameters": true,
29 | "strictInputAccessModifiers": true,
30 | "strictTemplates": true
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/todo/todo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { TodoService } from '../shared/todo.service';
3 |
4 | @Component({
5 | selector: 'app-todo',
6 | templateUrl: './todo.component.html',
7 | styles: [
8 | ]
9 | })
10 | export class TodoComponent implements OnInit {
11 |
12 | todos: any[] = [];
13 |
14 | constructor(private todoService: TodoService) { }
15 |
16 | ngOnInit(): void {
17 | this.todoService.firestoreCollection.valueChanges({ idField: 'id' })
18 | .subscribe(item => {
19 | this.todos = item.sort((a:any,b:any) =>
20 | {return a.isDone -b.isDone } );
21 | })
22 | }
23 |
24 | onClick(titleInput: HTMLInputElement) {
25 | if (titleInput.value) {
26 | this.todoService.addTodo(titleInput.value);
27 | titleInput.value = "";
28 | }
29 | }
30 |
31 | onStatusChange(id: string, newStatus: boolean) {
32 | this.todoService.updateTodoStatus(id, newStatus);
33 | }
34 |
35 | onDelete(id:string){
36 | this.todoService.deleteTodo(id);
37 | }
38 |
39 | }
40 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` 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 | firebaseConfig:{
8 | apiKey: "AIzaSyAu2AjmjPPKspDcPDa7-ZlJipakGQwLJh0",
9 | authDomain: "todo-app-4fb0d.firebaseapp.com",
10 | projectId: "todo-app-4fb0d",
11 | storageBucket: "todo-app-4fb0d.appspot.com",
12 | messagingSenderId: "907150069430",
13 | appId: "1:907150069430:web:70cd0b50e50161efcc2017"
14 | }
15 | };
16 |
17 | /*
18 | * For easier debugging in development mode, you can import the following file
19 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
20 | *
21 | * This import should be commented out in production mode because it will have a negative impact
22 | * on performance if an error is thrown.
23 | */
24 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
25 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async () => {
6 | await TestBed.configureTestingModule({
7 | declarations: [
8 | AppComponent
9 | ],
10 | }).compileComponents();
11 | });
12 |
13 | it('should create the app', () => {
14 | const fixture = TestBed.createComponent(AppComponent);
15 | const app = fixture.componentInstance;
16 | expect(app).toBeTruthy();
17 | });
18 |
19 | it(`should have as title 'todoApp'`, () => {
20 | const fixture = TestBed.createComponent(AppComponent);
21 | const app = fixture.componentInstance;
22 | expect(app.title).toEqual('todoApp');
23 | });
24 |
25 | it('should render title', () => {
26 | const fixture = TestBed.createComponent(AppComponent);
27 | fixture.detectChanges();
28 | const compiled = fixture.nativeElement as HTMLElement;
29 | expect(compiled.querySelector('.content span')?.textContent).toContain('todoApp app is running!');
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "todo-app",
3 | "version": "0.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 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^14.2.0",
14 | "@angular/common": "^14.2.0",
15 | "@angular/compiler": "^14.2.0",
16 | "@angular/core": "^14.2.0",
17 | "@angular/fire": "^7.4.1",
18 | "@angular/forms": "^14.2.0",
19 | "@angular/platform-browser": "^14.2.0",
20 | "@angular/platform-browser-dynamic": "^14.2.0",
21 | "@angular/router": "^14.2.0",
22 | "rxjs": "~7.5.0",
23 | "tslib": "^2.3.0",
24 | "zone.js": "~0.11.4"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "^14.2.5",
28 | "@angular/cli": "~14.2.5",
29 | "@angular/compiler-cli": "^14.2.0",
30 | "@types/jasmine": "~4.0.0",
31 | "jasmine-core": "~4.3.0",
32 | "karma": "~6.4.0",
33 | "karma-chrome-launcher": "~3.1.0",
34 | "karma-coverage": "~2.2.0",
35 | "karma-jasmine": "~5.1.0",
36 | "karma-jasmine-html-reporter": "~2.0.0",
37 | "typescript": "~4.7.2"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/todo/todo.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/todo-app'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular 14 To-Do App with Firebase
2 |
3 |
4 | ## How it works ?
5 |
6 | :tv: Video tutorial on this same topic
7 | Url : https://youtu.be/kzl4IKAC8O4
8 |
9 | 
12 |
13 |
14 | | :bar_chart: | List of Tutorials | | :moneybag: | Support Us |
15 | |--------------------------:|:---------------------|---|---------------------:|:-------------------------------------|
16 | | Angular |http://bit.ly/2KQN9xF | |Paypal | https://goo.gl/bPcyXW |
17 | | Asp.Net Core |http://bit.ly/30fPDMg | |Amazon Affiliate | https://geni.us/JDzpE |
18 | | React |http://bit.ly/325temF | |
19 | | Python |http://bit.ly/2ws4utg | | :point_right: | Follow Us |
20 | | Node.js |https://goo.gl/viJcFs | |Website |http://www.codaffection.com |
21 | | Asp.Net MVC |https://goo.gl/gvjUJ7 | |YouTube |https://www.youtube.com/codaffection |
22 | | Flutter |https://bit.ly/3ggmmJz| |Facebook |https://www.facebook.com/codaffection |
23 | | Web API |https://goo.gl/itVayJ | |Twitter |https://twitter.com/CodAffection |
24 | | MEAN Stack |https://goo.gl/YJPPAH | |
25 | | C# Tutorial |https://goo.gl/s1zJxo | |
26 | | Asp.Net WebForm |https://goo.gl/GXC2aJ | |
27 | | C# WinForm |https://goo.gl/vHS9Hd | |
28 | | MS SQL |https://goo.gl/MLYS9e | |
29 | | Crystal Report |https://goo.gl/5Vou7t | |
30 | | CG Exercises in C Program |https://goo.gl/qEWJCs | |
31 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "todoApp": {
7 | "projectType": "application",
8 | "schematics": {},
9 | "root": "",
10 | "sourceRoot": "src",
11 | "prefix": "app",
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/todo-app",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": "src/polyfills.ts",
20 | "tsConfig": "tsconfig.app.json",
21 | "assets": [
22 | "src/favicon.ico",
23 | "src/assets"
24 | ],
25 | "styles": [
26 | "src/styles.css"
27 | ],
28 | "scripts": []
29 | },
30 | "configurations": {
31 | "production": {
32 | "budgets": [
33 | {
34 | "type": "initial",
35 | "maximumWarning": "500kb",
36 | "maximumError": "1mb"
37 | },
38 | {
39 | "type": "anyComponentStyle",
40 | "maximumWarning": "2kb",
41 | "maximumError": "4kb"
42 | }
43 | ],
44 | "fileReplacements": [
45 | {
46 | "replace": "src/environments/environment.ts",
47 | "with": "src/environments/environment.prod.ts"
48 | }
49 | ],
50 | "outputHashing": "all"
51 | },
52 | "development": {
53 | "buildOptimizer": false,
54 | "optimization": false,
55 | "vendorChunk": true,
56 | "extractLicenses": false,
57 | "sourceMap": true,
58 | "namedChunks": true
59 | }
60 | },
61 | "defaultConfiguration": "production"
62 | },
63 | "serve": {
64 | "builder": "@angular-devkit/build-angular:dev-server",
65 | "configurations": {
66 | "production": {
67 | "browserTarget": "todoApp:build:production"
68 | },
69 | "development": {
70 | "browserTarget": "todoApp:build:development"
71 | }
72 | },
73 | "defaultConfiguration": "development"
74 | },
75 | "extract-i18n": {
76 | "builder": "@angular-devkit/build-angular:extract-i18n",
77 | "options": {
78 | "browserTarget": "todoApp:build"
79 | }
80 | },
81 | "test": {
82 | "builder": "@angular-devkit/build-angular:karma",
83 | "options": {
84 | "main": "src/test.ts",
85 | "polyfills": "src/polyfills.ts",
86 | "tsConfig": "tsconfig.spec.json",
87 | "karmaConfig": "karma.conf.js",
88 | "assets": [
89 | "src/favicon.ico",
90 | "src/assets"
91 | ],
92 | "styles": [
93 | "src/styles.css"
94 | ],
95 | "scripts": []
96 | }
97 | }
98 | }
99 | }
100 | }
101 | }
102 |
--------------------------------------------------------------------------------