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

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?

Solution 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.

Solution 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!