Angular 5: uncaught ReferenceError: ViewEncapsulation is not defined

Bug Report

- [ 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/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/material: 5.0.0-rc0
@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 header

TS code:

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

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

  constructor() { }

  ngOnInit() {
  }

}

The log given by the failure.

header.component.ts:7 Uncaught ReferenceError: ViewEncapsulation is not defined
    at eval (header.component.ts:7)
    at eval (header.component.ts:16)
    at Object.../../../../../src/app/header/header.component.ts (main.bundle.js:58)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (app.module.ts:5)
    at Object.../../../../../src/app/app.module.ts (main.bundle.js:36)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (main.ts:4)
    at Object.../../../../../src/main.ts (main.bundle.js:74)
    at __webpack_require__ (inline.bundle.js:55)

Desired functionality.

Fails to render in browser with console error

Mention any other details that might be useful.

Mac OS

[sgperezcortez]

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

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

[isaklafleur]

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