Setup Development Environment for Angular 7 with Windows Subsystem for Linux (WSL)
Tags: wsl, windowterminal, ubuntu, angular
Published: 2020-05-20 20:08:05

[Update on 03 June 2020]

Since Microsoft just released the update which is [windows 10 build 2004](https://docs.microsoft.com/en-us/windows/whats-new/whats-new-windows-10-version-2004), and I just convert to WSL 2 without any issue.

Here are the steps to upgrade
1. Download and install [WSL2 Linux Kernel](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi)
2. [Update to WSL 2](https://docs.microsoft.com/en-us/windows/wsl/install-win10#update-to-wsl-2)

[End of Update]

-------

Recently, I was assigned to Angular 7 project, the first thing I thought was how to set up my development environment without impact to existing work, they could be the version of NodeJs, npm packages (i.e. node-gyp), python and so on... Luckily, we can run Linux natively on Windows 10, it's known as **Window Subsystem for Linux** - [WSL](https://docs.microsoft.com/en-us/windows/wsl/about) in short.

**_Note:_** 
1. Although Microsoft has [WSL 2](https://docs.microsoft.com/en-us/windows/wsl/wsl2-index), but in this post, I'm going to install **WSL 1** since I'm not running Windows Insider version. 
2. This post assumes that we has already [Window Terminal](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701) installed.

Let's start with opening Window Terminal as **Administrator**

## Enable Windows Subsystem for Linux

```powershell
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
```
## Install Ubuntu-18.04-LTS distro

The simplest way is we can install via [Window Store] (https://www.microsoft.com/en-us/p/ubuntu-1804-lts/9n9tngvndl3q?activetab=pivot:overviewtab) but we may face the problem of drive system got full since it's installed at `%LOCALAPPDATA%\Ubuntu-18.04-LTS\rootfs` as default. In order to avoid this problem, we may want to install on Non-System drive, for instance, `E:\_wsl\Ubuntu-18.04-LTS` drive. Then follow the below steps

- Create the folder `E:\_wsl\Ubuntu-18.04-LTS`
- Download [Ubuntu-18.04-LTS distro](https://aka.ms/wsl-ubuntu-1804), the downloaded file may be `CanonicalGroupLimited.Ubuntu18.04onWindows_1804.2018.817.0_x64__79rhkp1fndgsc.Appx`, then copy to `E:\_wsl\Ubuntu-18.04-LTS`
- Change to `E:\_wsl\Ubuntu-18.04-LTS`

```powershell
   cd E:\_wsl\Ubuntu-18.04-LTS
```

- Change to **zip** file

```powershell
  move .\CanonicalGroupLimited.Ubuntu18.04onWindows_1804.2018.817.0_x64__79rhkp1fndgsc.Appx .\Ubuntu-18.04-LTS.zip
```

- Extract **Ubuntu-18.04-LTS.zip**

```powershell
  Expand-Archive .\Ubuntu-18.04-LTS.zip
```

- Then we execute `ubuntu1804.exe` inside the folder **Ubuntu-18.04-LTS**, in this step, we have to provide **username** and **password**. If there is no issue, we can see as below

  ```powershell
  .\ubuntu1804.exe
  ```

![Install Successfully](https://dev-to-uploads.s3.amazonaws.com/i/mpm5pa7qd4tin214y60v.png)

## Install node version manager (aka [nvm](https://github.com/nvm-sh/nvm))

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```
```bash
export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
```

```bash
nvm --version
```

### Install nodejs 

- In this step, I'm going to install nodejs v11.15.0 

```bash
nvm install 11.15.0
```
```bash
nvm use 11.15.0
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q3jeiq73j8fijnfu4riw.png)

## Install node-gyp

```bash
sudo apt-get update -y
```

```bash
sudo apt-get install -y node-gyp
```

## Getting started example Angular 7

### Install angular cli

```bash
npm install -g @angular/cli@7.1.4
```

### Create project via angular cli

```bash
cd /mnt/d/

mkdir learning-angular7
 
cd learning-anguar7

ng new my-app
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/37yfq7uc2rw2ea0c5z0b.png)

### Launch my-app

```bash
cd my-app

ng serve --open
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d9e2281ak7payt1hwwfj.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hman4ljgt85s4fazp0wl.png)

## Resources
1. [Install Windows Subsystem for Linux on a Non-System Drive](https://kontext.tech/column/tools/308/how-to-install-windows-subsystem-for-linux-on-a-non-c-drive)
2. [Automatically Configuring WSL](https://devblogs.microsoft.com/commandline/automatically-configuring-wsl/)