Angular CLI 6：如何在主应用程序中使用库子项目？

Question

I've got an Angular 6 project that's made of up a main application, and a separate sub-project that is a library. I'm trying to consume this library from the main application, and I can't seem to get it working.

In the tsconfig.json , I have the following paths configuration:

"paths": {
  "@my-company/my-package/*": "dist/my-package/*"
}

And then in the main app, I import the library like so:

import { ButtonModule } from '@my-company/my-package/button';

However, when I build the main application, I get tons of errors about not being able to find modules. For the above import statement, I'll get this error:

Module not found: Error: Can't resolve '/Users/jattardi/code/myproject/dist/my-package/button'

However, if I check the dist/my-package directory, there certainly is a button directory containing the type definitions.

The reason my imports have subpaths, eg @my-company/my-package/button instead of just @my-company/my-package is to make it tree-shakeable. Not sure this is possible. Since this is an Angular 6/ng-packagr generated build, do I lose this ability?

Answer 1

I was hit with the same error when trying to consume in the main application. My answer will not solve that case as I am trying to get my lazy loaded module, I moved into the new Angular6 library, to work.

I was able to publish my library project to npm and consume it in the main application as an npm dependency. For eg: @santony/ngx-material. May be as a workaround you could do that until this is resolved.

Answer 2

For those who are still facing this problem, there's a "how to" at ng-packagr 's documentation:

https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md

Basically,

All you have to do is create a package.json file and put it where you want a secondary entry point to be created. The contents of my_package/testing/package.json can be as simple as:

{
  "ngPackage": {}
}

And also, in dev application, I've added the path reference to the secondary endpoint, so it worked:

"@my-company/my-library/another": [
  "dist/my-library/another"
]