Skip to content

Instantly share code, notes, and snippets.

@rplaurindo
Last active November 20, 2021 16:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rplaurindo/4ceedae9a2ebb5d140b78b1228ea1a9c to your computer and use it in GitHub Desktop.
Save rplaurindo/4ceedae9a2ebb5d140b78b1228ea1a9c to your computer and use it in GitHub Desktop.
angular libraries

Angular Libraries

Generating

$ ng g library <library-name>

Configuration files to make build with Organization name

The library path can contain @<organization-name>/ to indicate that package are encapsulated to an organization, because the package belongs to it. The files below must be adapted its keys that reference paths. They must contain the @<organization-name>/.

<project-name>/angular.json

{
  "projects": {
    "<project-name>": {
      "architect": {
        "build": {
          "options": {
            ...
          }
        }
      }
    },
    "<library-name>": {
      "sourceRoot": "projects/<library-name>"
      "architect": {
        "test": {
          "options": {
            ...
          }
        },
        "lint": {
          "options": {
            "tsconfig": [
              ...
            ]
          }
        }
      }
    }
  }
}

<project-name>/projects/<library-name>/ng-package.json

{
  ...
  "dest": "../../dist/@<organization-name>/<library-name>"
  ...
}

The dest property sets the path to call the library file index implicitly (the compiler will create a index.d.ts file), this file is referenced in lib.entryFile property with public-api.ts value, or, if you are working with namespace, with the file name where the namespace was defined.

Note.: all source code must be nested to directory or subdirectory from the ng-package.json file.


<project-name>/projects/<library-name>/package.json

{
  "name": "@<organization-name>/<library-name>"
  ...
}

To support accessing nested libraries in subpaths.

<project-name>/tsconfig.json

{
  "compileOptions": {
    "paths": {
      "<library-name>/*": [
        "dist/@<organization-name>/<library-name>/*"
      ]
    }
  }
}

Building

Inside the project path, run:

$ ng build <library-name> --prod

For just test purpose don't use the flag --prod.

Note.: the library-name must not contain @<organization-name>/.

Publishing

Inside the folder dist/@<organization-name>/<library-name>, run that.

See more.

Working with subfolders

All library nested in source root library should contain ng-package.json file at least, so it'll be compiled when you run $ ng build.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment