CLIを使用した角度作成コンポーネントはカプセル化を提供します：ViewEncapsulation.None

Question

angular5の学習。

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はコードブレークを行い、次のエラーメッセージを出す：どのように

は、私が知っているが、私は新しいコンポーネントを作成するために、角度のCLIを使用するとき、私は、次のコードを取得しますencapsulation: ViewEncapsulation.Noneを削除するだけでバグを修正してください。しかし、最初にこのコード行を持たない方法はありますか？

Answer 1

は輸入

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

を追加していますがViewEncapsulation.Emulatedはそれがエミュレートを使用することをお勧めします、デフォルトの1であることを知っている必要があります。 ViewEncapsulation.Nativeがすべてのブラウザで機能しない

Answer 2

現在、CLIが生成している未解決の問題はViewEncapsulation.Noneです。これは、ここに追跡されている：https://github.com/angular/angular-cli/issues/8398

PRが同様にこのバグを修正することがあり、ここでは、追跡：今のところhttps://github.com/angular/devkit/pull/270

を、あなたは2つのオプションがあります。

1. encapsulation: ViewEncapsulation.None行を削除して、エラーを取り除くことができます。角度はデフォルトのViewEncapsulation.Emulatedになります。
2. あなたはその行を保持し、Fatehとして言及してインポートを追加することができます。これによりは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であることを意味します。