How to change Angular 10 library build structure

user_12691874 0
Viewed 993

I'm maintaining an Angular 10 Ivy library and I'm attempting to upgrade it to make use of Secondary Entrypoints, but I'm running into trouble with folder structure of the final build.

Ideally, the folder structure would emulate @angular's folder structure of:

-node_modules
 |
  -- @angular
     |
     --core
     --common
     --cli
     --material
     ...

and I could import pieces of the library like: import { someModule } from '@angular/core';

My current library builds with a folder structure of

-node_modules
 |
  --myLibrary
    |
     --package.json
     --dist/myLibrary
       |
        --package.json
        --public_api.ts
        --myLibrary.d.ts
        --feature1
        --feature2
        --feature3
        ...

which forces me to import features like import { feature1Module} from 'myLibrary/dist/myLibrary/feature1';.

I know I can remove the second myLibrary folder by updating the dest path in my myLibrary/ng-package.json, but the I don't know how to remove the dist folder to make everything build on the same level, as setting "dest": "../.." will fail to build.

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/myLibrary",
  "assets": [
    "quill/*.scss"
  ]
}

Any and all help is appreciated.

Update: The project structure is

-projects
 |
  --myLibrary
    |
     --package.json
     --ng-package.json
     --src
       |
        --public_api.ts
        --commonFunctions
     --feature1
       |
       --package.json
       --src
         |
         --public_api.ts
         --index.ts
         --feature1.component.ts
         --feature1.component.html
         --feature1.module.ts
     --feature2
     --feature3
     ...

My projects/myLibrary/src/public_api.ts only exports the functions in commonFunctions and each of the public_api.ts files in each of the feature folders only exports the modules and components of their respective features.

angular10 angular-library angular directory-structure
2 Answers

I have the similar folder structure, in my library I have Input, Button...etc, which is called features like your said. And in ng-package.json I have the settings like below:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ngx-pluto",
  "lib": {
    "entryFile": "src/index.ts",
    "cssUrl": "inline"
  }
}

And in my feature table.module.ts I can import NpPaginatorModule feature like below:

import { NpPaginatorModule } from '../paginator/index';

And after I use npm published my library I can import my feature in my consuming project like below:

import { NpButtonModule } from 'ngx-pluto';

Here is my code link just for your reference: https://github.com/KevinZhang19870314/pluto-ui

user_33223180

I found the answer to my issue.

My issue is that I am importing my library into my projects as a github dependency instead of as an npm package. I do this because Github allows users to host private repositories for free, but NPM requires a paid monthly subscription for private packages, so our company's work-around was to add our private library's dependency like "my-library": "git+ssh://git@github.com/myOrg/my-library.git#semver:10.2.7". This actually works when you are not implementing secondary entrypoints since your primary entrypoint points to a definitions file that gets built with all the library features and has proper signposts to those features.

The structure of the built module becomes an issue when you try implementing secondary entrypoints, since ng-packagr does not traverse more than a single layer down in your module's structure when searching for the additional package.json files that denote the secondary entrypoints. After reading https://github.com/npm/npm/issues/2974 it seems like npm doesn't support installing projects from subdirectories, and instead just looks for the first package.json file it finds in the repository and installs that as the module. This is what gives me the weird folder structure since the repository is actually a mono-repo that hosts my-library, a demo project, and an e2e testing project. Since there is no supported way to install just one of those projects individually, my possible solutions are limited to either breaking the library out into it's own Github repo or writing a postinstall script that will copy/paste the contents of node_modules/myLibrary/dist/myLibrary into node_modules/myLibrary

user_126918740
Related