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

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.