FaviconsWebpackPlugin – Generating all favicon images during development build (ng build)

When using ng build, the FaviconsWebpackPlugin will only generate one favicon file, based on the given “png” or “svg”.

In production build, it will generate all kinds of “shortcut” images.

As stated in the documentation (https://github.com/jantimon/favicons-webpack-plugin),

by default, the ng build, uses the devMode setting and by default this is set to “light”.

So if you want to generate all de images during development build, use: devMode: ‘webapp’

mode: ‘webapp’, // optional can be ‘webapp’ or ‘light’ – ‘webapp’ by default

devMode: ‘webapp’, // optional can be ‘webapp’ or ‘light’ – ‘light’ by default

Custom webpack configuration

If you want to use the FaviconsWebpackPlugin with Angular 9, you need a custom webpack configuration.

More information can be found at: https://www.npmjs.com/package/@angular-builders/custom-webpack#Custom-webpack-dev-server

Angular 9 – HtmlWebpackPlugin – Title not generated in the Index.html

If you want to set a custom title during the ng build process, you can use the HtmlWebpackPlugin

https://github.com/jantimon/html-webpack-plugin#options

NOTE: You will also need to place the following <%= htmlWebpackPlugin.options.title %> inside the index.html

Custom webpack configuration file:

const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

module.exports = {

    plugins: [

        new HtmlWebpackPlugin({

          filename: ‘index.html’,

          template: ‘./src/index.html’,

          title: ‘Some custom title’

        })

      ],

};

How to generate an Angular spike application at the PowerShell command line, by using a specific local Angular cli version

I wanted to generate an Angular spike application by using a specific local Angular cli version and not the globally installed Angular cli version and I also wanted to only use PowerShell.

To this, I used this script:

    $rootFolder = “C:\Spike”

    $appName = “MyGeneratedAngularSpike1”

    $angularCliVersion = “9.1.7”

    Write-Output “Create rootfolder $($rootFolder)”

    $folderExists = Test-Path “$($rootFolder)”

    If ($folderExists -eq $False) {

        mkdir “$($rootFolder)”

        Set-Location $rootFolder

        Write-Output “Generate package.json, so we can use a specific ng cli version locally”

        npm init –yes

        Write-Output “Add ng as npm script, so we can use a specific local version of the angular cli, when executing npm run ng build”

        $packageJsonPath = “$($rootFolder)/package.json”

        $json = Get-Content “$($packageJsonPath)” | ConvertFrom-Json

        $json.scripts | Add-Member -Name “ng” -value “ng” -MemberType NoteProperty

        $json | ConvertTo-Json | set-content “$($packageJsonPath)”

        Write-Output “Install a specific version of the Angular CLI”

        npm install “@angular/cli@$($angularCliVersion)” -D

    }

    Set-Location $rootFolder

    Write-Output “Generate Angular application $($appName)”

    npm run ng new “$($appName)”

    Set-Location “$($appName)”

    npm run ng serve — –open=true

<

p style=”background: #1e1e1e”>
 

The package.json in the folder “C:\Spike” is created with npm init and updated with “ConvertFrom-Json” and “ConvertTo-Json” cmd-lets.

It is only created to we can run a specific local version of the Angular CLI

The folder “C:\Spike\MyGeneratedAngularSpike1” contains the generated Angular 9 application.