Create a Barebones Angular App with the --minimal Flag

Chris Sevilleja

The Angular CLI gives us an easy way to create brand new Angular applications. Not only does it build Angular apps for us, it also gives us extras like testing built in.

Related Video Course: Working with the Angular CLI

Sometimes you may want to create a simple Angular app that doesn't have all the bells and whistles that the CLI provides.

The --minimal Flag

The Angular CLI since v1.2 has added a --minimal flag to create a barebones Angular app.

We can create a new barebones app using the CLI:

ng new barebones-app --minimal

Now we've created a brand new app. You may notice that there are some file differences with and without the --minimal flag.

Let's talk about the differences.

The Differences with the --minimal Flag

Here the three main differences:

  1. No tests are created: You'll see no .spec.ts files for testing
  2. CSS is inline
  3. HTML templates are inline

Each component will be created as one file. There won't be any .css or .html files created. Here's the whole app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>
      app Works!
    </p>
  `,
  styles: []
})
export class AppComponent {
  title = 'app';
}

We have inline styles and templates.

How Does it Work?

How does the CLI know that it's a minimal app? We can see the configuration in the .angular-cli.json file. Towards the bottom in the defaults section, you can see the the setup:

"defaults": {
  "styleExt": "css",
  "component": {
    "spec": false,
    "inlineStyle": true,
    "inlineTemplate": true
  },
  "directive": {
    "spec": false
  },
  "class": {
    "spec": false
  },
  "guard": {
    "spec": false
  },
  "module": {
    "spec": false
  },
  "pipe": {
    "spec": false
  },
  "service": {
    "spec": false
  } 
}

We can see in the component section, there are three properties for:

  • spec: Should the CLI create tests
  • inlineStyle: Should the styles be inline
  • inlineTemplate: Should the HTML template be inline

Even if you create an Angular app without the --minimal flag, you can update the settings here for any generated features!

Chris Sevilleja

161 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.