basic components

angular.json

@@ -34,6 +34,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -102,6 +103,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []

package-lock.json

@@ -9,13 +9,17 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "~12.2.0",
+        "@angular/cdk": "^12.2.9",
         "@angular/common": "~12.2.0",
         "@angular/compiler": "~12.2.0",
         "@angular/core": "~12.2.0",
         "@angular/forms": "~12.2.0",
+        "@angular/material": "^12.2.9",
         "@angular/platform-browser": "~12.2.0",
         "@angular/platform-browser-dynamic": "~12.2.0",
         "@angular/router": "~12.2.0",
+        "@asymmetrik/ngx-leaflet": "^8.1.0",
+        "leaflet": "^1.7.1",
         "rxjs": "~6.6.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -25,6 +29,7 @@
         "@angular/cli": "~12.2.9",
         "@angular/compiler-cli": "~12.2.0",
         "@types/jasmine": "~3.8.0",
+        "@types/leaflet": "^1.7.5",
         "@types/node": "^12.11.1",
         "jasmine-core": "~3.8.0",
         "karma": "~6.3.0",
@@ -289,6 +294,28 @@
         "@angular/core": "12.2.9"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "12.2.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.9.tgz",
+      "integrity": "sha512-9Wgj69iGAZ4teQqW/zPbVg2RGna+m9i3v0zkWGx/+Uo95rikJCUZBQM4bfeOe+bSJrS77jV5EisBWG7ayNUSzQ==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^12.0.0 || ^13.0.0-0",
+        "@angular/core": "^12.0.0 || ^13.0.0-0",
+        "rxjs": "^6.5.3 || ^7.0.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "12.2.9",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.9.tgz",
@@ -427,6 +454,22 @@
         "rxjs": "^6.5.3 || ^7.0.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "12.2.9",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.9.tgz",
+      "integrity": "sha512-+eM67RF038S56m3wsj37h0PyyRD18cQ8V2zmKG1UezH0nnosbmCAwzH9BfcNiIB+/V+k5QMJ/JVu5MjDQqX37w==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^12.0.0 || ^13.0.0-0",
+        "@angular/cdk": "12.2.9",
+        "@angular/common": "^12.0.0 || ^13.0.0-0",
+        "@angular/core": "^12.0.0 || ^13.0.0-0",
+        "@angular/forms": "^12.0.0 || ^13.0.0-0",
+        "rxjs": "^6.5.3 || ^7.0.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "12.2.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.9.tgz",
@@ -488,6 +531,17 @@
       "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==",
       "dev": true
     },
+    "node_modules/@asymmetrik/ngx-leaflet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-8.1.0.tgz",
+      "integrity": "sha512-lq7LduBP/vXcaSEmKnx7mzCR8WsoYqh9pB6BNnq53yeCwsqRbG3GdKye1/i8VvoRzjDsmQBPQsIFZ9uclXrtgg==",
+      "peerDependencies": {
+        "@angular/common": ">=10",
+        "@angular/core": ">=10",
+        "leaflet": "1",
+        "tslib": "2"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.15.8",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz",
@@ -2486,6 +2540,12 @@
       "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true
+    },
     "node_modules/@types/glob": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
@@ -2508,6 +2568,15 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.5.tgz",
+      "integrity": "sha512-+Myo00Yb5OuvUyrH+vUwn9DRgOaBJsF/etIMdMcNhWGBMo58Mo1cxLInvCd0ZpvItju/AeDYFB/Od2pLiHB3VA==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -8326,6 +8395,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+    },
     "node_modules/less": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",
@@ -16055,6 +16129,23 @@
         "tslib": "^2.2.0"
       }
     },
+    "@angular/cdk": {
+      "version": "12.2.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.9.tgz",
+      "integrity": "sha512-9Wgj69iGAZ4teQqW/zPbVg2RGna+m9i3v0zkWGx/+Uo95rikJCUZBQM4bfeOe+bSJrS77jV5EisBWG7ayNUSzQ==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.2.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "12.2.9",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.9.tgz",
@@ -16144,6 +16235,14 @@
         "tslib": "^2.2.0"
       }
     },
+    "@angular/material": {
+      "version": "12.2.9",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.9.tgz",
+      "integrity": "sha512-+eM67RF038S56m3wsj37h0PyyRD18cQ8V2zmKG1UezH0nnosbmCAwzH9BfcNiIB+/V+k5QMJ/JVu5MjDQqX37w==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "12.2.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.9.tgz",
@@ -16174,6 +16273,12 @@
       "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==",
       "dev": true
     },
