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) npm uninstall d3 @types/d3 --save ========================================== dialog ========================= npm install --save @angular/material @angular/cdk npx @angular/cli generate service app-router --skip-tests CREATE src/app/app-router.service.ts (138 bytes) =============================== chart.js ====================================== npm install --save chart.js import { Chart } from 'chart.js'; npm install --save moment npm install moment chartjs-adapter-moment --save import 'chartjs-adapter-moment'; npm install chartjs-plugin-zoom import zoomPlugin from 'chartjs-plugin-zoom'; Chart.register(zoomPlugin); npm install --save @helgoland/core npm install --save @helgoland/map npm uninstall --save @helgoland/selector npm uninstall --save @helgoland/depiction npm uninstall --save @angular/forms npm uninstall --save @helgoland/map @helgoland/core npm i --save-dev @types/leaflet