CODEWITHSUNDEEP
angularnpmangular-clinode-modules
Adam Dunkerley
Adam Dunkerley

Reputation: 702

Why can't I build an Angular app that references an internal Angular library?

tl;dr; ng build removes /dist folder containing my compiled custom library. That invalidates all references to that library in my project's code, which causes ng build to ultimately fail. What am I doing wrong?

I've followed documentation and guides to generate a library with the Angular CLI within an existing project. I ran ng build @mylib and then npm install dist/@mylib. A module or two in my app imports components from @mylib as they would from any npm installed module (import { MyLibComponent } from '@mylib';) These references, however, break as soon as I build the app, because ng build deletes the /dist folder, which contains the compiled @mylib.

You'd think the /node_modules would contain the compiled files, but it actually just uses a virtual link to the problematic /dist folder.

Upvotes: 3

Views: 4960

Answers (1)

Milan Tenk
Milan Tenk

Reputation: 2715

The output path of your library should be in a separate folder in the dist folder than your application output.

I created an example for this, you can find it in following repo: https://github.com/tenkmilan/angular-workspace-example

In the above case in angular.json the application output is "outputPath": "dist/my-app" and the library output in ng-package.json is "dest": "../../dist/my-lib". To have the sources of your library output included in your application following configuration is needed in the root tsconfig.json of the workspace:

"paths": {
  "my-lib": [
    "dist/my-lib"
  ],
  "my-lib/*": [
    "dist/my-lib/*"
  ]
}

This way the library output won't be deleted and it will be included in your application directly.

Upvotes: 4

Related Questions