Creating Angular Projects With Angular CLI

This post has been published first on CodingTheSmartWay.com.

Subscribe On YouTube

Creating new Angular projects is easy by using Angular CLI in the following way:

$ ng new [name]

That’s the default usage of the command and creating a new project folder with [name]. The project which is created in that folder is containing:

  • The default Angular project
  • All dependencies installed in node_modules folder
  • Testing files for each components

However, using Angular CLI for creating new Angular projects is much more powerful and not limited to be executed in default mode. Let’s explore options which are available for ng new in the following sections.

Creating A Minimal Angular Application

By applying the --minimal flag to the ng new command you can create a minimal Angular project:

$ ng new [name] --minimal

This minimal Angular project differs in the following way from the project which is generated by using the command without any options:

  • No testing files included
  • Inline template code for components

Starting up the development web server with

$ ng serve

will give you the following output:

And you should be able to get the following output by accessing http://localhost:4200:

Using Inline Templates

The previous example created a minimal Angular project and made use of inline templates. If you want to only enable inline templates and for the rest stay with the default project template you can also use the flag --inline-template:

$ ng new [name] --inline-template

If you take a look in the resulting project structure you’ll find no separate HTML template files. Instead the template code is include in the component’s TypeScript file like in app.component.ts:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>

`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}

Using Inline Styling

You can also decide to setup your Angular application with inline style by using option --inline-style.

$ ng new [name] --inline-style

The effect is that that no separate styling files are created (app.component.css is missing in the default setup). Instead of pointing to a styling file in app.component.ts with

styleUrls: ['./app.component.css']

You’ll just find the following line of code which enables you to include inline styling code directly:

styles: []

Selecting A Styling Variant

By default Angular CLI generates a CSS file for every component which is added to the project. By using option --style you can change to other CSS preprocessors like you can see in the following:

$ ng new [name] --style=scss

In this case SCSS is used instead of CSS. That means that file styles.css is renamed to styles.scss and file app.component.css is renamed to app.component.scss.

To ensure that both files are used file styles.scss is added to the array which is assigned to the styles property in .angular-cli.json:

"styles": [
"styles.scss"
],

File app.component.scss is included in the component implementation is app.component.tswith the following line of code:

styleUrls: ['./app.component.scss']

Possible values for --style attribute:

  • css
  • scss
  • less
  • sass
  • styl

The corresponding preprocessor build activity is added automatically by Angular CLI.

Generating A Routing Module

By using command line parameter --routing we’re able to specify that a routing module should be added to the Angular application which is being generated:

$ ng new [name] --routing

Executing this command generated an additional file app-routing.module.ts in the src/appfolder:

This file contains an empty default implementation of a Angular routing module. This module is also added to AppModule, so that you can directly add route configuration to the routes property.

To do so, let’s first add a new component to the application by executing:

$ ng generate component second

This is generating the following new files:

With that new component available we’re not able to add a new route in app-routing.module.ts:

import { SecondComponent } from './second/second.component';
const routes: Routes = [
{ path: 'second', component: SecondComponent }
];

You can now access URL http://localhost:4200/second and you’ll see that the output of second component is outputted right underneath the default content:

The output of SecondComponent is inserted here because that’s the place where

<router-outlet></router-outlet>

has been inserted in file app.component.html.

Change The Component Prefix

By default all your component selector prefixes are set to app. This can be changed by using the --prefix attribute in the following way:

$ ng new [name] --prefix=myapp

In this example the prefix is set to myapp.

Skip Initializing A Git Repository / Skip First Git Commit

By default a Git repository is created within the Angular project directory. You can skip this step by using the --skip-git option in the following way:

$ ng new [name] --skip-git

If you want to create a Git repository for the newly generated Angular project but only would like to skip the initial commit you can also use flag --skip-commit instead.

Conclusion

Creating new Angular project with Angular CLI is easy! However, in most cases the ng newcommand is used in the default mode. As Angular CLI is a really powerful tool there are more options available to specify in which way the project should be generated. In this post you’ve learned the most important command line parameters which helps you to create new projects with Angular CLI which are exactly fitting to what you need.

This post has been published first on CodingTheSmartWay.com.


Top Online Course Recommendations

#1 Angular 5 — The Complete Guide

Master Angular (Angular 2+, incl. Angular 5) and build awesome, reactive web apps with the successor of Angular.js
Go To Course …

#2 Angular 5 and Firebase — Build a Web App with Typescript

Learn how to build a Web Application using Angular, Firebase and Typescript
Go To Course …

Disclaimer: This post contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support this blog!