generate component with encapsulation inconsistent behavior

Bug Report or Feature Request (mark with an x)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.5.0
@angular/material: 2.0.0-beta.7
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.1
typescript: 2.4.1
webpack-bundle-analyzer: 2.8.3
webpack: 3.8.1

Repro steps path 1.

1. Add the following to your .angular-cli.json

"component": {
   "viewEncapsulation": "None"
},

1. run ng g c my Result:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my',
  templateUrl: './myComponent.component.html',
  styleUrls: ['./myComponent.component.scss']
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Repro steps path 2.

1. With default .angular-cli.json
2. ng g component my -ve None Result:

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

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Desired functionality.

When running via the command flag the attribute on the metadata is set, when running via the cli option the import is added but the metadata is not set. The behavior for both should apply the metadata and add the import.

[JohannesHoppe]

@mtpultz the PR (https://github.com/angular/devkit/commit/a8a6559649c8815b2b24561bd6ef00e4e4ad4ab8) only fixes the broken import.

as @gkalpak figured out (see https://github.com/angular/angular-cli/issues/8398#issuecomment-343424366)

angular/devkit@a8a6559 takes care of importing ViewEncapsulation when necessary. The issue of using ViewEncapsulation.None by default still remains.

Some background: I believe using None as the default value for ViewEncapsulation was an issue since the beginning, but was cancelled out in most cases by another bug (which was fixed in angular/devkit@6d7a7ea, revealing the original issue).

AFAICT, the default value needs to be changed from None to Emulated in the following files:

schematics/angular/application/schema.json schematics/angular/component/schema.json

… for some strange reason the default value in the schematics configuration is set to None. Which makes no sense, IMHO. 😕

[mtpultz]

Hi @zackarychapple, that comment was for @zhuravlyov since he was adding it to angular.cli.json and still getting ViewEncapsulation.None added to his components, and he appears to be trying to not have it added so he needs to set it to:

  "defaults": {
    "styleExt": "scss",
    "component": {
      "viewEncapsulation": "Emulated"
    }
  }

Your bug report seems to be focused on ViewEncapsulation should be added using angular.cli.json defaults or using the CLI flag. I’m using Angular CLI v1.5 as well and once added to angular.cli.json it outputs None if that’s what I’ve chosen, or if Emulated doesn’t add anything since that is Angular’s default ViewEncapsulation, and the same if just added via the terminal.

Angular CLI v1.5 Results

Based on Angular CLI v1.5 it seems the logic is reversed for importing ViewEncapsulation between None and Emulated otherwise it seems to work as advertised. See the resulting outputs based just using the terminal and setting the ViewEncapsulation in angular.cli.json.

No changes to angular.cli.json

1. ng generate component Example1 has an issue of ViewEncapsulation is not being imported, but adds the proper metadata since for whatever reason the Angular CLI has a different default then Angular

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

@Component({
selector: 'app-example1',
templateUrl: './example1.component.html',
styleUrls: ['./example1.component.scss'],
encapsulation: ViewEncapsulation.None
})

1. ng generate component Example2 -ve=None has an issue of ViewEncapsulation is not being imported, but adds the proper metadata

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

@Component({
  selector: 'app-example2',
  templateUrl: './example2.component.html',
  styleUrls: ['./example2.component.scss'],
  encapsulation: ViewEncapsulation.None
})

1. ng generate component Example3 -ve=Emulated has an issue of ViewEncapsulation is being added when it shouldn’t. As expected it does not add the metadata since this is Angular’s default so not required.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-example3',
  templateUrl: './example3.component.html',
  styleUrls: ['./example3.component.scss']
})

Changes to angular.cli.json defaults

1. ng generate component Example4 has an issue of ViewEncapsulation not being imported, when it is needed when None set as default in angular.cli.json, which requires metadata to be set.

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

@Component({
  selector: 'app-example4',
  templateUrl: './example4.component.html',
  styleUrls: ['./example4.component.scss'],
  encapsulation: ViewEncapsulation.None
})

1. ng generate component Example5 has an issue of ViewEncapsulation being imported when it shouldn’t since the default of Emulated is set in angular.cli.json, which doesn’t require metadata to be set.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-example5',
  templateUrl: './example5.component.html',
  styleUrls: ['./example5.component.scss']
})