planner

The main application.

frontend

angular web site

angular-split

Right now we use visit for the split panes. It seems to work well.

npm install angular-split
ng generate component planner

Copy the sample html from the stackblitz link into the new component. Then add the module inside app.module.ts and you have a working base already.

One thing you will want is to change the color of the grips to match the background color. I found an example so i present it here without knowing why it works.You can find the class easily in chrome dev, but it seems you need to add ::ng-deep in front of the class :

::ng-deep .as-split-gutter { background-color: red !important; }

running

The frontend was made for older angular and node versions. But it was successfully adapted for :

• yarn 3.5.0
• node 18.15.0 # or 19.7.0
• angular 14.3

However there are still a lot of warnings while compiling this, so try to clean that up soon.

This is a clean install, so we make a new yarn.lock file.

Workinstruction starting planner

git clone git@bitbucket.org:keesklopt/planner.git 19
cd 19
git checkout develop
rm package-lock.json
rm yarn.lock
touch yarn.lock
yarn install

This will produce plenty of warnings.

@types/googlemaps@npm:3.43.3 is deprecated

Since the @types/googlemaps npm pages says:

types for the Google Maps browser API have moved to @types/google.maps

Let's try to install that instead.

yarn remove @types/googlemaps
yarn remove @types/google.maps

We need to test if the interface still works in between the upgrades so:

yarn start run 

We now get this in the console :

google.maps.LatLng is not a constructor

yarn explain

When you get errors in yarn, they do not say much useful. Except for a code that starts with a 'p' :

@angular-builders/custom-webpack@npm:15.0.0 [d9650] doesn't provide @types/node (p45d5e), requested by ts-node

You can use the explain command on yarn to get more information about that code.

yarn explain peer-requirements p45d5e

remove webpack build

The most problematic seems to be the custom webpack build we have installed.

angular.json

...
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
            "outputPath": "dist",
...

And the accompanied config file :

custom-webpack.config.js

const CompressionPlugin = require(`compression-webpack-plugin`);
const path = require(`path`);
module.exports = {
    plugins:[
        new CompressionPlugin({
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/,
            filename(info){
                let opFile= info.path.split('.'),
                opFileType =  opFile.pop(),
                opFileName = opFile.join('.');
                return `${opFileName}.${opFileType}.gzip`;
            }
        })
    ],
}

It causes an error on the .split() call in info.path.split(). We could debug that further, but we could also just settle for the default builder for angular.

• because it is more likely to work always
• because is webpack is now at v5 and ive seen multiple times that angular 15 doesn't work with webpack 5 yet.
• we can expect the angular (devkit) bundler to do a descent job

This means

• removing custom-webpack.config.js,
• removing the webpack packages from package.json
• alter the builder in angular.json to "@angular-devkit/build-angular:browser"
• remove the customWebpackConfig section from the options in angular.json

This gets us a compiling program at least.

googlemaps => google.maps

You will now get problems like mentioned earlier about LatLng not being a constructor. The API seems to have been changed and also the name.

A working example is here visit so i get from that we need to change these things :

• @types/googlemaps is now called @types/google.maps
• google.maps.LatLng(o.loc.y, o.loc.x) should become { lat: o.loc.x, lng: o.loc.y }
• mapTypeId: google.maps.MapTypeId.ROADMAP, should become mapTypeIds : ['roadtype, 'coordinate']
• new map.google.Maps () should be implemented asynchronous, see below.

Note mapTypeIds has become plural, but that also means you can give more options for viewing the map.

async initMap

Previously we just created the map in the ngAfterViewInit() function. But that won't work anymore. The new method is below.

    async initMap() {
        //@ts-ignore
        const { Map } = await google.maps.importLibrary("maps");

        const mapProp = {
            center: { lat: this.lat, lng: this.lng},
            zoom: 8,
            mapTypeIds: ['roadmap', 'coordinate' ]
        };
        this.map = new Map(this.gmapElement.nativeElement, mapProp);
    }

    ngAfterViewInit() {
        this.initMap()
    }

So we now create an async class method called initMap(). We are going to await for the library to load, so we need to make it an async method.

This line however creates a typescript error :

Property 'Map' does not exist on type 'CoreLibrary | MapsLibrary | PlacesLibrary | GeocodingLibrary | RoutesLibrary | MarkerLibrary | ... 5 more ... | VisualizationLibrary'.

The examples on google itself however put @ts-ignore above that line telling the typescript compiler to ignore that line.