Angular-cli: Error in ng generate component

[louridas]

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
Node: 6.11.5
OS: darwin x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@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.2
webpack: 3.8.1

Repro steps.

ng generate component foo

The log given by the failure.

ERROR in src/app/foo/foo.component.ts(7,18): error TS2304: Cannot find name 'ViewEncapsulation'.

Desired functionality.

The generated component refers to ViewEncapsulation without importing it. Either it should be imported, or it should not appear at all. Right now it is:

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

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

  constructor() { }

  ngOnInit() {
  }

}

So the line:

encapsulation: ViewEncapsulation.None

should probably go, or the import at the start should be:

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

BTW, why should it be ViewEncapsulation.None?

Mention any other details that might be useful.

[FreakDroid]

Related #8374

[deebloo]

I think the bug is that viewEncapsulation is set at all.

[yaroslavert]

+

[JohannesHoppe]

This is a bug, the generated code does not even have a correct import.

[JohannesHoppe]

fixed via https://github.com/angular/devkit/commit/a8a6559649c8815b2b24561bd6ef00e4e4ad4ab8

[gkalpak]

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@6d7a7ea57, 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

[JohannesHoppe]

@gkalpak I completely agree to this!
This was done by purpose: https://github.com/angular/devkit/blob/6d7a7ea5709c31d839d98ecad4bb174c34a476e9/packages/schematics/angular/component/index_spec.ts#L65
But I'm confused why we want to have this breaking change?

Nobody would expect None as the default. Since it's not the default Angular-behavior. This should be fixed very soon, or a lot of people will have a hard time to realize this fundamental change.

@Brocco can you explain this to us? I'm confused!

[Brocco]

This issue has been reported several times and is currently being tracked via #8398 closing this issue.
Duplicate of #8398

[Brocco]

Woops, my bad, LOL... reopening. 😀

[dhananjayve]

Error while generating component. Please help me
The "c" alias is already in use by the "--collection" option and cannot be used by the "--change-detection" option. Please use a different alias.

ng -v
Your global Angular CLI version (7.1.4) is greater than your local
version (1.7.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

_                      _                 ____ _     ___

/ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ | '_ / _| | | | |/ _ | '__| | | | | | |
/ ___ | | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/

Angular CLI: 1.7.4
Node: 10.15.3
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.7.4
@angular-devkit/architect: 0.13.7
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 7.3.7
@angular-devkit/schematics: 7.3.7
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 7.3.7
@schematics/package-update: 0.3.2
@schematics/update: 0.13.7
typescript: 2.5.3
webpack: 3.11.0

[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._}