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
 zusätzlich routing:
 npm install --save @angular/router
 
 wieder löschen:+ tsconfig.json + tsconfig.app.json
 npm install --save-dev @angular-devkit/build-angular

 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

npm install --save-dev sass-loader node-sass

 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


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

ng g c messages --skip-tests
CREATE src/app/messages/messages.component.html (23 bytes)
CREATE src/app/messages/messages.component.ts (283 bytes)
CREATE src/app/messages/messages.component.css (0 bytes) 
UPDATE src/app/app.module.ts (2468 bytes)

create service:
npx @angular/cli generate service message --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

für mergen der config files:
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:



npx @angular/cli generate service popup --skip-tests
CREATE src/app/popup.service.ts (134 bytes)





npm install --save bulma



  // "ng": "ng",
    // "start": "ng serve",
    // "build": "ng build",
    // "watch": "ng build --watch --configuration development",

font awesome with angular:
https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome@latest



=========================================== d3 ============================
 
npm install d3 --save
npm install @types/d3 --save-dev

npx @angular/cli generate component bar --skip-tests
CREATE src/app/bar/bar.component.html (18 bytes)
CREATE src/app/bar/bar.component.ts (263 bytes)
CREATE src/app/bar/bar.component.css (0 bytes)
UPDATE src/app/app.module.ts (3039 bytes)




========================================== dialog =========================
npm install --save @angular/material @angular/cdk