+    "@asymmetrik/ngx-leaflet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-8.1.0.tgz",
+      "integrity": "sha512-lq7LduBP/vXcaSEmKnx7mzCR8WsoYqh9pB6BNnq53yeCwsqRbG3GdKye1/i8VvoRzjDsmQBPQsIFZ9uclXrtgg==",
+      "requires": {}
+    },
     "@babel/code-frame": {
       "version": "7.15.8",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz",
@@ -17625,6 +17730,12 @@
       "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
       "dev": true
     },
+    "@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true
+    },
     "@types/glob": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
@@ -17647,6 +17758,15 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "@types/leaflet": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.5.tgz",
+      "integrity": "sha512-+Myo00Yb5OuvUyrH+vUwn9DRgOaBJsF/etIMdMcNhWGBMo58Mo1cxLInvCd0ZpvItju/AeDYFB/Od2pLiHB3VA==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -22188,6 +22308,11 @@
       "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
       "dev": true
     },
+    "leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+    },
     "less": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",

package.json

@@ -11,13 +11,17 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~12.2.0",
+    "@angular/cdk": "^12.2.9",
     "@angular/common": "~12.2.0",
     "@angular/compiler": "~12.2.0",
     "@angular/core": "~12.2.0",
     "@angular/forms": "~12.2.0",
+    "@angular/material": "^12.2.9",
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
+    "@asymmetrik/ngx-leaflet": "^8.1.0",
+    "leaflet": "^1.7.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -27,6 +31,7 @@
     "@angular/cli": "~12.2.9",
     "@angular/compiler-cli": "~12.2.0",
     "@types/jasmine": "~3.8.0",
+    "@types/leaflet": "^1.7.5",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.8.0",
     "karma": "~6.3.0",

src/app/app.component.html

+<div class="wrapper">
+    <h1>Consumer</h1> 
+</div>
+
+
+<app-map class="wrapper"></app-map>
+
 <router-outlet></router-outlet>

src/app/app.component.scss

+@import './src/variables.scss';
+
+.wrapper { 
+    padding: 0 calc((100% - #{$break-large})/2);
+}
\ No newline at end of file

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppRoutingModule } from './app-routing.module';
+// --- Map
+import { LeafletModule } from '@asymmetrik/ngx-leaflet';
+
+// --- WS
+// import * as SockJS from 'sockjs-client';
+
+// --- Modules
+import { SharedModule } from './shared/shared.module';
+import { CoreModule } from './core/core.module';
+
+// --- Services
+import { ApiService } from "./core/api.service";
+// import { StompService, StompConfig } from '@stomp/ng2-stompjs';
+import { environment } from './../environments/environment';
+
+// --- Components
 import { AppComponent } from './app.component';
+import { MapComponent } from './components/map/map.component';
+import { AppRoutingModule } from './app-routing.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MapComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    SharedModule,
+    CoreModule,
+    LeafletModule,
+    BrowserAnimationsModule
   ],
