Update Angular 10 (#247)

Author: jfcere

.editorconfig

@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.ts]
+quote_type = single
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false

.vscode/settings.json

@@ -1,8 +1,17 @@
 {
+  "auto-close-tag.activationOnLanguage": [
+    "html"
+  ],
+
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   },
 
+  "files.associations": {
+    "*.json": "jsonc",
+    "package.json": "json"
+  },
+
   "files.trimTrailingWhitespace": true,
 
   "[markdown]": {

angular.json

@@ -9,6 +9,9 @@
       "projectType": "application",
       "prefix": "app",
       "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        },
         "@schematics/angular:component": {
           "styleext": "scss"
         }
@@ -56,6 +59,10 @@
               "node_modules/prismjs/components/prism-typescript.min.js",
               "node_modules/emoji-toolkit/lib/js/joypixels.js",
               "node_modules/katex/dist/katex.min.js"
+            ],
+            "allowedCommonJsDependencies": [
+              "gumshoejs",
+              "hammerjs"
             ]
           },
           "configurations": {
@@ -77,13 +84,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
               ]
             }

demo/browserslist

@@ -2,11 +2,17 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
 Firefox ESR
 not dead
 IE 11

demo/src/app/app.component.html

@@ -20,7 +20,7 @@ <h1>ngx-markdown</h1>
     [routerLink]="route.path"
     routerLinkActive>
     <img src="assets/icon-{{route.path}}.svg">
-    <span>{{ route.data.label }}</span>
+    <span>{{ route.data?.label }}</span>
   </a>
 </nav>
 

demo/src/app/app.component.ts

