@@ -331,7 +330,8 @@
- + + Rocket Ship @@ -343,7 +343,8 @@ {{ title }} app is running! - + + Rocket Ship Smoke @@ -356,24 +357,30 @@

Resources

- Learn Angular - - CLI Documentation + + + + + Angular Material - Angular Blog + + + + + Angular DevTools @@ -386,121 +393,61 @@

Next Steps

-
- - +
- -
- + +
+ -
+ +
+ -
+
+ -
+
+
ng generate component xyz
ng add @angular/material
+
ng add @angular/pwa
ng add _____
ng test
-
ng build --prod
+
ng build
@@ -519,7 +466,8 @@

Next Steps

- + + Gray Clouds Background @@ -533,6 +481,4 @@

Next Steps

- - - \ No newline at end of file + diff --git a/angular/src/app/app.component.spec.ts b/angular/src/app/app.component.spec.ts index 8622a63..aa24fb3 100644 --- a/angular/src/app/app.component.spec.ts +++ b/angular/src/app/app.component.spec.ts @@ -1,35 +1,29 @@ -import { TestBed, async } from '@angular/core/testing'; +import { TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], - }).compileComponents(); + beforeEach(() => TestBed.configureTestingModule({ + imports: [RouterTestingModule], + declarations: [AppComponent] })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; + const app = fixture.componentInstance; expect(app).toBeTruthy(); }); it(`should have as title 'angular'`, () => { const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; + const app = fixture.componentInstance; expect(app.title).toEqual('angular'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('angular app is running!'); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('angular app is running!'); }); }); diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index 2c3ba29..b1c6c96 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -1,5 +1,5 @@ -import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; diff --git a/angular/src/environments/environment.prod.ts b/angular/src/environments/environment.prod.ts deleted file mode 100644 index 3612073..0000000 --- a/angular/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true -}; diff --git a/angular/src/environments/environment.ts b/angular/src/environments/environment.ts deleted file mode 100644 index 7b4f817..0000000 --- a/angular/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/angular/src/favicon.ico b/angular/src/favicon.ico index 523925f..997406a 100644 Binary files a/angular/src/favicon.ico and b/angular/src/favicon.ico differ diff --git a/angular/src/main.ts b/angular/src/main.ts index c7b673c..c58dc05 100644 --- a/angular/src/main.ts +++ b/angular/src/main.ts @@ -1,12 +1,7 @@ -import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; -if (environment.production) { - enableProdMode(); -} platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); diff --git a/angular/src/polyfills.ts b/angular/src/polyfills.ts deleted file mode 100644 index aa665d6..0000000 --- a/angular/src/polyfills.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags.ts'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/angular/src/test.ts b/angular/src/test.ts deleted file mode 100644 index 1631789..0000000 --- a/angular/src/test.ts +++ /dev/null @@ -1,20 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: any; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/angular/tsconfig.app.json b/angular/tsconfig.app.json index df4d05e..374cc9d 100644 --- a/angular/tsconfig.app.json +++ b/angular/tsconfig.app.json @@ -1,3 +1,4 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { @@ -5,14 +6,9 @@ "types": [] }, "files": [ - "src/main.ts", - "src/polyfills.ts" + "src/main.ts" ], "include": [ "src/**/*.d.ts" - ], - "exclude": [ - "src/test.ts", - "src/**/*.spec.ts" ] } diff --git a/angular/tsconfig.json b/angular/tsconfig.json index 30956ae..ed966d4 100644 --- a/angular/tsconfig.json +++ b/angular/tsconfig.json @@ -1,26 +1,33 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, - "module": "esnext", "moduleResolution": "node", "importHelpers": true, - "target": "es2015", - "typeRoots": [ - "node_modules/@types" - ], + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, "lib": [ - "es2018", + "ES2022", "dom" ] }, "angularCompilerOptions": { - "fullTemplateTypeCheck": true, - "strictInjectionParameters": true + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true } } diff --git a/angular/tsconfig.spec.json b/angular/tsconfig.spec.json index 6400fde..be7e9da 100644 --- a/angular/tsconfig.spec.json +++ b/angular/tsconfig.spec.json @@ -1,16 +1,12 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", "types": [ - "jasmine", - "node" + "jasmine" ] }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], "include": [ "src/**/*.spec.ts", "src/**/*.d.ts" diff --git a/angular/tslint.json b/angular/tslint.json deleted file mode 100644 index c8d70f1..0000000 --- a/angular/tslint.json +++ /dev/null @@ -1,91 +0,0 @@ -{ - "extends": "tslint:recommended", - "rules": { - "array-type": false, - "arrow-parens": false, - "deprecation": { - "severity": "warning" - }, - "component-class-suffix": true, - "contextual-lifecycle": true, - "directive-class-suffix": true, - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ], - "import-blacklist": [ - true, - "rxjs/Rx" - ], - "interface-name": false, - "max-classes-per-file": false, - "max-line-length": [ - true, - 140 - ], - "member-access": false, - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-consecutive-blank-lines": false, - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-empty": false, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-non-null-assertion": true, - "no-redundant-jsdoc": true, - "no-switch-case-fall-through": true, - "no-var-requires": false, - "object-literal-key-quotes": [ - true, - "as-needed" - ], - "object-literal-sort-keys": false, - "ordered-imports": false, - "quotemark": [ - true, - "single" - ], - "trailing-comma": false, - "no-conflicting-lifecycle": true, - "no-host-metadata-property": true, - "no-input-rename": true, - "no-inputs-metadata-property": true, - "no-output-native": true, - "no-output-on-prefix": true, - "no-output-rename": true, - "no-outputs-metadata-property": true, - "template-banana-in-box": true, - "template-no-negated-async": true, - "use-lifecycle-interface": true, - "use-pipe-transform-interface": true - }, - "rulesDirectory": [ - "codelyzer" - ] -} \ No newline at end of file