geomon.viewer/notes.txt

 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 
 
# Polyfills for angular
npm install --save core-js zone.js
 


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)


npx @angular/cli generate service marker --skip-tests


npx @angular/cli generate component map --skip-tests

npx @angular/cli generate module map --skip-tests


npx @angular/cli generate service dataset-api --skip-tests
answer:
CREATE src/app/dataset-api.service.ts (139 bytes)

npx @angular/cli generate service http --skip-tests

========================================= ExtractTextPlugin ==================================================

npm install --save-dev mini-css-extract-plugin




npm install terser-webpack-plugin --save-dev


======================================== DI ==============================================

https://github.com/leonardfactory/babel-plugin-transform-typescript-metadata
npm install --dev --save babel-plugin-transform-typescript-metadata

# Polyfills for angular
The import in polyfills.ts is not contained in a default Angular project anymore because Angular only needs it for dev environment.

If you need the polyfill, e.g. for modules like class-transformer, you can add it to the polyfills.ts:
npm install --save core-js 

 import 'core-js/proposals/reflect-metadata';







 ===================================leaflet images ===========================================================

 ============================================ image bundle sames file bundler===================================
npm install --save-dev img-loader url-loader

{
    test: /\.(png|jpg|gif)$/,
    loaders: [
        {
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'images/[name].[ext]'
            }
        },
        'img-loader'
    ],
},


npm install --save-dev file-loader



==============================================================================================================



tutorial: https://52north.github.io/helgoland-toolbox/additional-documentation/how-tos/integrate-a-map-component.html


npm install --save @helgoland/core
npm install --save @helgoland/map
npm install --save @helgoland/selector
npm install --save @helgoland/depiction
npm install --save @angular/forms


Install dependencies

#npm i @ngx-translate/http-loader


npm install --save rxjs

npm install --save-dev webpack-merge

========================= cretae html file for production
https://webpack.js.org/plugins/html-webpack-plugin/

npm install --save-dev html-webpack-plugin

Basic Usage:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

This will generate a file dist/index.html containing the following: