Cloud Based Angular 4 New Project Tutorial

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.

  1. Create an account on Cloud 9: https://c9.io/
  2. Select create a new workspace and choose a “Blank” template

    Create new blank workspace
    Create new blank workspace
  3. A bash terminal  called bash – “[Your Workspace name]” can be seen once the work space has been successfully created

    Install Node.js
    Install Node.js
  4. 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

  1. First install Node.js  $ nvm install 6.10.2)
    6.10.2 is current LTS version of Node as of this post.
  2. Set default version $ nvm alias default 6.10.2.
    The related npm version for Node.js 6.10.2  is 3.10.10.
  3. Install  angular-cli: CLI tool for Angular:  $ npm install -g @angular/cli
  4. This may take several minutes to run, once process has completed you should see the following:

    Install angular-cli
    Install angular-cli

 

Create and run a new Angular 4 project

  1. Create a new project: $ ng new [project name] or for this example $ ng new sandbox-app
  2. Take a minute to grab  your favorite beverage as this process will take several minutes.  Once the process completes you should see the following:

    ng new - Create new angular project
    ng new – Create new angular project
  3. The generated project hierarchy can be seen below:

    Angular 4 Project Hierachy
    Angular 4 Project Hierachy
  4. 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")

    Update ng start parameters
    Update ng start parameters
  5. Save the packages.json file.
  6. Change the current directory to the application root (For this example,$ cd sandbox-app)
  7. Start up the App server $ npm start
  8. Now we can see the application running in  the browser by selecting the following:

    Preview app
    Preview app
  9. Wow, your first Angular 4 app running in all of its glory!

    My First Angular 4 App
    My First Angular 4 App.

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.



5 Comments

  • Rodrigo Dias

    Hello I’m having problems with server, it’s popping up “Invalid Host header” do you know what it could be?

    • Hello Rodrigo, are you running on Cloud9 or locally? If cloud9 make sure you specified the host value as specified in step 4. The default of localhost does not work in this environment.
      If running locally, you can remove the cl params from ng-serve under start in packages.json and stick with the defaults. Hope that helps.

    • After receiving two comments regarding “Invalid Host Header”, I decided to look into it. At first was not able to reproduce so I updated my node packages to latest and then also received “Invalid Host header”. To fix the issue I updated the start script on package.json with “start”: “ng serve –host 0.0.0.0 –port 8080 –public $C9_HOSTNAME“

  • laura

    I have the same as Rodrigo problem. I guess it is firewall.

    • After receiving two comments regarding “Invalid Host Header”, I decided to look into it. At first was not able to reproduce so I updated my node packages to latest and then also received “Invalid Host header”. To fix the issue I updated the start script on package.json with “start”: “ng serve –host 0.0.0.0 –port 8080 –public $C9_HOSTNAME“

Leave a Reply