Angular 6 / 7 "the result of a dependency is an expression"

I encountered the same warning about "the result of a dependency is an expression” referencing fesm5.js in a new Angular 7 cli generated project.

This particular project has a reference to a local npm package with a relative path beginning with file://../ which seemed to cause the warning.

After some research I found this Github issue which explains how we can fix it in Angular 6+ cli generated apps.

What worked for me was to open the angular.json file in the client project's root folder (not the shared library's) and find this path:

projects > (your project name) > architect > build > options

and add the key:

"preserveSymlinks": true

with all the rest of the file omitted here are the relevant parts:

{  "projects": {    "MyAwesomeProject": {      "architect": {        "build": {          "options": {            "preserveSymlinks": true          }        }      }    }  }}

After adding this I get normal ng build without warnings. Hope that helps!

The main problem is not why you are getting that warnings. The way you are accessing the library is not an ideal way. Let's look into a little better approach [Using Angular 7] with your own sample steps, which will not cause that issue in the first place.

Step 1: [Same as yours]

ng new workspace # accept the defaultsng new product # accept the defaultscd workspace ng generate library widgets ng build --prod widgets # leave out "--prod" for Angular 7cd ../productng build

Step 2: Create .tgz library file

cd ../workspace/dist/widgets/npm packcp widgets-0.0.1.tgz ../../../product/

Step 3: Add "widgets" library in package.json

Open package.json file of product project, and under devDependencies add the following line:

"widgets": "file:./widgets-0.0.1.tgz",

Step 2 and Step 3 are required if you have the library locally. Otherwise, if your library is packed and publish into npm repository, then you don't need file: keyword. You can just mention the version like other dependencies.

Step 4: Install newly added library

Run npm install in product project.

Step 5: Use the library

Modify app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { WidgetsModule } from 'widgets'; // new line@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    WidgetsModule // new line  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Step 6: Build product project

Now, run ng build in product project. It will run successfully.

This error comes out when a JS dependency is expressed using an expression rather than a fixed string - for example, require('horse' + variable) or require(function() { return 'horse'+variable }). It is likely that something being imported by your WidgetsModule is importing a library that is doing that form of a require.

Webpack complains about this because it means it has to include all of the files in a folder, rather than being able to statically analyse what files to include. It will still work, but according to the discussion on this Webpack issue it should not be ignored and the dependency in question should be refactored.

I came across this error when in the process of upgrading Angular from v5 to v6 on a project recently, and if I recall correctly, it went away once I upgraded all the other dependencies as well to their latest versions - I can't say which dependency was causing the problem though, and unfortunately I did not commit between seeing the error and fixing it so I can't analyse what exact change addressed the error.

It does seem that many people are having similar issues though - see for example https://github.com/angular/angular/issues/20357

To clear the warning (without fixing the underlying problem), you would follow this process, adding:

plugins: [    // Workaround for Critical dependency     // The request of a dependency is an expression in ./node_modules/@angular/core/fesm5/core.js    new webpack.ContextReplacementPlugin(        /\@angular(\\|\/)core(\\|\/)fesm5/,        helpers.root('./src'),        {}    )]

... to the webpack configuration. However, in the latest Angular CLI, you cannot manually edit the webpack configuration (the old ng eject command which used to allow this has been removed), so I don't believe you can fix the warning at this time.

All of which concludes that you would need the authors of either the Angular CLI to mask this error through the generated webpack configuration it uses internally, or the authors of Angular to change the way the core.js does its imports.