- April 15, 2017
- Posted by: Christopher Pond
- Category: Front End Development
We are going to go through the steps for creating an new Angular 4 project leveraging the Angular CLI tool. Getting started with a new project is both quick and simple.
Cloud based IDE Setup using Cloud9
We will be using Cloud9 which offers a cloud hosted development IDE which includes a Free version sufficient for this exercise. The scripts can be run locally via command line as well but for this quick overview of Angular 4 we will developing in Cloud9.
- Create an account on Cloud 9: https://c9.io/
- Select create a new workspace and choose a “Blank” template
- A bash terminal called bash – “[Your Workspace name]” can be seen once the work space has been successfully created
- All commands will be run from this terminal. For those working locally simply run the steps below from your command line.
Install Node.js and Angular 4 project prerequisites
- First install Node.js
$ nvm install 6.10.2)
6.10.2 is current LTS version of Node as of this post.
- Set default version
$ nvm alias default 6.10.2.The related npm version for Node.js 6.10.2 is 3.10.10.
- Install angular-cli: CLI tool for Angular:
$ npm install -g @angular/cli
- This may take several minutes to run, once process has completed you should see the following:
Create and run a new Angular 4 project
- Create a new project:
$ ng new [project name]or for this example
$ ng new sandbox-app
- Take a minute to grab your favorite beverage as this process will take several minutes. Once the process completes you should see the following:
- The generated project hierarchy can be seen below:
- Next we want to run the generated project. Cloud9 does not have a concept of local host so we will need to specify the host . The packages.json file has a npm start command property where we will specify host and port as follows: –host 0.0.0.0 –port 8080 –public $C9_HOSTNAME
(To avoid “Invalid Host Header” error when upgrading to cli 1.1.1 start script should include public as follows” :
"ng serve --host 0.0.0.0 --port 8080 --public $C9_HOSTNAME")
- Save the packages.json file.
- Change the current directory to the application root (For this example,
$ cd sandbox-app)
- Start up the App server
$ npm start
- Now we can see the application running in the browser by selecting the following:
- Wow, your first Angular 4 app running in all of its glory!
I hope this basic tutorial has provided you with an environment to start exploring the power of Angular 4. In our next post we will add Angular Material to our Project.