-  providers: [],
+  providers: [ApiService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/map/map.component.html

+<div style="height: 80vh;" 
+    leaflet 
+    [leafletOptions]="options"
+    (leafletMapReady)="onMapReady($event)">
+</div> 
\ No newline at end of file

src/app/components/map/map.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapComponent } from './map.component';
+
+describe('MapComponent', () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MapComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/map/map.component.ts

+import { NONE_TYPE } from '@angular/compiler';
+import { Component, OnInit } from '@angular/core';
+import * as L from "leaflet";
+
+class Location {
+  id: string;
+  type = 'position';
+  lat: Float32Array;
+  lng: Float32Array;
+
+  constructor(obj: any, id: any) {
+    this.id = id
+    this.lat = obj.lat
+    this.lng = obj.lng
+  }
+}
+
+class Measurements {
+  id: string
+  type = 'measurements'
+  data: number[];
+
+  constructor(dist: any, id: any) {
+    this.id = id
+    this.data = dist
+  }
+}
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements OnInit {
+
+  _stompService: any; 
+  map: L.Map;
+
+  constructor() {
+    this.map = L.map('map', {
+        center: [51.505, -0.09],
+        zoom: 13
+    });
+  }
+
+  ngOnInit(): void { 
+    // wait on new Location
+    this._stompService.watch('/topic/locations').subscribe((message: any) => {
+      let payload = JSON.parse(message.body);
+      this.addNewMarker(payload)
+    });
+
+    // wait on new measurements
+    this._stompService.watch('/topic/positions').subscribe((message: any) => {
+      let payload = JSON.parse(message.body);
+      console.log('positions', payload)
+      this.addPosition(payload)
+    });
+  }
+
+  addPosition(point: any) {
+    let marker = L.marker(point.position, {
+      icon: L.icon({
+        iconSize: [25, 41],
+        iconAnchor: [13, 41],
+        iconUrl: 'assets/marker-icon-red.png',
+        iconRetinaUrl: 'assets/marker-icon-2x-red.png',
+        shadowUrl: 'assets/marker-shadow.png'
+      })
+    }).bindPopup(point.id).openPopup();
+    marker.addTo(this.map);
+  }
+
+  // --- Controllers
+
+  // @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
+  // --- Layers: Define base layers so we can reference them multiple times
+  streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    detectRetina: true,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  });
+  wMaps = L.tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
+    detectRetina: true,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  });
+
+  satelliteMaps = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+    id: 'mapbox.streets',
+    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+  });
+  
+  options = {
+    layers: [this.streetMaps],
+    zoom: 15,
+    center: L.latLng([51.037845, 13.762852])
+  };
+
+  onMapReady(map: L.Map) {
+    this.map = map
+
+    // Layers control object with our two base layers and the three overlay layers
+    let baseLayers = {
+      'Street Maps': this.streetMaps,
+      'Wikimedia Maps': this.wMaps,
+      'Satellite': this.satelliteMaps
+    }
+    L.control.layers(baseLayers).addTo(this.map);
+  }  
+  
+  addNewMarker(obj: any) {
+    let marker = L.marker([obj.lat, obj.lng], {
+      icon: L.icon({
+        iconSize: [25, 41],
+        iconAnchor: [13, 41],
+        iconUrl: 'assets/marker-icon-grey.png',
+        iconRetinaUrl: 'assets/marker-icon-2x-grey.png',
+        shadowUrl: 'assets/marker-shadow.png'
+      })
+    }).bindPopup(obj.id).openPopup();
+    marker.addTo(this.map);
+  }
+}

src/app/core/api.service.spec.ts

+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {TestBed} from '@angular/core/testing';
+
+import {ApiService} from './api.service';
+
+describe('ApiService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [ApiService]
+    });
+  });
+
+  afterEach(() => {
+    const httpMock = TestBed.get(HttpTestingController);
+    httpMock.verify();
+  });
+
+  it('should be created', () => {
+    const service: ApiService = TestBed.get(ApiService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/api.service.ts

+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable, throwError} from 'rxjs';
+import {catchError} from 'rxjs/operators';
+
+export interface ApiError {
+  code: string;
+  message: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+
+  private locationsUrl: string;
+
+  constructor(private httpClient: HttpClient) {
+    this.locationsUrl = 'http://localhost:8080/locations';
+  }
+
+  getXml(url: string): Observable<string> {
+    return this.httpClient
+      .get(url, {responseType: 'text'})
+      .pipe(catchError(this._handleError));
+  }
+
+
+  public findAll(): Observable<string[]> {
+    return this.httpClient.get<string[]>(this.locationsUrl);
+  }
+
+  public save(loc: string) {
+    return this.httpClient.post<string>(this.locationsUrl, loc);
+  }
+
+  private _handleError(error: ApiError) {
+    return throwError(error.message || 'Could not complete your request; please try again later.');
+  }
+
+}

src/app/core/core.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class CoreModule { }

src/app/shared/shared.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// --- @angular/flex-layout : Layout for Angular applications; using Flexbox and a Responsive API
+// import { FlexLayoutModule } from '@angular/flex-layout';
+
+// --- Forms
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+// --- material.angular.io : Material Design components for Angular
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCardModule } from '@angular/material/card';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTooltipModule } from '@angular/material/tooltip';
+// Animation
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    FormsModule, 
+    ReactiveFormsModule,
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatTabsModule,
+    MatToolbarModule,
+    BrowserAnimationsModule,
+    MatFormFieldModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatSelectModule,
+    MatCardModule,
+    MatExpansionModule,
+    MatSidenavModule,
+    MatTooltipModule
+  ],
+  exports: [
+    FormsModule, 
+    ReactiveFormsModule,
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatTabsModule,
+    MatToolbarModule,
+    BrowserAnimationsModule,
+    MatFormFieldModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatSelectModule,
+    MatCardModule,
+    MatExpansionModule,
+    MatSidenavModule,
+    MatTooltipModule
+  ]
+})
+export class SharedModule { }

src/index.html

@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -15,3 +15,6 @@ app-root {
     flex-wrap: nowrap;
     min-height: 100vh;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }