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

Question

I'm trying to create an Angular 6 library and use it in an Angular 6 app. I've boiled it down to a minimal test case. (Update: since Angular 7 is out, I've tried that as well.)

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

An app called "workspace" hosts a library called "widgets". Another app called "product" stands alone. Everything to this point is fine.

Now let's try using the "widgets" library in the "product" app. Open the file product/src/app/app.module.ts which was generated by the CLI. Add two lines as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { WidgetsModule } from '../../../workspace/dist/widgets'; //  added

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WidgetsModule // added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After that change, when I run ng build from the product directory, I get warnings from Webpack.

Date: 2018-07-31T13:13:08.001Z
Hash: 8a6f58d2ae959edb3cc8
Time: 8879ms
chunk {main} main.js, main.js.map (main) 15.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.59 MB [initial] [rendered]

WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js
4997:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js
5009:15-102 Critical dependency: the request of a dependency is an expression

What does "the result of a dependency is an expression" mean? What am I doing wrong?

Canuck

I suspect that whatever is going on here is the cause of the error in this question: NullInjectError: no provider for NgZone – Canuck

Just tested again with Angular 6.1 (angular-cli 6.1.2). No change. – Canuck

In the generated widgets.module.ts does it import BrowserModule? – Crescentia

@MarkHughes There are no Angular imports in the generated widgets.module.ts. – Canuck

Basically, this is what would be needed to clear the warning but in the latest CLI ng eject has gone away so I have no idea now how you'd edit the webpack config used by the CLI... – Crescentia

... but as to why it's happening specifically in this scenario? I give up :) No idea! Good luck finding a solution, I suspect it's actually a bug/feature in Angular (CLI or fesm5/core.js) – Crescentia

Answer 1

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 defaults
ng new product # accept the defaults
cd workspace 
ng generate library widgets 
ng build --prod widgets # leave out "--prod" for Angular 7
cd ../product
ng build

---

Step 2: Create .tgz library file

cd ../workspace/dist/widgets/
npm pack
cp 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.

Alienage

I have the same issue and this answer does work for me - but is an additional few steps (packing to a tgz and installing it) to the setup in the original post. Is there anywhere in the Angular docs that makes it clear that referencing a Library in an external workspace is not supported? – Foretopmast

That solves the problem but totally kills development: the final step in a library develpment is testing it in a real project and depurating the functionality... Is there any way to test the library directly with the original built? That way the target project automatically restarts when library is modified... – Regent

Great! ng build works, but ng build --prod doesn't, any idea how to make that work as well? – Bield

Answer 2

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!

Garvey

thanks for the answer. I was run into the same issue, when was testing a local package – Asquint

Thanks. Finally got around to trying this (on Angular 7) and had no luck. – Canuck

If I could give you 1000 upvotes, I would! For those of us using "npm link", this is the fix. Cheers. – Radiometer

Answer 3

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.

Crescentia

Thanks. In this case, I'm starting from scratch with the latest version of Angular CLI (6.1.1). – Canuck

Are all the dependencies of your WidgetsModule as up to date as can be @PatrickMcElhaney? Might be worth posting the package.json as it's likely to be a dependency of some sort causing the warning... or do you mean you've not added anything at all to the base layout generated by ng new ...? – Crescentia

Yes, all of the code was generated with the CLI commands mentioned at the top of the question. Other than that the only thing I changed was product/src/app/app.module.ts as mentioned. A good starting point may be to follow the same steps and see if you can reproduce the issue. 🙏🏼 – Canuck

Indeed - I thought there was some more code beyond just a "naked" project, now I understand that it's simply an empty project I'll see if I see the same! – Crescentia

Answer 4

It is the BrowserModule that is causing such warning. I don't know the reason, but it seems that it is the source of the warning.

Tierratiersten

The BrowserModule import is part of the code generated by the CLI. I can take it out but that will cause other problems. – Canuck