loading...

Setup Development Environment for Angular 7 with Windows Subsystem for Linux (WSL)

kimcuonthenet profile image Kim CH Updated on ・3 min read

[Update on 03 June 2020]

Since Microsoft just released the update which is windows 10 build 2004, and I just convert to WSL 2 without any issue.

Here are the steps to upgrade

  1. Download and install WSL2 Linux Kernel
  2. 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 in short.

Note:

  1. Although Microsoft has WSL 2, 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 installed.

Let's start with opening Window Terminal as Administrator

Enable Windows Subsystem for Linux

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Install Ubuntu-18.04-LTS distro

The simplest way is we can install via Window Store 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, 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
   cd E:\_wsl\Ubuntu-18.04-LTS
  • Change to zip file
  move .\CanonicalGroupLimited.Ubuntu18.04onWindows_1804.2018.817.0_x64__79rhkp1fndgsc.Appx .\Ubuntu-18.04-LTS.zip
  • Extract Ubuntu-18.04-LTS.zip
  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
  .\ubuntu1804.exe

Install Successfully

Install node version manager (aka nvm)

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

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

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

Install nodejs

  • In this step, I'm going to install nodejs v11.15.0
nvm install 11.15.0
nvm use 11.15.0

Alt Text

Install node-gyp

sudo apt-get update -y
sudo apt-get install -y node-gyp

Getting started example Angular 7

Install angular cli

npm install -g @angular/cli@7.1.4

Create project via angular cli

cd /mnt/d/

mkdir learning-angular7

cd learning-anguar7

ng new my-app

Alt Text

Launch my-app

cd my-app

ng serve --open

Alt Text

Alt Text

Resources

  1. Install Windows Subsystem for Linux on a Non-System Drive
  2. Automatically Configuring WSL

Posted on by:

kimcuonthenet profile

Kim CH

@kimcuonthenet

Father, Husband and Developer

Discussion

markdown guide