angular-cli: Angular 5: uncaught ReferenceError: ViewEncapsulation is not defined

This is the official solution: https://angular.io/api/core/ViewEncapsulation

npm Package | @angular/core import { ViewEncapsulation } from ‘@angular/core’;

Looks like the ViewEncapsulation are now imported after upgrading to Angular 5.0.1.

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

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

  ngOnInit() {}
}

I would also thank the Angular team which are working really hard on this amazing product! And please people, who complains… Stop doing it. You are not paying for this products, so if there are any bugs, instead of complaining, you should try to help to fix the bugs! 😉

Angular CLI: 1.5.0
Node: 8.9.0
OS: darwin x64
Angular: 5.0.1
... 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.2
typescript: 2.4.2
webpack: 3.8.1

I am curious, but, why the components are created with ViewEncapsulation.None instead of ViewEncapsulation.Emulated?

Instead of doing it manually though you can update the angular.cli.json file using the example below, and you can find it in the wiki

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

Seems the issue could be easily solved to be the Angular default by:

1. The angular.cli.json file should be set to this by default requiring no extra metadata to be added to components. The style guide seems to always suggest not including metadata unless needed for example use @Input instead of the metadata input so keeping this in configuration seems cleaner, or
2. The encapsulation key added to the metadata should at least be ViewEncapsulation.Emulated and have the ViewEncapsulation imported so maintains Angular’s default from v2 and v4

Manually removing encapsulation: ViewEncapsulation.None from components helped me resolve this issue