Building Angular apps with source maps and vendor chunk

Here is a quick tip about controlling the generation of source maps and vendor chunks in Angular 8 apps. Sourcemaps are built default in Angular according to the documentation @ https://angular.io/cli/build To be specific, the following command worked for me:

ng build --prod --sourceMap

In addition, the vendor chunk is now baked into the main chunk. To create a separate vendor chunk, run this: Angular 8 will put the vendor chunk into the main for optimizing the js code.

ng build --prod --sourceMap --vendor-chunk=true

In addition, it is recommended to analyze the bundle size with for example Webpack Bundle Analyzer like this: npm install -g webpack-bundle-analyzer Then add the following Npm run scripts to package.json:

    "buildwithstats": "ng b --sourceMap --prod --stats-json",
    "analyze": "webpack-bundle-analyzer --port 9901 dist/stats.json",

Now we have an interactive TreeMap view we can zoom into and see what is taking up space in our bundle!

Searching for 'Angularized values' in MS Sql Server DB

The following query can be used to look for 'Angularized values' in MS Sql Server DB.

DECLARE @sql nvarchar(1024)
DECLARE @column_name varchar(200)
DECLARE @table_name varchar(200)
DECLARE @sp_out varchar(2048)
DECLARE @x int

create table #tmp(sp_out varchar(2048), table_name varchar(255), column_name varchar(2048), id uniqueidentifier)
   
DECLARE tn_cursor CURSOR FOR
SELECT TABLE_NAME
FROM INFORMATION_SCHEMA.tables

open tn_cursor 
FETCH NEXT FROM tn_cursor
INTO @table_name

WHILE @@FETCH_STATUS = 0    
BEGIN   
                print @table_name

                DECLARE cn_cursor CURSOR FOR
                SELECT COLUMN_NAME
                FROM INFORMATION_SCHEMA.columns
                WHERE TABLE_NAME = @table_name

                open cn_cursor 
                FETCH NEXT FROM cn_cursor
                INTO @column_name

                WHILE @@FETCH_STATUS = 0    
                BEGIN   
                                FETCH NEXT FROM cn_cursor
                                INTO @column_name

                                --print @column_name

                                set @sql = 
                                N'insert into #tmp SELECT TOP (1000) ' + @column_name + ', ''' + @table_name + ''', ''' + @column_name + ''', Id' +
                                N' FROM [dbo].[' + @table_name + N']' +
                                N' WHERE ' + @column_name + N' like ''%? % ?%'''
                
                                --print @sql
                                exec sp_executesql @sql
                END

                CLOSE cn_cursor;    
                DEALLOCATE cn_cursor; 

                FETCH NEXT FROM tn_cursor
                INTO @table_name
END

CLOSE tn_cursor;    
DEALLOCATE tn_cursor; 

select * from  #tmp
drop table #tmp

This query will look for all fields in the DB with the contents with pattern '%? % %?' that matches Angularized values. An Angularized value is generated by AngularJs when autogenerated values are made when the contents of a drop down does not match the HTML.

Font Awesome 5 in Angular 8

Font Awesome 5 in Angular 8 based app! Here is how I did it, I first import the Font awesome packages into the app module:

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
Importing the FontAwesomeModule also into the imports section.

Add the following in to your constructor of app module:

 constructor(){
    library.add(fab, far, fas);
  }

Now you can reference the Font Awesome icons from inside any component like in this markup example:

   <div class="crop"
     (click)="onClick()"
     [style.width.px]="starWidth"
     [title]="rating">
  <div style="width: 75px">
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
  </div>
</div>

Note that if you do not use the solid icons from the 'fas' library, you must specify the type of Font Awesome icon library, such as 'far' for the regular icons. I ended up with using the following npm packages: "@fortawesome/angular-fontawesome": "^0.3.0", "@fortawesome/fontawesome-svg-core": "^1.2.21", "@fortawesome/free-brands-svg-icons": "^5.10.1", "@fortawesome/free-regular-svg-icons": "^5.10.1", "@fortawesome/free-solid-svg-icons": "^5.10.1", Note: I did a downgrade to version 0.3.0 of the angular-fontawesome package. Tested out in Angular 8. Note that adding the entire library is not suggested in most cases, as this will increase the bundle size Webpack builds up. Instead, add the necessary icons one by one. However, in a development period, it is neat to have all the (Free) icons from Font Awesome readily available until it is production/deploying time! Happy Angular 8 coding!

Example of a shared module you can set up to import in Angular 8 supporting Font Awesome five is below:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StarComponent } from "src/app/shared/star.component";
import { FormsModule } from "@angular/forms";
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    StarComponent
  ],
  imports: [
    CommonModule,
    FontAwesomeModule
  ],
  exports: [
   StarComponent,
   CommonModule,
   FormsModule,
   FontAwesomeModule,
  ]
})
export class SharedModule {

  constructor () {
    library.add(fab, far, fas);
  }

}