DEV Community

Kim CH
Kim CH

Posted on • Edited on

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

#wsl #windowterminal #ubuntu #angular

[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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Change to zip file 
  move .\CanonicalGroupLimited.Ubuntu18.04onWindows_1804.2018.817.0_x64__79rhkp1fndgsc.Appx .\Ubuntu-18.04-LTS.zip
Enter fullscreen mode Exit fullscreen mode
  • Extract Ubuntu-18.04-LTS.zip 
  Expand-Archive .\Ubuntu-18.04-LTS.zip
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Install Successfully

Install node version manager (aka nvm) 

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

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

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
Enter fullscreen mode Exit fullscreen mode 
nvm --version
Enter fullscreen mode Exit fullscreen mode

Install nodejs

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

Alt Text

Install node-gyp 

sudo apt-get update -y
Enter fullscreen mode Exit fullscreen mode 
sudo apt-get install -y node-gyp
Enter fullscreen mode Exit fullscreen mode

Getting started example Angular 7

Install angular cli 

npm install -g @angular/cli@7.1.4
Enter fullscreen mode Exit fullscreen mode

Create project via angular cli 

cd /mnt/d/

mkdir learning-angular7

cd learning-anguar7

ng new my-app
Enter fullscreen mode Exit fullscreen mode

Alt Text

Launch my-app 

cd my-app

ng serve --open
Enter fullscreen mode Exit fullscreen mode

Alt Text

Alt Text

Resources

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

Top comments (0)

Read next

okoye_ndidiamaka_5e3b7d30 profile image

Comparing Frontend Frameworks: Angular vs. React vs. Vue.js - Which One Fits Your Project Best?

Okoye Ndidiamaka -

aapgs_b8d41d300e2d50c4e5d profile image

Why Angular Remains a Top Choice for Web Development in 2024 ?

aapgs -

brandontroberts profile image

AnalogJS 🤝 Zerops: Official Deployment Partners

Brandon Roberts -

manthanank profile image

Creating Custom Directives in Angular : A Step-by-Step Guide

Manthan Ankolekar -