Tips for faster angular Development

• Use Host Module Replacement
• ng serve --hmr  
• Open browser automatically
• ng serve --hmr -o
• Have multiple terminal Open in VS Code.
• 
  

Angular Error - Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime

Mostly this happens when there is conflict in the npm version installed vs the version which is your project using.

Best way worked for me is to uninstall node-saas and install saas. 

Commands to follow

1. npm uninstall node-sass

2. npm install sass

Thanks!

Administer Port Exclusion

 There might be instances when you cannot use a port. You end up getting the error that port is in use. However, no process using that port. 

That could be because those ports might be reseverd. you can check it using the following command

netsh int ip show excludedportrange protocol=tcp

If you see your port there, you can clear those reservation using the following command

net stop winnat

Docker Desktop - Error message when trying to switch to windows container

 Exception:

System.ServiceProcess.TimeoutException:
Time out has expired and the operation has not been completed.
at System.ServiceProcess.ServiceController.WaitForStatus(ServiceControllerStatus desiredStatus, TimeSpan timeout)
at Docker.Backend.Processes.WindowsDockerDaemon.TryToStartService(Settings settings, String args, Dictionary`2 env) in C:\workspaces\master-merge\src\github.com\docker\pinata\win\src\Docker.Backend\Processes\WindowsDockerDaemon.cs:line 208
at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.<>c__DisplayClass6_1.b__0(Object instance, Object[] methodParameters)
at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ExecuteAsync(HttpControllerContext controllerContext, IDictionary`2 arguments, CancellationToken cancellationToken)
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Web.Http.Controllers.ApiControllerActionInvoker.d__1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Web.Http.Controllers.ActionFilterResult.d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Web.Http.Dispatcher.HttpControllerDispatcher.d__15.MoveNext()

Solution:

Remove the readonly flag of the following file. 

C:\ProgramData\Docker\panic.log

Don't know the connection but it works :)

Change URL of Git Repo

 To change the URL of Git Repo from one to another is

run 

git remote -v

to see existing URL from within your repo folder.

run 

git remote set-url origin {newURL}

Done!

You can run git remote -v again to make sure that update is successful.

Change Detection Strategy - Angular

 Each of the angular component uses Default change detection policy by default. UI keep checking for the change continuously. Which many times affect the performance of the component and overall product. 

There is a way you can control this by setting the Change Detection for your component. 

How to find out the effect Change detection is putting on your control.

Override ngAfterViewChanged event on your component and use code similar to below. 

  ngAfterViewChecked(){

    this._ngZone.runOutsideAngular(() => {

      if(this.divElement.nativeElement)

      {

      this.divElement.nativeElement.classList.add('highlight')

      setTimeout(() => {

        this.divElement.nativeElement.classList.remove('highlight')

      }, 1500)

    }

    })

  }

Inject "private _ngZone : NgZone" to your constructor. 

divElement is the Element in your html. 

and highlight-css , change the background color of the div with css. 

You will see how many times the event fires. 

Changing the Default Change Detection:

- You can change the default change detection by setting the changeDetection to OnPush in your Component declaration. 

Ref:

https://medium.com/ngconf/simplified-angular-change-detection-e74809ff804d

https://pankajparkar.github.io/demystifying-change-detection/#/default-strategy

Increase the number of files visible in Azure KUDU

 Problem: Kudu console doesnt show more than 400 files. 

Open kudu ,

go to console and run following command

window.localStorage['maxViewItems'] = 1000

refresh the page.