带CLI的角度创建组件提供封装：ViewEncapsulation.None

Question

学习angular5。当我使用的角度CLI来创建新的组件，我得到了下面的代码：

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

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

    constructor() { } 

    ngOnInit() { 
    } 
} 

然而encapsulation: ViewEncapsulation.None使得代码休息，扑灭了以下错误消息：

我知道如何通过删除encapsulation: ViewEncapsulation.None来修复该错误。然而，有没有办法不把这行代码放在第一位？

Answer 1

附加进口

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

，但你要知道，ViewEncapsulation.Emulated是默认的，这是更好地使用模拟。 ViewEncapsulation.Native不适用于所有浏览器

Answer 2

目前存在一个未解决的问题，CLI正在生成ViewEncapsulation.None。这是正在这里追踪：https://github.com/angular/angular-cli/issues/8398

还有就是要修复这个bug以及公关，这里追踪：https://github.com/angular/devkit/pull/270

现在，你有两个选择。

1. 您可以删除行encapsulation: ViewEncapsulation.None以摆脱错误。 Angular将默认为ViewEncapsulation.Emulated。
2. 您可以保留该行，并按照Fateh提及的方式添加导入。这将使ViewEncapsulation设置为None，这可能会导致其他问题，例如样式应用于您不希望应用它们的组件上。

Answer 3

角CLI版1.5.3

ng g component test 

此版本角CLI的生成以下代码：

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

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

    constructor() { } 

    ngOnInit() { 
    } 

} 

这意味着封装方式是通过默认ViewEncapsulation.Emulated。