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 ========================================= 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