Angular Cli support for inline templates and css

Question

Does latest version of Angular cli supports inline templates and css for components ? i dont see --inline-template option there anymore ?

https://github.com/angular/angular-cli

Answer 1

In your angular-cli.json file you can specify if you want your files to have inline css and templates.

Here you can find all the options that you can specify in the config file.

https://github.com/angular/angular-cli/wiki/angular-cli

That way, when you use ng generate component it will use the defaults.

{
    "project": {
      "version": "1.0.0-beta.22-1",
      "name": "client"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "build",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.json",
        "prefix": "ws",
        "mobile": false,
        "styles": [
          "styles/main.scss"
        ],
        "scripts": [],
        "environments": {
          "source": "environments/environment.ts",
          "prod": "environments/environment.prod.ts",
          "dev": "environments/environment.dev.ts"
        }
      }
    ],
    "addons": [],
    "packages": [],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "scss",
      "prefixInterfaces": false,
      "inline": {
        "style": true, <<<--- CHECK IT OUT!!
        "template": true
      },
      "spec": {
        "class": false,
        "component": true,
        "directive": true,
        "module": false,
        "pipe": true,
        "service": true
      }
    }
  }

Answer 2

In the current version of the CLI (version 6) I just created a new project with ng new foo -s -t. The -s and -t set the defaults for inline templates and inline styles to true. Then I opened the angular.json and looked at what it did.

Inside of the "project" property of each app... there is a "schematics" property. Inside of that, it added the following:

"@schematics/angular:component": {
    "inlineTemplate": true,
    "inlineStyle": true
}

If you add this, and then attempt to generate a component, the template and the styles will default to inline.