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”
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
ng g component my-new-component
ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service
ng g class my-new-class
ng g guard my-new-guard
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module
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:
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:
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:
Run the project:
Access the project at http://localhost:4200/
Configure host and port:
ng serve --host 0.0.0.0 --port 4201
Click here if you are looking for Part II of this tutorial which describes how to generate various scaffold’s for Angular.