Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

angular typescript angular6
Aman picture Aman · Jul 13, 2018 · Viewed 36.2k times · Source

Has anyone faced below warning in "ng serve"?

WARNING in ./node_modules/@angular/compiler/src/util.js 10:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted ℹ ｢wdm｣: Compiled with warnings.

Angular versioning:

Angular CLI: 6.0.8 Node: 8.11.3 OS: darwin x64 Angular: 6.0.9 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router, upgrade

I tried updating CLI and Angular but no success. Code inside util.js looks like:

Answer

Jorge Solis picture Jorge Solis · Aug 9, 2018

I got this error and found this: https://fluin.io/blog/critical-dependency-cannot-be-statically-extracted, where the author shows he was getting the same warning. However, I wasn't using Angular Elements, but I got the idea it might be related to the same problem, so I went ahead and checked whether I was using @angular/compiler/src/core in any of my imports.

And I was indeed doing so. The fix was as simple as removing the import line, which in my case was:

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

And then the editor autoimported it as follows:

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

I hope it helps.

Related questions

Angular - "has no exported member 'Observable'"

Typescript code: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } getHeroes(): Observable<Hero[]&…

Read More
How to pass multiple parameter to @Directives (@Components) in Angular with TypeScript?

Since I've created @Directive as SelectableDirective, I'm little bit confused, about how to pass more than one value to the custom directive. I have searched a lot but didn't get proper solution in Angular with Typescript. Here is what my …

Read More
Error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(project)

After migrating application from angular 5 to 6, on running ng serve the following errors pop up. Schema validation failed with the following errors: Data path "" should NOT have additional properties(project). Error: Schema validation failed with the following errors: Data path "" …

Read More