Angular
Posted By Sebastian

Creating Angular Projects With Angular CLI


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.


If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot!


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.ts with 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/app folder:


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 new command 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.

ONLINE COURSE: Angular - The Complete Guide

Check out the great Angular – The Complete Guide with thousands of students already enrolled:

Angular – The Complete Guide

  • This course covers Angular 5
  • Develop modern, complex, responsive and scalable web applications with Angular
  • Use their gained, deep understanding of the Angular  fundamentals to quickly establish themselves as frontend developers
  • Fully understand the architecture behind an Angular application and how to use it
  • Create single-page applications with on of the most modern JavaScript frameworks out there

Go To Course

ONLINE COURSE: Angular CLI - Using Angular Made Easy

Check out the great Angular CLI – Using Angular Made Easy course with thousands of students already enrolled:

Angular CLI – Using Angular Made Easy

  • Understand the concepts of Angular CLI
  • Reduce the Angular work which is done manually
  • Work with Angular CLI easily
  • Create and Modify their Angular apps a lot easily with the help of CLI

Go To Course


Using and writing about best practices and latest technologies in web design & development is my passion.