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

angular 5 vs angular 6 vs angular 7
angular tutorial
difference between angular 2, 4, 5 6 7
angular 9
angular 6 and 7 features
angular 8 release date
angular 7 tutorial
angular 6 tutorial

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?

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.

Angular, In this article, we are comparing Angular 6 vs Angular 7 vs Angular 8 vs Angular 9 which were released on 2018, 2019 & 2020 respectively,  This post is basically to learn about angular 6/7 Datatable with search bar and pagination. Most of the website/blog providing data table by using angular 6 packages but filter and pagination are missing. Here we very much care about those features which are most common important in all type of angular 4, 6 and 7 …

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!

Comparison Between Angular 6 vs Angular 7 vs , Google Recently released the latest version of Angular 7 in the month of October. Angular 6 is previous version of the front-end JavaScript framework in the  The 6.0.0 release of Angular is here! This is a major release focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with Angular in the future. a photo by Manu Murthy of the Angular Team. As a part of this release, we are synchronizing the major versions going forward for the framework

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.

What's new in Angular 7? What are the differences between Angular , Difference Among Angular 8, 7, 6, 5, 4, 3, 2 — Breakdown, New Features, and Changes. Hey! I'm Sunny and I work at Cognizant. Follow me on LinkedIn and let​  Angular 6 uses RxJS 6 - this is the third-party library (RxJS) and introduces two important changes as compared to RxJS 5. 1. RxJS 6 introduces a new internal package structure

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.

Difference Among Angular 8, 7, 6, 5, 4, 3, 2, The Angular 7 was released. It is time for all of our ngx-* projects to upgrade to the latest version and live on the edge. This release focused on improving the  In Angular 6&7 rxjs map are changed to path rxjs/operators. We need to carefull while importing. These are the main changes in Angular 6 and 7. Create a class HttpConfigInterceptor **and implements the interface HttpInterceptor** export class HttpConfigInterceptor implements HttpInterceptor

How to Migrate from angular 6 to 7 - sendilkumarn, The main updates in Angular 6 were ng update, Angular Material + CDK components, CLI Workspaces, Animations Performance Improvements, ng add, and  Comparing Angular 6 vs Angular 7 vs Angular 8 Finally, Angular 8 released with ivy rendering which Angular team was along with updated angular core framework, Angular Material, and the Command Line Interface or CLI. Ivy Engine. Ivy is a major part of this release, and it took most of the effort from Angular 6 to release it.

Angular 7 - What are the new improvements and features?, Exploring what's new with Angular 7 and how to go about upgrading your apps from Angular 6 to Angular 7. For only $5, thecodeguru will fix or create high quality application in angular 6 7. | I am the only trusted developer here on Fiverr whom you can rely on sole heartedly. Developer graduated from Best College and 10+ years of experience. 100% | On Fiverr

Angular 7: Upgrading & Summary of New Features ← Alligator.io, In this article, we discuss a comparison between Angular 6 vs Angular 7 vs Angular 8, here we share all the features, ideas & improvement in  Google Recently released the latest version of Angular 7 in the month of October. Angular 6 is previous version of the front-end JavaScript framework in the month of March. There are lost of new features such as Scrolling, Drag and Drop, CLI prompts, Virtual and Drop etc. 1:CLI Prompts

Comments
  • I suspect that whatever is going on here is the cause of the error in this question: NullInjectError: no provider for NgZone
  • Just tested again with Angular 6.1 (angular-cli 6.1.2). No change.
  • In the generated widgets.module.ts does it import BrowserModule?
  • 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...
  • ... 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)
  • 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?
  • 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...
  • Great! ng build works, but ng build --prod doesn't, any idea how to make that work as well?
  • thanks for the answer. I was run into the same issue, when was testing a local package
  • Thanks. Finally got around to trying this (on Angular 7) and had no luck.
  • If I could give you 1000 upvotes, I would! For those of us using "npm link", this is the fix. Cheers.
  • Thanks. In this case, I'm starting from scratch with the latest version of Angular CLI (6.1.1).