Angular-cli: generate component with encapsulation inconsistent behavior

[zackarychapple]

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.

[zhuravlyov]

I was trying to edit default .angular-cli.json based on your example code and there is no any effect. Still have encapsulation: ViewEncapsulation.None in my new components.

[mtpultz]

@zhuravlyov I made this change yesterday and it definitely works maybe review the wiki to make sure you have it added correctly to defaults.

[zackarychapple]

@mtpultz what version did you test with? I'm wondering why I'm getting different results.

[foxjazz]

need to include it in the import

[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
})

2. `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
})

3. `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
})

2. `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']
})
```

[mtpultz]

a PR was pushed and merged solving this issue - https://github.com/angular/angular-cli/issues/8374. If you read the PR everything will be as it was prior to the update. So no metadata added to the components and the default will be Emulated. So this issue can probably be closed.

[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. 😕

[Brocco]

Duplicate of #8398

I know this issue was created first but the linked PR in that issue should resolve the last of these issues.

[mtpultz]

@JohannesHoppe 8 days ago the default was changed in master back to Emulated so everything should now be back to what it was originally - https://github.com/angular/devkit/commit/60ce9969c30cf79460a855a47d4da99ee66b5edb

[JohannesHoppe]

That are great news! Thanks guys! 👍

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}