@@ -23,12 +23,12 @@ export class AppComponent implements OnInit {
   tabHeader: ElementRef;
 
   @HostListener('document:click', ['$event'])
-  onDocumentClick(event: Event) {
+  onDocumentClick(event: Event): void {
     this.anchorService.interceptClick(event);
   }
 
   @HostListener('window:scroll')
-  onWindowScroll() {
+  onWindowScroll(): void {
     const tabHeader = this.tabHeader.nativeElement as HTMLElement;
     const tabHeaderOffset = Math.ceil(tabHeader.offsetTop);
     const windowOffset = Math.ceil(window.pageYOffset);
@@ -47,18 +47,18 @@ export class AppComponent implements OnInit {
     private router: Router,
   ) { }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.routes = this.router.config.filter(route => route.data && route.data.label);
     this.setTheme(localStorage.getItem('theme') || 'light');
   }
 
-  handleFragment() {
+  handleFragment(): void {
     this.anchorService.scrollToAnchor();
   }
 
-  setTheme(theme: string) {
+  setTheme(theme: string): void {
     this.theme = theme;
-    const bodyClassList = this.document.querySelector('body').classList;
+    const bodyClassList = this.document.querySelector('body')!.classList;
     const removeClassList = /\w*-theme\b/.exec(bodyClassList.value);
     if (removeClassList) {
       bodyClassList.remove(...removeClassList);
@@ -67,13 +67,13 @@ export class AppComponent implements OnInit {
     localStorage.setItem('theme', this.theme);
   }
 
-  getRouteAnimation(outlet: RouterOutlet) {
+  getRouteAnimation(outlet: RouterOutlet): string {
     return outlet
       && outlet.activatedRouteData
       && outlet.activatedRouteData.label;
   }
 
-  toggleTheme() {
+  toggleTheme(): void {
     this.setTheme(this.theme === 'light' ? 'dark' : 'light');
   }
 }

demo/src/app/app.module.ts

@@ -17,7 +17,7 @@ export function markedOptionsFactory(anchorService: AnchorService): MarkedOption
   const renderer = new MarkedRenderer();
 
   // fix `href` for absolute link with fragments so that _copy-paste_ urls are correct
-  renderer.link = (href, title, text) => {
+  renderer.link = (href: string, title: string, text: string) => {
     return MarkedRenderer.prototype.link.call(renderer, anchorService.normalizeExternalUrl(href), title, text);
   };
 

demo/src/app/bindings/bindings.component.ts

@@ -48,12 +48,12 @@ export class MarkdownDemoComponent {
     private elementRef: ElementRef<HTMLElement>,
   ) { }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.setHeadings();
   }
 
-  private setHeadings() {
-    const headings = [];
+  private setHeadings(): void {
+    const headings: Element[] = [];
     this.elementRef.nativeElement
       .querySelectorAll('h2')
       .forEach(x => headings.push(x));

demo/src/app/cheat-sheet/cheat-sheet.component.ts

@@ -25,12 +25,12 @@ export class CheatSheetComponent implements OnInit {
     private elementRef: ElementRef<HTMLElement>,
   ) { }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.setHeadings();
   }
 
-  private setHeadings() {
-    const headings = [];
+  private setHeadings(): void {
+    const headings: Element[] = [];
     this.elementRef.nativeElement
       .querySelectorAll('h2')
       .forEach(x => headings.push(x));

demo/src/app/get-started/get-started.component.ts

@@ -14,22 +14,22 @@ export class GetStartedComponent {
     private elementRef: ElementRef<HTMLElement>,
   ) { }
 
-  onLoad() {
+  onLoad(): void {
     this.stripContent();
     this.setHeadings();
   }
 
-  private setHeadings() {
-    const headings = [];
+  private setHeadings(): void {
+    const headings: Element[] = [];
     this.elementRef.nativeElement
       .querySelectorAll('h2')
       .forEach(x => headings.push(x));
     this.headings = headings;
   }
 
-  private stripContent() {
+  private stripContent(): void {
     this.elementRef.nativeElement
-      .querySelector('markdown')
+      .querySelector('markdown')!
       .querySelectorAll('markdown > p:nth-child(-n + 2), #ngx-markdown, #table-of-contents + ul, #table-of-contents')
       .forEach(x => x.remove());
   }

demo/src/app/plugins/plugins.component.ts

@@ -25,12 +25,12 @@ $f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi) e^{2 \\pi i \\xi x} d\\xi$`;
     private elementRef: ElementRef<HTMLElement>,
   ) { }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.setHeadings();
   }
 
-  private setHeadings() {
-    const headings = [];
+  private setHeadings(): void {
+    const headings: Element[] = [];
     this.elementRef.nativeElement
       .querySelectorAll('h2')
       .forEach(x => headings.push(x));

demo/src/app/shared/anchor/anchor.service.ts

@@ -29,12 +29,12 @@ export class AnchorService {
    * when `href` is an internal URL not handled by `routerLink` directive.
    * @param event The event to evaluated for link click.
    */
-  interceptClick(event: Event): boolean {
+  interceptClick(event: Event): void {
     const element = event.target;
     if (!(element instanceof HTMLAnchorElement)) {
       return;
     }
-    const href = element.getAttribute('href');
+    const href = element.getAttribute('href') || '';
     if (this.isExternalUrl(href) || this.isRouterLink(element)) {
       return;
     }
@@ -47,7 +47,7 @@ export class AnchorService {
    * @param url Destination path to navigate to.
    * @param replaceUrl If `true`, replaces current state in browser history.
    */
-  navigate(url: string, replaceUrl = false) {
+  navigate(url: string, replaceUrl = false): void {
     const urlTree = this.getUrlTree(url);
     this.router.navigated = false;
     this.router.navigateByUrl(urlTree, { replaceUrl });
@@ -70,7 +70,7 @@ export class AnchorService {
   /**
    * Scroll view to the anchor corresponding to current route fragment.
    */
-  scrollToAnchor() {
+  scrollToAnchor(): void {
     const url = this.router.parseUrl(this.router.url);
     if (url.fragment) {
       this.navigate(this.router.url, true);
@@ -79,7 +79,7 @@ export class AnchorService {
 
   private getUrlTree(url: string): UrlTree {
     const urlPath = this.stripFragment(url) || this.stripFragment(this.router.url);
-    const urlFragment = this.router.parseUrl(url).fragment;
+    const urlFragment = this.router.parseUrl(url).fragment || undefined;
     return this.router.createUrlTree([urlPath], { relativeTo: this.route, fragment: urlFragment });
   }
 
@@ -92,6 +92,6 @@ export class AnchorService {
   }
 
   private stripFragment(url: string): string {
-    return /[^#]*/.exec(url)[0];
+    return /[^#]*/.exec(url)![0];
   }
 }

demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts

@@ -17,11 +17,11 @@ export class ScrollspyNavLayoutComponent {
   showScrollUpButton = false;
 
   @HostListener('window:scroll')
-  onWindowScroll() {
+  onWindowScroll(): void {
     this.showScrollUpButton = Math.ceil(window.pageYOffset) > 64;
   }
 
-  onScrollUp() {
+  onScrollUp(): void {
     window.scrollTo(0, 0);
     location.hash = '';
   }

demo/src/app/shared/scrollspy-nav/scrollspy-nav.component.ts

@@ -20,23 +20,23 @@ export class ScrollspyNavComponent implements OnChanges, OnDestroy {
     private zone: NgZone,
   ) { }
 
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(changes: SimpleChanges): void {
     if (changes.headings && changes.headings.currentValue) {
       this.setScrollSpy();
     }
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.destroyScrollSpy();
   }
 
-  destroyScrollSpy() {
+  destroyScrollSpy(): void {
     if (this.scrollSpy) {
       this.scrollSpy.destroy();
     }
   }
 
-  setScrollSpy() {
+  setScrollSpy(): void {
     if (this.scrollSpy) {
       this.scrollSpy.setup();
       return;

demo/src/app/syntax-highlight/syntax-highlight.component.ts

@@ -16,12 +16,12 @@ export class SyntaxHighlightComponent implements OnInit {
     private elementRef: ElementRef<HTMLElement>,
   ) { }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.setHeadings();
   }
 
-  private setHeadings() {
-    const headings = [];
+  private setHeadings(): void {
+    const headings: Element[] = [];
     this.elementRef.nativeElement
       .querySelectorAll('h2')
       .forEach(x => headings.push(x));

demo/src/global.d.ts

@@ -0,0 +1,9 @@
+declare module 'gumshoejs' {
+  namespace Gumshoe {}
+  class Gumshoe {
+    constructor(selector: string, options: any);
+    destroy(): void;
+    setup(): void;
+  }
+  export = Gumshoe;
+}

demo/src/polyfills.ts

@@ -35,7 +35,7 @@ import 'web-animations-js';  // Run `npm install --save web-animations-js`.
  * 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';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *

demo/src/scss/material-theme.scss

@@ -36,7 +36,7 @@
   code:not([class*="language-"]) {
     background: mat-color($foreground, secondary-text, 0.07);
     border-radius: 3px;
-    font-size: 1em;
+    font-size: 0.94em;
     padding: 0px 6px 2px;
   }
 

demo/tsconfig.app.json

@@ -1,10 +1,11 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
+    "strictPropertyInitialization": false,
     "types": [
       "node"
-    ]
+    ],
   },
   "files": [
     "src/main.ts",