Setup an Angular development environment and start an Angular project by following these four simple steps!
Setup Visual Code
Download and install Visual Studio Code (VS Code), a lightweight TypeScript, HTML and CSS code editor.
Optionally, install the following helpful extensions:
This is a helpful extension to provide inline highlighting to style inconsistencies and TypeScript errors to help produce maintainable quality code.
This extension helps when creating summary comments for constructors, properties or methods. Just type /** on the line above what needs to be commented and the parameters and default text will be constructed for you.
This is not necessarily a must have as you can use the Seti theme that came with VS Code. Having a folder icon alone makes navigation so much easier. After installing the extension, go to File -> Preferences -> File Icon Theme -> VSCode Icons.
You can see the difference in the following image:
Download and install Node.js. In VS Code use the Ctrl + ` keyboard shortcut to open the terminal window and run the following commands to ensure at least the node 6.9.x and npm 3.x are installed.
node -v npm -v
Install Angular CLI
In the same terminal, install Angular CLI, globally by using the following commands.
npm install -g @angular/cli
Angular CLI is a command line interface tool that we can use to easily setup a project, add components and much more!
Start your first Angular project!
Our development environment is now setup to where we can create a new Angular project with this simple command.
ng new quickstart-app
The Angular CLI has created all of these files as our project skeleton and even setup our test environment. We can see all of the available scripts for running, building and linting our project in the package.json file in the scripts section. These scripts can be run by typing
npm followed by the script name.
You can build your project by using the following terminal command.
Even if you didn’t install TSLint you can still run style checks against your project by linting your project.
You can run all your tests through the Karma test runner that was added as scaffolding by the Angular CLI.
And lastly you can run your app.
This will locally host your webpages which you can then navigate to in a browser at localhost:4200.
I hope you found this article helpful in setting up your development environment. Stay tuned to upcoming part two where I will demonstrate connecting an Angular application to SignalR Hubs.