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 @angular/router 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 npx @angular/cli generate component dashboard --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: npx @angular/cli generate service popup --skip-tests CREATE src/app/popup.service.ts (134 bytes)