collect pr from @chloe-lam

angular.json

@@ -44,7 +44,11 @@
               "src/favicon.ico",
               "src/assets",
               "src/manifest.json",
-              { "glob": "**/*.@(jpg|JPG|png|PNG)", "input": "src/Dress", "output": "Dress" }
+              {
+                "glob": "**/*.@(jpg|JPG|png|PNG)",
+                "input": "src/Dress",
+                "output": "Dress"
+              }
             ],
             "styles": [
               {
@@ -156,5 +160,8 @@
       }
     }
   },
-  "defaultProject": "dress"
-}
+  "defaultProject": "dress",
+  "cli": {
+    "analytics": "775cd4fa-883e-4b09-a989-f5bf2715c6d1"
+  }
+}

package.json

@@ -12,32 +12,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.1.0",
-    "@angular/cdk": "^6.2.0",
-    "@angular/common": "^6.1.0",
-    "@angular/compiler": "^6.1.0",
-    "@angular/core": "^6.1.0",
-    "@angular/forms": "^6.1.0",
+    "@angular-devkit/build-angular": "^0.1100.1",
+    "@angular/animations": "^11.0.0",
+    "@angular/cdk": "^11.0.0",
+    "@angular/common": "^11.0.0",
+    "@angular/compiler": "^11.0.0",
+    "@angular/core": "^11.0.0",
+    "@angular/forms": "^11.0.0",
     "@angular/http": "^6.1.0",
-    "@angular/material": "^6.4.3",
-    "@angular/platform-browser": "^6.1.0",
-    "@angular/platform-browser-dynamic": "^6.1.0",
+    "@angular/localize": "^11.0.0",
+    "@angular/material": "^11.0.0",
+    "@angular/platform-browser": "^11.0.0",
+    "@angular/platform-browser-dynamic": "^11.0.0",
     "@angular/pwa": "^0.7.3",
-    "@angular/router": "^6.1.0",
-    "@angular/service-worker": "^6.1.0",
+    "@angular/router": "^11.0.0",
+    "@angular/service-worker": "^11.0.0",
     "core-js": "^2.5.7",
     "exif-js": "^2.3.0",
     "marked": "^0.4.0",
     "material-design-icons": "^3.0.1",
+    "ng-lazyload-image": "^9.1.0",
     "roboto-fontface": "^0.10.0",
-    "rxjs": "^6.0.0",
-    "zone.js": "~0.8.26"
+    "rxjs": "^6.6.3",
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.7.0",
-    "@angular/cli": "^6.1.3",
-    "@angular/compiler-cli": "^6.1.0",
-    "@angular/language-service": "^6.1.0",
+    "@angular/cli": "^11.0.1",
+    "@angular/compiler-cli": "^11.0.0",
+    "@angular/language-service": "^11.0.0",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/marked": "^0.4.0",
@@ -53,6 +55,6 @@
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",
-    "typescript": "^2.9.2"
+    "typescript": "^4.0.5"
   }
 }

src/app/albums/albums.component.html

@@ -11,7 +11,7 @@
 <!--</div>-->
 <div *ngFor="let album of albums" class="item">
   <a class="cover-wrapper" [routerLink]="album.name">
-    <img class="cover" [src]="'Dress/' + album.name + '/' + album.files[0]">
+    <img [defaultImage]="defaultImage" class="cover" [lazyLoad]="'Dress/' + album.name + '/' + album.files[0]">
   </a>
   <a [href]="'https://github.com/' + album.name" target="_blank" class="info">
     <img class="avatar" [src]="'https://avatars.githubusercontent.com/' + album.name + '?size=24'">

src/app/albums/albums.component.ts

@@ -9,6 +9,7 @@ import albums from '../../data/albums.json';
 })
 export class AlbumsComponent {
   albums = albums;
+  defaultImage ="https://via.placeholder.com/196.png?text=dress"
 
   constructor(private http: HttpClient) {}
 }

src/app/app-routing.module.ts

@@ -15,7 +15,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})],
+  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled', relativeLinkResolution: 'legacy' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

src/app/app.component.css

@@ -9,6 +9,7 @@
 .mat-toolbar.mat-primary {
   position: sticky;
   top: 0;
+  z-index: 10000;
 }
 
 mat-sidenav-content {

src/app/app.component.html

@@ -16,7 +16,7 @@
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
-    <mat-toolbar color="primary" *ngIf="showToolbar | async">
+    <mat-toolbar color="primary" *ngIf="showToolbar | async"> 
       <button
         type="button"
         aria-label="Toggle sidenav"

src/app/app.module.ts

@@ -5,16 +5,16 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LayoutModule } from '@angular/cdk/layout';
-import {
-  MatToolbarModule,
-  MatButtonModule,
-  MatSidenavModule,
-  MatIconModule,
-  MatListModule,
-  MatGridListModule,
-  MatCardModule,
-  MatMenuModule
-} from '@angular/material';
+
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatCardModule } from '@angular/material/card';
+import { MatMenuModule } from '@angular/material/menu';
+
 import { PhotosComponent } from './photos/photos.component';
 import { HttpClientModule } from '@angular/common/http';
 import { AlbumsComponent } from './albums/albums.component';
@@ -25,6 +25,8 @@ import { PhotoComponent } from './photo/photo.component';
 import { RouteReuseStrategy } from '@angular/router';
 import { CustomReuseStrategy } from './reuse-strategy';
 
+import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image';
+
 @NgModule({
   declarations: [AppComponent, PhotosComponent, AlbumsComponent, AlbumComponent, PhotoComponent],
   imports: [
@@ -41,9 +43,10 @@ import { CustomReuseStrategy } from './reuse-strategy';
     MatCardModule,
     MatMenuModule,
     HttpClientModule,
-    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    LazyLoadImageModule
   ],
-  providers: [{provide: RouteReuseStrategy, useClass: CustomReuseStrategy}],
+  providers: [{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }

src/app/photos/photos.component.html

@@ -1,10 +1,10 @@
 <div *ngFor="let commit of photos" class="commit">
   <h4>
-    <span class="date">{{commit.date | date:'M月d日'}}</span>
-    <span class="author">{{commit.username}}</span>
-    <span class="message" *ngIf="commit.message">{{commit.message}}</span>
+    <span class="date">{{ commit.date | date: 'M月d日' }}</span>
+    <span class="author">{{ commit.username }}</span>
+    <span class="message" *ngIf="commit.message">{{ commit.message }}</span>
   </h4>
   <a *ngFor="let file of commit.files" [routerLink]="file" (click)="onPhotoClick()">
-    <img [src]="'Dress/' + file">
+    <img  [lazyLoad]="'Dress/' + file" />
   </a>
 </div>

src/app/reuse-strategy.ts

@@ -1,7 +1,9 @@
 // This impl. bases upon one that can be found in the router's test cases.
 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
 import { PhotoComponent } from './photo/photo.component';
+import { Injectable } from "@angular/core";
 
+@Injectable()
 export class CustomReuseStrategy implements RouteReuseStrategy {
   handlers: { [key: string]: DetachedRouteHandle } = {};