Share Library To The Global ​

share a CSS module to the global ​

In the collab-web library, the ui-styles lib is a gloabl css pre-handle module for all project, and all of file is .less file, there are no js file defined for export the css to global

In this context, we implement css globally active in the following ways:

• In the project.json for web application, add the config as following for the target option

// XX excutor
    "options": {
        "outputPath": "dist/web/server",
        "main": "apps/web/server.ts",
        "tsConfig": "apps/web/tsconfig.server.json",
        // This is the key for made css active globally
        "stylePreprocessorOptions": {
            "includePaths": ["libs/collab-web/ui-styles/src/lib"]
        }
    },

How to make a library shared to the global ​

For JavaScript library or other framework library (eg: an Angular shared library), To share the it globally in an Angular project managed by Nx, you can follow these methods:

Method one ​

1. Create a Library: First, create a new library in your Nx workspace. You can use the Nx CLI command ng generate library to generate a new library. For example, to create a library named "common-lib", run the following command:

   ng generate library common-lib

2. Export the Library: Inside the public-api.ts file of your library (e.g., libs/common-lib/src/public-api.ts), export all the public components, services, and any other entities you want to make available globally. For example:

   typescript

   // libs/common-lib/src/public-api.ts
   export * from './lib/my-component/my-component.component';
   export * from './lib/my-service/my-service.service';

3. Build the Library: Use the Nx CLI command ng build common-lib to build the library. This will compile the library and create a distributable version of it in the dist folder.

4. Publish the Library: If you want to publish the library to a package registry like npm, you can use a package manager like npm or yarn to publish it. For example, with npm, you would run npm publish from the root of your library's dist folder.

5. Install the Library: In the project where you want to use the library globally, you can install it using the package manager. For example, with npm, you would run npm install common-lib. This will download the published version of the library and add it to the project's node_modules folder.

6. Import and Use the Library: In your Angular project, you can import the components, services, and other entities from the library like any other package. For example, in your component or module file, you can import the exported entities from the library:

   typescript

   import { MyComponentComponent } from 'common-lib';
   import { MyServiceService } from 'common-lib';
   
   // Use the imported components and services
   // ...

By following these steps, you can create a shared library in your Nx workspace and make it available globally for use in different projects within the workspace.

Method two ​

To share a common library globally in an Angular project managed by Nx, you can follow these steps:

1. Create a Library: Use Nx CLI to generate a new library. Open your terminal and run the following command:

   sh

   nx generate @nrwl/angular:library my-library

   This will create a new library called "my-library" in the libs directory.

2. Export the Library: Inside the my-library directory, you'll find a file called my-library.module.ts. Open that file and add the necessary components, services, or modules that you want to export from the library.

   typescript

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { MyComponent } from './my-component.component';
   
   @NgModule({
     imports: [CommonModule],
     declarations: [MyComponent],
     exports: [MyComponent]
   })
   export class MyLibraryModule { }

   Ensure that you include the components, services, or modules that you want to share in the exports array.

3. Build the Library: Next, you need to build the library. In the terminal, run the following command:

   nx build my-library

   This will compile the library into a distributable format.

4. Publish the Library: Once the library is built, you can publish it to a package registry (e.g., npm) or make it available locally for other projects.

   • Local Publishing: If you want to share the library locally, navigate to the dist folder of your library using the following command:

     cd dist/my-library

     Then publish it to your local npm cache:

     npm pack

     This will create a tarball file (e.g., my-library-1.0.0.tgz) containing your library.

   • Registry Publishing: If you want to publish the library to a package registry like npm, you can follow their documentation for publishing packages. Typically, you would need to create an account on the registry, login, and use the npm publish command.

5. Import the Library: In any other Angular project within your Nx workspace, you can now import and use the shared library. Run the following command in the project where you want to use the library:

   nx generate @nrwl/angular:library-import my-library

   This will automatically import the library into your project, including the necessary module and configuration changes.

   Alternatively, you can manually import the library by adding it to the dependencies section of the project's package.json file and running npm install.