How to create a complex angular library with at least 3 levels project tree

1
votes

I need to create an angular library but not a simple one. I want it to have the same project tree as https://github.com/angular/angular. My project library should be like the following tree :

  • @myglobal/particular
  • @myglobal/particular/common
  • @myglobal/particular/core
  • @myglobal/particular/specific

I performed following recommended steps described in https://angular.io/guide/creating-libraries link:

  • ng new myglobal --create-application=false
  • cd myglobal
  • ng generate library particular

But I can only have the following tree :

  • myglobal :
    • package.json file which contains following field => "name": "myglobal",...
    • projects folder :
      • particular folder :
        • package.json file which contains following field => "name": "particular",...
        • src folder : -lib folder

i.e myglobal/projects/particular/src/lib/

I have the feeling that if I want to be able to have something like @global/particular/common and so on, I need to build a project tree like https://github.com/angular/angular to be able to set the correct "name": in package.json files like: "name": "@global/particular/common" otherwise I get the following error on my VScode editor :"String does not match the pattern of "^(?:@[a-z0-9-~][a-z0-9-._~]/)?[a-z0-9-~][a-z0-9-._~]$"." And I also have errors with I perform a ng build command.

I would like to have a tree project like angular-master from https://github.com/angular/angular which is :

  • angular-master folder :
    • package.json file which contains following field => "name": "angular-srcs", (why it is not @angular instead of angular-srcs?)
    • packages folder :
      • common folder :
        • package.json file which contains following field => "name": "@angular/common",...
        • http folder :
          • package.json file which contains following field => "name": "@angular/common/http",...
          • src folder

i.e angular-master/packages/common/http/src

  1. Thus my question is : is there an angular-cli command that enables to create the same project library tree than https://github.com/angular/angular project tree?

Did they use ng new angular-master --create-application=false then cd angular-master and after ng generate library common did they rename manually projects to packages? how did they create http folder and its content in common folder through an ng command or manually?

  1. Issue on importing my library : When I'm trying to import my library previously published on a repository I would like also to be able to import it like importing a angular library package meaning doing somthing like : import { HttpClientModule } from '@angular/common/http';

Looking at my example I would like to be able to write something like import { ParticularComponent } from '@global/particular'; instead of what I have to write i.e : import { ParticularComponent } from '@global/projects/particular/src/lib/particular.component';

Is there a specific way to publish my library in order to be able to do that?

Thank you so much for your help.

1
angular

1 Answers

1
votes

I would recommend you to go with Nx workspaces. Nx is a set of Angular CLI power-ups for modern enterprice applications development. When using Nx, you can create multiple applications and libraries in the same workspace. Libraries are sharable across libraries and applications. They can be imported to anywhere within the Workspace.

I know this won't be your answer, but as per my industry experience it could show a way to you to go with a correct path.

Everything is documented here: https://nx.dev/angular/getting-started/why-nx