251 lines
6.2 KiB
Text
251 lines
6.2 KiB
Text
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
|
|
|