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

[ghost]

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

[ghost]

Same problem is here, it needs me to add ViewEncapsulation manually every time.

[mikk351]

Same problem

[iSanjayAchar]

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

[FreakDroid]

Related 8374 and 8376

[mtpultz]

If you want the emulated shadow DOM similar to Angular v2 and v4 then definitely remove the encapsulation metadata, or make it encapsulation: ViewEncapsulation.Emulated.

If you're not familiar with shadow DOM and are just making changes based on someone's suggestions you can read more about it here.

[mtpultz]

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

[mtpultz]

An associated issue can be found at https://github.com/angular/angular-cli/issues/8383

[sgperezcortez]

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

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

[ibqn]

This happens to me on windows platform with cli version 1.5.0, but not on Gnu/Linux

[pacurtin]

Happens to me on Mac. This is literally the second command I've given the CLI and I'm already getting errors? Seriously?

[ghost]

Interesting. I am working in Angular 5 and when I create a new component through the CLI, the .ts file is importing 'ViewEncapsulation' with Component and OnInit from the core module. In your code snippet, you are specifying the encapsulation in the @Component decorator, but not importing it at the top.

[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

[dnlosx]

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

[vibs2006]

Never thought it might to so easy i.e simply add a line in top of your module import {ViewEncapsulation} from '@angular/core'; are you are done !

[FreakDroid]

Already fixed #8374

[damienwebdev]

Just chiming in here with a fix as #8374 got a PR merged in to fix this.

Assuming you already have @angular/[email protected] installed, a simple npm update or npm install @angular/cli@latest won't work (at least it didn't for me). You'll be missing the update to @schematics/[email protected]

To fix it, do the following:

npm remove @angular/cli (this uninstalls the @schematics/angular dependency`
npm install @angular/cli@latest (this reinstalls the fixed @schematics/angular)`

You could also just manually install @schematics/angular but I figure there may be similar missed updates that the above commands would catch.

[mtpultz]

@damienwebdev that doesn't seem to work, and though the update was merged the 1.5.x branch hasn't been updated for 8 days. Are you running off master?

[damienwebdev]

@mtpultz Not that I'm aware of, but it may be because I'm specifying @latest instead of @1.5.0. I'm not sure how npm handles @latest. Here's my package.json

"dependencies": {
    "@angular-redux/store": "^6.5.7",
    "@angular/animations": "^5.0.1",
    "@angular/cli": "^1.5.0",
    "@angular/common": "^5.0.1",
    "@angular/compiler": "^5.0.1",
    "@angular/core": "^5.0.1",
    "@angular/forms": "^5.0.1",
    "@angular/http": "^5.0.1",
    "@angular/platform-browser": "^5.0.1",
    "@angular/platform-browser-dynamic": "^5.0.1",
    "@angular/platform-server": "^5.0.1",
    "@angular/router": "^5.0.1",
    "core-js": "^2.4.1",
    "immutable": "^3.8.2",
    "redux": "^3.7.2",
    "redux-observable": "^0.17.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^5.0.1",
    "@angular/language-service": "^5.0.1",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "^2.6.1"
  }

In total, I did the following:

npm install @angular/cli@latest -g`

Then in my project...
npm install @angular/cli
npm list @schematics/angular

Which gave me:

-- @angular/[email protected]
  -- @schematics/[email protected]

Then, I did:

npm remove @angular/cli
npm install @angular/cli@latest
npm list @schematics/angular

Which gave me:

-- @angular/[email protected]
  -- @schematics/[email protected]

[mtpultz]

Thanks @damienwebdev I don't know why that didn't work :( Oh well will just keep the defaults in angular.cli.json set to Emulated and not worry about it.

[Brocco]

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

[mtpultz]

@sankarkumar23 you should check out the issue linked by @Brocco I think you'll find he pushed an update 4 days ago changing the default back to Emulated -
https://github.com/angular/devkit/commit/60ce9969c30cf79460a855a47d4da99ee66b5edb