Angular CLI – Part II: Generating Components, Directives, Pipes and Services

This is the part II of the Angular CLI tutorial. By now you should have an Angular project created using cli, running at localhost:4200. Click here in case if you missed a step or want to refer to part I of this tutorial.

Assuming that you have followed part I and created same project as mentioned navigate to “ang-cli-proj“.

Create a new component

ng generate component my-new-component

This will create four files under src/app/my-new-component:

  • my-new-component.component.css – Stylesheet
  • my-new-component.component.html – Template
  • my-new-component.component.spec.ts – Test specifications
  • my-new-component.component.ts – Controller

And it will also update the app,module.ts automagically to include the new component.

Adding the newly created component to the template

Copy paste the below code to “app.component.html” under the H1 tag. Run the application using “ng serve”

<app-my-new-component></app-my-new-component>
You should see “my-new-component works!” under the title of the page.

Managing paths of various scaffold’s:

By default angular cli will create all the scaffold’s under src/app folder. You can control this path by following examples as shown on Angular CLI site:

ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp

Scaffolding commands:

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

Resources:



			

Angular CLI – Part I: Installing and creating a new project

Install Angular CLI globally using npm

npm install -g @angular/cli

Explanation: This command will install the angular cli package globally. After succesful install, command ‘ng’ should be available to use.

Test if ng cli is installed:

ng help

It is fairly straight forward on Mac. Windows users might face due to security issues. This is the case where Angular CLI is installed but the path is not installed properly. You’ll have to set the alias to ng manually to resolve this issue:

alias ng="/Users/reinos/.npm/lib/node_modules/angular-cli/bin/ng"

More information: https://github.com/angular/angular-cli/issues/503

Create new project:

ng new ang-cli-proj

Explanation: This creates the project structure for Angular and install node dependencies to start the project. If you open up the project folder you’ll notice following:

  • e2e folder: This folder contains test files which will be used to do end to end testing
  • node_modules: This folder contains node modules listed in package.json. This folder should not edited manually.
  • src folder: This folder contains the main source code for our project. It is recommended to keep all our code and assets inside this folder.
  • karma.conf.js: This file contains configurations for Karma.
  • package.json: This file contains configurations for npm(node package manager).
  • protractor.conf.js: This file contains configurations for Protractor.
  • README.md: This file contains basic instructions to build, run and scaffolding the application.
  • tsconfig.json: This file contains configurations for typescript.
  • tslint.json: This file contains linting rules for typescript.

Apart from these there are three hidden files:

  • .editorconfig: Settings for the editor. I am using Visual Studio Code.
  • .gitignore: This file contains a list of folders which should not be added to version control. Feel free to modify this file if needed.
  • .angular-cli.json: This is the most important file for Angular CLI projects. This file contains the configurations required to build and run the application.

Serving the new project:

Navigate to the new project folder:

cd ang-cli-proj

Run the project:

ng serve

Access the project at http://localhost:4200/

Configure host and port:

ng serve --host 0.0.0.0 --port 4201

Resources:

Click here if you are looking for Part II of this tutorial which describes how to generate various scaffold’s for Angular.

Express JS

Install Express JS and generator

Use the following command to install express:

  • Express installation
    • npm install express
  • Express generator installation
    • npm install express-generator -g
  • Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
  • To test the installation use following command:
    • express –version

Screen Shot 2016-07-09 at 11.08.24 PMScreen Shot 2016-07-09 at 11.10.55 PM


Create an app

  • express [your-app]

Screen Shot 2016-07-09 at 11.20.00 PM.png

  • Install required node modules
    • npm install

Screen Shot 2016-07-09 at 11.38.36 PM

  • Start the application
    • npm start
  • Open browser and enter localhost:3000. You should see the following:

Screen Shot 2016-07-09 at 11.52.17 PM

npm install [node_modules]

Checking node and npm installation

Use the following command to test if npm & node is installed:

  • node –version or node -v
  • npm –version or npm -v

Refer to this POST in case node or npm is not installed.


Initializing a node project

  • npm init
  • This will initialize node programming on current folder and will create a package.json file. Package.json will contain the list of dependencies required for application development.

Installing node pakage using npm

Use the following command to install a node package:

  • npm install [package_name]
    • This will install the specified package into the local node_modules folder.
    • Ex: npm install bower
    • Parameters:
      • -g or –global: This installs the package as a global package.
        • Ex: npm install -g gulp
      • -S, –save: Package will appear in your dependencies.
        • Ex: npm install –save gulp
      • -D, –save-dev: Package will appear in your devDependencies.
        • Ex: npm install –save-dev gulp
      • -O, –save-optional: Package will appear in your optionalDependencies.
        • Ex: npm install -save-optional gulp
      • -E, –save-exact: Saved dependencies will be configured with an exact version rather than using npm’s default semver range operator.
  • npm install
    • This will install all modules listed as dependencies in package.json.

Gulpgulp-error

Use the following command to install gulp:

  • npm install -g gulp
  • Gulp is the streaming build system. It is recommended to install it globally as it can be required on multiple projects.

Bowerbower-logo

Use the following command to install gulp:

  • npm install -g bower
  • Bower is a package manager for the web. It is recommended to install it globally as it can be required on multiple projects.

express_jsExpress

Use the following command to install express:

  • npm install express
  • npm install express-generator -g
  • Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Lodashlogo202

Use the following command to install lodash:

  • npm i –save lodash
  • A modern JavaScript utility library delivering modularity, performance, & extras. Lodash makes JavaScript easier by taking the hassle out of working with arrays,
    numbers, objects, strings, etc.

angularjs

Use the following command to install angularjs:

  • npm install angular
  • Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is recommended to install it locally as it is required on the production code.

Many more libraries can be added from NPMJS site.

Refer to npm-install page for more details.

Fixing npm permission issue

Node and npm can be installed easily. However, we might face issues while using npm. Most of the time this mean that we don’t have access to install the files on the machine. This can be resolved by appending sudo command but it is not recommended as it might create other issues. If the user does not have permissions to install file and “npm install” is ran on the terminal; we’ll see the following screen:

Screen Shot 2016-07-09 at 4.49.39 PM

This can be resolved by following methods:

  1. Appending sudo:
    • sudo npm install
    • enter system password
  2. Changing the permission on global and local folders where the node modules reside:
    • Run “npm config get prefix” in your terminal. This will give the path of global node_modules: For ex: /usr/local
    • Change the user permissions for this folder by using following command:
      • sudo chown -R <user_id> /usr/local/

  3. Navigate to your application folder where your local node_modules reside.
    • Run the similar command
      • sudo chown -R <user_id> node_modules/
  4. “npm install” should work on this application from now onwards.

PS: Repeat Step 3. in case of a different project.

For more information and alternatives visit Fixing npm permissions.

How to install NodeJS

NodeJS: Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

  1. Visit the NodeJS site
  2. Download the package suitable for your OS.
  3. Double click the package to begin installation.
  4. Follow the wizard to complete the installation process. You’ll be prompted for agreeing with legal T&C’s and system password.
  5. A summary of installation will be displayed in the last step. As seen in the above image Node.js and npm were installed successfully at the mentioned path. The path might be different depending on your settings or OS. Node.js package comes along with its own package manager: Node Package Manager or npm. Visit NPMJS site to know more about npm.
  6. To test the installation open your terminal or command prompt and run following command:
    • node –version or node -v Screen Shot 2016-07-09 at 4.23.13 PM
  7. npm installation can be tested in similar way:
    • npm –version or npm -v Screen Shot 2016-07-09 at 4.32.38 PM.png

Hope this helps you with your Node installation.