- first code with simple leaflet map
This commit is contained in:
Arno Kaimbacher
parent
e9138a4c08
commit
2f048c1c0f
25 changed files with 19565 additions and 2 deletions
11
.babelrc
Normal file
11
.babelrc
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
"@babel/preset-env",
|
||||||
|
"@babel/preset-typescript"
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
["@babel/plugin-proposal-decorators", { "legacy": true }],
|
||||||
|
["@babel/plugin-proposal-class-properties", { "loose": true }],
|
||||||
|
["@babel/plugin-proposal-private-methods", { "loose": true }]
|
||||||
|
]
|
||||||
|
}
|
||||||
4
.env.example
Normal file
4
.env.example
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
#NODE_ENV=production
|
||||||
|
NODE_ENV=development
|
||||||
|
|
||||||
|
CONSTANT_VALUE=1234567
|
||||||
40
.gitignore
vendored
40
.gitignore
vendored
|
|
@ -1,4 +1,28 @@
|
||||||
# ---> VisualStudioCode
|
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# compiled output
|
||||||
|
/dist
|
||||||
|
/tmp
|
||||||
|
/out-tsc
|
||||||
|
# Only exists if Bazel was run
|
||||||
|
/bazel-out
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# profiling files
|
||||||
|
chrome-profiler-events*.json
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
/.idea
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
.c9/
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
*.sublime-workspace
|
||||||
|
|
||||||
|
# IDE - VSCode
|
||||||
.vscode/*
|
.vscode/*
|
||||||
!.vscode/settings.json
|
!.vscode/settings.json
|
||||||
!.vscode/tasks.json
|
!.vscode/tasks.json
|
||||||
|
|
@ -9,3 +33,17 @@
|
||||||
# Local History for Visual Studio Code
|
# Local History for Visual Studio Code
|
||||||
.history/
|
.history/
|
||||||
|
|
||||||
|
# misc
|
||||||
|
/.sass-cache
|
||||||
|
/connect.lock
|
||||||
|
/coverage
|
||||||
|
/libpeerconnection.log
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
testem.log
|
||||||
|
/typings
|
||||||
|
|
||||||
|
# System Files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
/.env
|
||||||
15
.vscode/launch.json
vendored
Normal file
15
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "pwa-chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Chrome against localhost",
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"webRoot": "${workspaceFolder}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
||||||
MIT License
|
MIT License
|
||||||
|
|
||||||
Copyright (c) <year> <copyright holders>
|
Copyright (c) 2021 Geological Survey of Austria
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
|
|
||||||
127
angular.json
Normal file
127
angular.json
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"angular-leaflet-example": {
|
||||||
|
"projectType": "application",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:class": {
|
||||||
|
"skipTests": true
|
||||||
|
},
|
||||||
|
"@schematics/angular:component": {
|
||||||
|
"skipTests": true
|
||||||
|
},
|
||||||
|
"@schematics/angular:directive": {
|
||||||
|
"skipTests": true
|
||||||
|
},
|
||||||
|
"@schematics/angular:guard": {
|
||||||
|
"skipTests": true
|
||||||
|
},
|
||||||
|
"@schematics/angular:interceptor": {
|
||||||
|
"skipTests": true
|
||||||
|
},
|
||||||
|
"@schematics/angular:pipe": {
|
||||||
|
"skipTests": true
|
||||||
|
},
|
||||||
|
"@schematics/angular:service": {
|
||||||
|
"skipTests": true
|
||||||
|
},
|
||||||
|
"@schematics/angular:application": {
|
||||||
|
"strict": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"prefix": "app",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "dist/geomon.viewer",
|
||||||
|
"index": "src/index.html",
|
||||||
|
"main": "src/main.ts",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "tsconfig.app.json",
|
||||||
|
"assets": [
|
||||||
|
"src/favicon.ico",
|
||||||
|
"src/assets"
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"src/styles.css"
|
||||||
|
],
|
||||||
|
"scripts": []
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"budgets": [
|
||||||
|
{
|
||||||
|
"type": "initial",
|
||||||
|
"maximumWarning": "500kb",
|
||||||
|
"maximumError": "1mb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "anyComponentStyle",
|
||||||
|
"maximumWarning": "2kb",
|
||||||
|
"maximumError": "4kb"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"fileReplacements": [
|
||||||
|
{
|
||||||
|
"replace": "src/environments/environment.ts",
|
||||||
|
"with": "src/environments/environment.prod.ts"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"outputHashing": "all"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildOptimizer": false,
|
||||||
|
"optimization": false,
|
||||||
|
"vendorChunk": true,
|
||||||
|
"extractLicenses": false,
|
||||||
|
"sourceMap": true,
|
||||||
|
"namedChunks": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"browserTarget": "angular-leaflet-example:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"browserTarget": "angular-leaflet-example:build:development"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "angular-leaflet-example:build"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "src/test.ts",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "tsconfig.spec.json",
|
||||||
|
"karmaConfig": "karma.conf.js",
|
||||||
|
"assets": [
|
||||||
|
"src/favicon.ico",
|
||||||
|
"src/assets"
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"src/styles.css"
|
||||||
|
],
|
||||||
|
"scripts": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultProject": "angular-leaflet-example"
|
||||||
|
}
|
||||||
36
index.html
Normal file
36
index.html
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>A Basic HTML5 Template</title>
|
||||||
|
<meta name="description" content="A simple HTML5 Template for new projects.">
|
||||||
|
<meta name="author" content="Arno Kaimbacher">
|
||||||
|
|
||||||
|
<meta property="og:title" content="GeoMon Viewer">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://geomon.geologie.ac.at/52n-sos-webapp/">
|
||||||
|
<meta property="og:description" content="A simple HTML5 Template for new projects.">
|
||||||
|
<meta property="og:image" content="image.png">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <link rel="icon" href="/favicon.ico"> -->
|
||||||
|
<!-- <link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
|
||||||
|
|
||||||
|
<!-- <link rel="stylesheet" href="./node_modules/leaflet//dist/leaflet.css"> -->
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- your content here... -->
|
||||||
|
<app-component></app-component>
|
||||||
|
|
||||||
|
<!-- <script src="dist/polyfills.js" defer></script> -->
|
||||||
|
<script src="dist/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
47
notes.txt
Normal file
47
notes.txt
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
npm init
|
||||||
|
|
||||||
|
|
||||||
|
npm install --save-dev webpack
|
||||||
|
npm install --save-dev webpack-cli
|
||||||
|
|
||||||
|
npm install --save-dev babel-loader
|
||||||
|
npm install --save-dev @babel/preset-env
|
||||||
|
npm install --save-dev @babel/preset-typescript
|
||||||
|
npm install --save-dev @babel/plugin-proposal-class-properties
|
||||||
|
npm install --save-dev @babel/plugin-proposal-decorators
|
||||||
|
|
||||||
|
|
||||||
|
npm install --save @angular/core @angular/platform-browser-dynamic @angular/platform-browser
|
||||||
|
|
||||||
|
npm install --save leaflet@latest
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
siehe https://medium.com/@sahayatanakul2867/configuration-of-webpack4-and-angular-8-using-two-approaches-2bbc4b1cacda
|
||||||
|
npm install --save-dev html-loader style-loader angular2-template-loader css-loader to-string-loader
|
||||||
|
npm install --save-dev raw-loader
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
test map:
|
||||||
|
npm install --save-dev @angular/cli
|
||||||
|
npx @angular/cli new angular-leaflet-example --style=css --routing=false --skip-tests
|
||||||
|
|
||||||
|
npx @angular/cli generate component map --skip-tests
|
||||||
|
D:\Software\geomon.viewer>npx @angular/cli generate component map --skip-tests
|
||||||
|
CREATE src/app/map/map.component.html (18 bytes)
|
||||||
|
CREATE src/app/map/map.component.ts (263 bytes)
|
||||||
|
CREATE src/app/map/map.component.css (0 bytes)
|
||||||
|
UPDATE src/app/app.module.ts (894 bytes)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
========================================= ExtractTextPlugin ==================================================
|
||||||
|
|
||||||
|
npm install --save-dev mini-css-extract-plugin
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
npm install terser-webpack-plugin --save-dev
|
||||||
18796
package-lock.json
generated
Normal file
18796
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
45
package.json
Normal file
45
package.json
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
{
|
||||||
|
"name": "geomon.viewer",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "viewer for SOS servives of the Geological Survey of Austria",
|
||||||
|
"main": "index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"prod": "rm -rf dist && webpack --progress --mode=production",
|
||||||
|
"dev": "webpack serve --mode development --content-base=./ --hot --progress --port 8080"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"geomonitoring",
|
||||||
|
"sensor",
|
||||||
|
"observation",
|
||||||
|
"service",
|
||||||
|
"viewer"
|
||||||
|
],
|
||||||
|
"author": "Arno Kaimbacher",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular/cli": "^12.1.4",
|
||||||
|
"@babel/plugin-proposal-class-properties": "^7.14.5",
|
||||||
|
"@babel/plugin-proposal-decorators": "^7.14.5",
|
||||||
|
"@babel/preset-env": "^7.14.8",
|
||||||
|
"@babel/preset-typescript": "^7.14.5",
|
||||||
|
"angular2-template-loader": "^0.6.2",
|
||||||
|
"babel-loader": "^8.2.2",
|
||||||
|
"css-loader": "^6.2.0",
|
||||||
|
"dotenv": "^10.0.0",
|
||||||
|
"html-loader": "^2.1.2",
|
||||||
|
"mini-css-extract-plugin": "^2.1.0",
|
||||||
|
"raw-loader": "^4.0.2",
|
||||||
|
"style-loader": "^3.2.1",
|
||||||
|
"terser-webpack-plugin": "^5.1.4",
|
||||||
|
"webpack": "^5.47.0",
|
||||||
|
"webpack-cli": "^4.7.2",
|
||||||
|
"webpack-dev-server": "^3.11.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/core": "^12.1.4",
|
||||||
|
"@angular/platform-browser": "^12.1.4",
|
||||||
|
"@angular/platform-browser-dynamic": "^12.1.4",
|
||||||
|
"leaflet": "^1.7.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
src/app/app.component.css
Normal file
0
src/app/app.component.css
Normal file
8
src/app/app.component.html
Normal file
8
src/app/app.component.html
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
|
||||||
|
<app-map></app-map>
|
||||||
|
<!-- <span>{{ name }} app is running!</span> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
22
src/app/app.component.ts
Normal file
22
src/app/app.component.ts
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
21
src/app/app.module.ts
Normal file
21
src/app/app.module.ts
Normal file
|
|
@ -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
|
||||||
17
src/app/map/map.component.css
Normal file
17
src/app/map/map.component.css
Normal file
|
|
@ -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%;
|
||||||
|
}
|
||||||
6
src/app/map/map.component.html
Normal file
6
src/app/map/map.component.html
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<div class="map-container">
|
||||||
|
<div class="map-frame">
|
||||||
|
<div id="map">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
33
src/app/map/map.component.ts
Normal file
33
src/app/map/map.component.ts
Normal file
|
|
@ -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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||||
|
});
|
||||||
|
|
||||||
|
tiles.addTo(this.map);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.initMap();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/assets/.gitkeep
Normal file
0
src/assets/.gitkeep
Normal file
3
src/environments/environment.prod.ts
Normal file
3
src/environments/environment.prod.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export const environment = {
|
||||||
|
production: true
|
||||||
|
};
|
||||||
16
src/environments/environment.ts
Normal file
16
src/environments/environment.ts
Normal file
|
|
@ -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.
|
||||||
37
src/main.ts
Normal file
37
src/main.ts
Normal file
|
|
@ -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));
|
||||||
65
src/polyfills.ts
Normal file
65
src/polyfills.ts
Normal file
|
|
@ -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
|
||||||
|
*/
|
||||||
3
src/styles.css
Normal file
3
src/styles.css
Normal file
|
|
@ -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'; */
|
||||||
|
|
||||||
19
src/tsconfig.json
Normal file
19
src/tsconfig.json
Normal file
|
|
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
194
webpack.config.js
Normal file
194
webpack.config.js
Normal file
|
|
@ -0,0 +1,194 @@
|
||||||
|
require('dotenv').config();
|
||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack'); //e.g. for iusing DefinePlugin
|
||||||
|
// var helpers = require('./helpers');
|
||||||
|
const TerserPlugin = require('terser-webpack-plugin');
|
||||||
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* flag Used to check if the environment is production or not
|
||||||
|
*/
|
||||||
|
const isProduction = false; //(process.env.NODE_ENV === 'production');
|
||||||
|
const devMode = (process.env.NODE_ENV !== 'production');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Include hash to filenames for cache busting - only at production
|
||||||
|
*/
|
||||||
|
const fileNamePrefix = isProduction ? '[chunkhash].' : '';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// mode: process.env.NODE_ENV,
|
||||||
|
context: __dirname,
|
||||||
|
// entry: './src/main.ts',
|
||||||
|
entry: {
|
||||||
|
// vendor: './src/vendor.ts',
|
||||||
|
polyfills: './src/polyfills.ts',
|
||||||
|
main: './src/main.ts',
|
||||||
|
// styles: "./src/app/styles.css"
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: '[name].' + fileNamePrefix + 'js',
|
||||||
|
//filename: fileNamePrefix + '[name].js', // css loader will process all @import and url() with help of require()
|
||||||
|
publicPath: '/dist/',
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
contentBase: path.resolve(__dirname),
|
||||||
|
publicPath: "/", //should provide the path of the served js , img , etc...
|
||||||
|
writeToDisk: true,
|
||||||
|
compress: true,
|
||||||
|
port: 8080,
|
||||||
|
open: true,
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
|
||||||
|
{
|
||||||
|
// test: /\.js$/,
|
||||||
|
test: /\.(js|jsx|tsx|ts)$/,
|
||||||
|
exclude: /(node_modules|bower_components)/,
|
||||||
|
use:
|
||||||
|
[
|
||||||
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
// options: { configFileName: helpers.root('src', 'tsconfig.json') }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'angular2-template-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// test: /\.ts$/,
|
||||||
|
// use: [{
|
||||||
|
// loader: 'ts-loader',
|
||||||
|
// options: { configFile: path.resolve(__dirname, 'tsconfig.json') }
|
||||||
|
// }, 'angular2-template-loader'
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
|
||||||
|
// {
|
||||||
|
// test: /\.html$/,
|
||||||
|
// use: [
|
||||||
|
// {
|
||||||
|
// loader: 'raw-loader',
|
||||||
|
// // options: {
|
||||||
|
// // minimize: true,
|
||||||
|
// // }
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
// exclude: [helpers.root('src/index.html')]
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
test: /\.html$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: {
|
||||||
|
loader: 'raw-loader',
|
||||||
|
options: {
|
||||||
|
esModule: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{
|
||||||
|
test: /\.(css|scss)$/,
|
||||||
|
// include: helpers.root('src', 'app'),
|
||||||
|
include: path.resolve(__dirname, 'src/app'),
|
||||||
|
use: {
|
||||||
|
loader: 'raw-loader',
|
||||||
|
options: {
|
||||||
|
esModule: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// use: ['style-loader', 'css-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(scss|css)$/,
|
||||||
|
// exclude: helpers.root('src', 'app'),
|
||||||
|
exclude: path.resolve(__dirname, 'src/app'),
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||||
|
// loader: 'style-loader',
|
||||||
|
// loader: MiniCssExtractPlugin.loader,
|
||||||
|
// options: {
|
||||||
|
// hmr: process.env.NODE_ENV === 'development',
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
// Translates CSS into CommonJS
|
||||||
|
{
|
||||||
|
loader: "css-loader",
|
||||||
|
options: {
|
||||||
|
sourceMap: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
|
||||||
|
},
|
||||||
|
// devtool: 'inline-source-map',
|
||||||
|
stats: {
|
||||||
|
colors: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// optimization: {
|
||||||
|
// minimize: isProduction,
|
||||||
|
// minimizer: [
|
||||||
|
// new TerserPlugin({
|
||||||
|
// // cache: true,
|
||||||
|
// parallel: true,
|
||||||
|
// // sourceMap: true, // Must be set to true if using source-maps in production
|
||||||
|
// extractComments: true,
|
||||||
|
// terserOptions: {
|
||||||
|
|
||||||
|
// compress: {
|
||||||
|
// directives: false,
|
||||||
|
// // drop_console: true,
|
||||||
|
// // drop_debugger: true,
|
||||||
|
// // keep_classnames: false,
|
||||||
|
// // keep_fnames: false,
|
||||||
|
// },
|
||||||
|
// mangle: true, // Note `mangle.properties` is `false` by default.
|
||||||
|
// keep_classnames: false,
|
||||||
|
// keep_fnames: false,
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
|
||||||
|
// Options similar to the same options in webpackOptions.output
|
||||||
|
// both options are optional
|
||||||
|
// filename: '[name].css',
|
||||||
|
// chunkFilename: '[id].css',
|
||||||
|
filename: '[name].css',
|
||||||
|
chunkFilename: '[chunkhash].css',
|
||||||
|
}),
|
||||||
|
|
||||||
|
new webpack.LoaderOptionsPlugin({
|
||||||
|
htmlLoader: {
|
||||||
|
minimize: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// https://medium.com/ag-grid/webpack-tutorial-understanding-ngtools-webpack-306dd7f9e07d
|
||||||
Loading…
Add table
Reference in a new issue