├── src
    ├── styles.scss
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.scss
    │   ├── app.routes.ts
    │   ├── app.component.html
    │   ├── app.config.ts
    │   ├── app.component.ts
    │   └── app.component.spec.ts
    ├── favicon.ico
    ├── main.ts
    └── index.html
├── .vscode
    ├── extensions.json
    ├── launch.json
    └── tasks.json
├── tsconfig.app.json
├── tsconfig.spec.json
├── .editorconfig
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
└── angular.json


/src/styles.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | .hidden {
2 |   display: none;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ayyazzafar/angular_17_tutorials_code/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 | 
3 | export const routes: Routes = [];
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 | <div
 2 |   style="
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |   "
 8 | >
 9 |   Hello world
10 | </div>
11 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { appConfig } from './app/app.config';
3 | import { AppComponent } from './app/app.component';
4 | 
5 | bootstrapApplication(AppComponent, appConfig)
6 |   .catch((err) => console.error(err));
7 | 


--------------------------------------------------------------------------------
/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 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/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 |   "include": [
11 |     "src/**/*.spec.ts",
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/app/app.config.ts:
--------------------------------------------------------------------------------
 1 | import { ApplicationConfig } from '@angular/core';
 2 | import { provideRouter } from '@angular/router';
 3 | 
 4 | import { provideAnimations } from '@angular/platform-browser/animations';
 5 | import { routes } from './app.routes';
 6 | 
 7 | export const appConfig: ApplicationConfig = {
 8 |   providers: [provideRouter(routes), provideAnimations()],
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { CommonModule } from '@angular/common';
 2 | import { Component } from '@angular/core';
 3 | import { RouterOutlet } from '@angular/router';
 4 | 
 5 | @Component({
 6 |   selector: 'app-root',
 7 |   standalone: true,
 8 |   imports: [CommonModule, RouterOutlet],
 9 |   templateUrl: './app.component.html',
10 |   styleUrls: ['./app.component.scss'],
11 | })
12 | export class AppComponent {}
13 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Angular17</title>
 6 |     <base href="/" />
 7 |     <meta
 8 |       http-equiv="Content-Security-Policy"
 9 |       content="script-src 'self'; object-src 'self';"
10 |     />
11 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
12 |     <link rel="icon" type="image/x-icon" href="favicon.ico" />
13 |   </head>
14 |   <body class="mat-typography">
15 |     <app-root></app-root>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 3 |   "version": "0.2.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "ng serve",
 7 |       "type": "chrome",
 8 |       "request": "launch",
 9 |       "preLaunchTask": "npm: start",
10 |       "url": "http://localhost:4200/"
11 |     },
12 |     {
13 |       "name": "ng test",
14 |       "type": "chrome",
15 |       "request": "launch",
16 |       "preLaunchTask": "npm: test",
17 |       "url": "http://localhost:9876/debug.html"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "resolveJsonModule": true,
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitOverride": true,
10 |     "noPropertyAccessFromIndexSignature": true,
11 |     "noImplicitReturns": true,
12 |     "noFallthroughCasesInSwitch": true,
13 |     "esModuleInterop": true,
14 |     "sourceMap": true,
15 |     "declaration": false,
16 |     "downlevelIteration": true,
17 |     "experimentalDecorators": true,
18 |     "moduleResolution": "node",
19 |     "importHelpers": true,
20 |     "target": "ES2022",
21 |     "module": "ES2022",
22 |     "useDefineForClassFields": false,
23 |     "lib": ["ES2022", "dom"]
24 |   },
25 |   "angularCompilerOptions": {
26 |     "enableI18nLegacyMessageIdFormat": false,
27 |     "strictInjectionParameters": true,
28 |     "strictInputAccessModifiers": true,
29 |     "strictTemplates": true
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/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 |       imports: [AppComponent],
 8 |     }).compileComponents();
 9 |   });
10 | 
11 |   it('should create the app', () => {
12 |     const fixture = TestBed.createComponent(AppComponent);
13 |     const app = fixture.componentInstance;
14 |     expect(app).toBeTruthy();
15 |   });
16 | 
17 |   it(`should have the 'angular17' title`, () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.componentInstance;
20 |     expect(app.title).toEqual('angular17');
21 |   });
22 | 
23 |   it('should render title', () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     fixture.detectChanges();
26 |     const compiled = fixture.nativeElement as HTMLElement;
27 |     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular17');
28 |   });
29 | });
30 | 


