Learn to setup the development environment for Angular, Node and TypeScript in your local workstation to develop next generation UI applications.
Table of Contents Install Node Install Git Install Packages Create Angular Hello world Demo
Install Node
- Goto Node download page and download the installer based on your machine configuration.
- Execute the installer. Choose the paths if you want to install node on any alternate location. I will recommend to go with default options.
- Verify that node has been installed with this command.
$ node --version v8.11.3 //output
Install Git
- Goto Git download page and download the installer based on your machine configuration.
- Execute the installer. Choose the paths if you want to install node on any alternate location. I will recommend to go with default options.
- Verify that node has been installed with this command.
$ git --version git version 2.17.1.windows.2 //Output
Additionally run these commands to set your git identity.
$ git config --global user.email "you@example.com" //Use your git email id $ git config --global user.name "Your Name" //Use your git name
Install Packages
Now when node and git are installed, it’s time to install necessary npm packages.
$ npm install -g rxjs $ npm install -g typescript $ npm install -g webpack $ npm install -g webpack-cli $ npm install -g @angular/core $ npm install -g @angular/cli $ npm install -g gulp
Create Angular Hello world
Go to your workspace in command prompt, and run this command. This command will create a new Angular application in helloworld folder – with all necessary files in it.
$ ng new helloworld
Demo
To run the above created application, run command ng serve from application folder.
$ cd helloworld
$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-06-18T17:10:50.638Z
Hash: 832b348b3a35e13efaf8
Time: 6365ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.06 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
Open browser and verify the running application in http://localhost:4200/.
Your Angular development environment is UP and running.
Drop me your questions in comments section.
Happy Learning !!
Comments