- first code with simple leaflet map

src/app/app.component.html

@@ -0,0 +1,8 @@
+
+
+  <app-map></app-map>
+  <!-- <span>{{ name }} app is running!</span> -->
+
+
+
+

src/app/app.component.ts

@@ -0,0 +1,22 @@
+import { Component, VERSION } from "@angular/core";
+import '../styles.css';
+import '../../node_modules/leaflet/dist/leaflet.css';
+
+@Component({
+  selector: "app-component", 
+  templateUrl: "./app.component.html",
+    styleUrls: ["./app.component.css"]
+  // template: `
+  //   <div>
+  //     <h1>{{name}}</h1>
+  //     <div>The number: {{x}}</div>
+  //   </div>
+  // `,
+  // styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  constructor() {}
+
+  private name = 'Angular test ' + VERSION.major;
+  x: number = 123;
+}

src/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from './app.component';
+import { MapComponent } from './map/map.component';
+
+@NgModule({
+    // declarations: The components, directives, and pipes that belong to this NgModule.
+    declarations: [AppComponent, MapComponent],
+    // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
+    imports: [BrowserModule],
+    providers: [],
+    // bootstrap: The main application view, called the root component, which hosts all other application views. 
+    // Only the root NgModule should set the bootstrap property.
+    bootstrap: [AppComponent],
+  })
+  export class AppModule {
+    constructor() {}
+  }
+  
+  // https://medium.com/@hubert.zub/using-babel-7-and-preset-typescript-to-compile-angular-6-app-448eb1880f2c

src/app/map/map.component.css

@@ -0,0 +1,17 @@
+.map-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 30px;
+  }
+  
+  .map-frame {
+    border: 2px solid black;
+    height: 100%;
+  }
+  
+  #map {
+    height: 100%;
+  }

src/app/map/map.component.html

@@ -0,0 +1,6 @@
+<div class="map-container">
+    <div class="map-frame">
+        <div id="map">
+        </div>
+    </div>
+</div>

src/app/map/map.component.ts

@@ -0,0 +1,33 @@
+import { Component, AfterViewInit } from '@angular/core';
+import * as L from 'leaflet';
+
+@Component({
+	selector: 'app-map',
+	templateUrl: './map.component.html',
+	styleUrls: ['./map.component.css']
+})
+export class MapComponent implements AfterViewInit {
+
+	private map;
+
+	constructor() { }
+
+	private initMap(): void {
+		this.map = L.map('map', {
+			center: [ 48.208174, 16.373819],
+			zoom: 3
+		});
+		const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			maxZoom: 18,
+			minZoom: 3,
+			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+		});
+
+		tiles.addTo(this.map);
+	}
+
+	ngAfterViewInit(): void {
+		this.initMap();
+	}
+
+}

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` 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/plugins/zone-error';  // Included with Angular CLI.

src/main.ts

@@ -0,0 +1,37 @@
+// import 'zone.js';
+import './polyfills';
+
+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();
+}
+
+// import { Component } from "@angular/core";
+// @Component({
+//   selector: "app-component",
+//   template: "<div>AppComponent works!</div>",
+// })
+// export class AppComponent {
+//   constructor() {}
+// }
+
+// import { NgModule } from "@angular/core";
+// import { BrowserModule } from "@angular/platform-browser";
+// @NgModule({
+//   declarations: [AppComponent],
+//   imports: [BrowserModule],
+//   bootstrap: [AppComponent],
+// })
+// export class AppModule {
+//   constructor() {}
+// }
+
+// platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/polyfills.ts

@@ -0,0 +1,65 @@
+/**
+ * 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
+ */
+
+/**
+ * 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';
+ *
+ * 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';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

src/styles.css

@@ -0,0 +1,3 @@
+/* You can add global styles to this file, and also import other style files */
+/* @import '../node_modules/leaflet/dist/leaflet.css'; */
+

src/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": [
+      "es2015",
+      "dom"
+    ]
+  }
+}