--------------------------------------------------------------------------------
/.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 | # Angular17
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | 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`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | 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.
24 | 
25 | ## Further help
26 | 
27 | 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.
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular17",
 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": "^17.0.0",
14 |     "@angular/cdk": "^17.0.0",
15 |     "@angular/common": "^17.0.0",
16 |     "@angular/compiler": "^17.0.0",
17 |     "@angular/core": "^17.0.0",
18 |     "@angular/forms": "^17.0.0",
19 |     "@angular/platform-browser": "^17.0.0",
20 |     "@angular/platform-browser-dynamic": "^17.0.0",
21 |     "@angular/router": "^17.0.0",
22 |     "rxjs": "~7.8.0",
23 |     "tslib": "^2.3.0",
24 |     "zone.js": "~0.14.2"
25 |   },
26 |   "devDependencies": {
27 |     "@angular-devkit/build-angular": "^17.0.0",
28 |     "@angular/cli": "^17.0.0",
29 |     "@angular/compiler-cli": "^17.0.0",
30 |     "@types/jasmine": "~5.1.0",
31 |     "jasmine-core": "~5.1.0",
32 |     "karma": "~6.4.0",
33 |     "karma-chrome-launcher": "~3.2.0",
34 |     "karma-coverage": "~2.2.0",
35 |     "karma-jasmine": "~5.1.0",
36 |     "karma-jasmine-html-reporter": "~2.1.0",
37 |     "typescript": "~5.2.2"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "version": 1,
 4 |   "newProjectRoot": "projects",
 5 |   "projects": {
 6 |     "angular17": {
 7 |       "projectType": "application",
 8 |       "schematics": {
 9 |         "@schematics/angular:component": {
10 |           "style": "scss"
11 |         }
12 |       },
13 |       "root": "",
14 |       "sourceRoot": "src",
15 |       "prefix": "app",
16 |       "architect": {
17 |         "build": {
18 |           "builder": "@angular-devkit/build-angular:application",
19 |           "options": {
20 |             "optimization": true,
21 |             "outputPath": "dist/angular17",
22 |             "index": "src/index.html",
23 |             "browser": "src/main.ts",
24 |             "polyfills": ["zone.js"],
25 |             "tsConfig": "tsconfig.app.json",
26 |             "inlineStyleLanguage": "scss",
27 |             "assets": ["src/favicon.ico", "src/assets"],
28 |             "styles": ["src/styles.scss"],
29 |             "scripts": []
30 |           },
31 |           "configurations": {
32 |             "production": {
33 |               "budgets": [
34 |                 {
35 |                   "type": "initial",
36 |                   "maximumWarning": "500kb",
37 |                   "maximumError": "1mb"
38 |                 },
39 |                 {
40 |                   "type": "anyComponentStyle",
41 |                   "maximumWarning": "2kb",
42 |                   "maximumError": "4kb"
43 |                 }
44 |               ],
45 |               "outputHashing": "all"
46 |             },
47 |             "development": {
48 |               "optimization": false,
49 |               "extractLicenses": false,
50 |               "sourceMap": true
51 |             }
52 |           },
53 |           "defaultConfiguration": "production"
54 |         },
55 |         "serve": {
56 |           "builder": "@angular-devkit/build-angular:dev-server",
57 |           "configurations": {
58 |             "production": {
59 |               "buildTarget": "angular17:build:production"
60 |             },
61 |             "development": {
62 |               "buildTarget": "angular17:build:development"
63 |             }
64 |           },
65 |           "defaultConfiguration": "development"
66 |         },
67 |         "extract-i18n": {
68 |           "builder": "@angular-devkit/build-angular:extract-i18n",
69 |           "options": {
70 |             "buildTarget": "angular17:build"
71 |           }
72 |         },
73 |         "test": {
74 |           "builder": "@angular-devkit/build-angular:karma",
75 |           "options": {
76 |             "polyfills": ["zone.js", "zone.js/testing"],
77 |             "tsConfig": "tsconfig.spec.json",
78 |             "inlineStyleLanguage": "scss",
79 |             "assets": ["src/favicon.ico", "src/assets"],
80 |             "styles": ["src/styles.scss"],
81 |             "scripts": []
82 |           }
83 |         }
84 |       }
85 |     }
86 |   },
87 |   "cli": {
88 |     "analytics": "15864f5d-522d-4337-acd5-68a1866316d7"
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------