actionanand / angular-lib-demo

It's an angular workspace where simple angular app and angular library are used.

AngularLibDemo

This project was generated with Angular CLI version 13.1.0.

Libraries in this repo

Code for the library(ies) of @ng-ar/md-input, @ng-ar/svg-icon, @ng-ar/input and @ng-ar/bg-svg is(are) included in this repo.

Creating angular workspace without angular app

$ ng new my-workspace --no-create-application
$ cd my-workspace
$ ng generate library my-lib

we can create libraries with angular app also

$ cd my-workspace
$ ng generate library my-lib --prefix demo 

ng g lib my-lib --prefix demo

This adds a projects directory containing a my-lib directory(library folder) for our newly generated my-workspace Angular workspace.

ng generate application my-app

This adds a my-app directory(application folder) in the projects directory

Generating component, directives, etc. to lib and app

ng g d <directive-name> --project=<project-name>

one example

ng g d directives/input-ref --project=md-input --dry-run

--dry-run flag won't generate anything, but will show in console.

testing library in dev

$ ng build my-lib --configuration development
$ ng test my-lib
$ ng lint my-lib

Building library

ng build my-lib

Serving our appliaction

ng serve my-app

Publishing your library

$ ng build my-lib
$ cd dist/my-lib
$ npm publish

Whwn publishing first time to the public repo of npm, please use the below command.

npm publish --access public

Managing assets in a library

When including additional assets like Sass mixins or pre-compiled CSS. You need to add these manually to the conditional exports in the package.json of the primary entrypoint.

ng-packagr will merge handwritten exports with the auto-generated ones, allowing for library authors to configure additional export subpaths, or custom conditions.

"exports": {
  ".": {
    "sass": "./_index.scss",
  },
  "./theming": {
    "sass": "./_theming.scss"
  },
  "./prebuilt-themes/indigo-pink.css": {
    "style": "./prebuilt-themes/indigo-pink.css"
  }
}

Building and rebuilding your library

ng build my-lib --watch

Linking already built with watch mode to Angular app

$ cd dist/my-lib
$ npm link

Now open the seperate angular app where you want to test it

npm link my-lib

If you already have my-lib it installed through npm

npm uninstall my-lib

add the following to the root package.json file

"scripts": {
  ...
  "build_lib": "ng build my-lib",
  "npm_pack": "cd dist/my-lib && npm pack",
  "package": "npm run build_lib && npm run npm_pack"
},

npm install ../angular-lib-demo/dist/my-lib/my-lib-0.0.1.tgz

import { AngularLibDemoModule } from 'my-lib';

Deploy to GitHub Pages

1. To begin, add the angular-cli-ghpages builder.

ng add angular-cli-ghpages

2. If you’re deploying the project to a Github project page you’ll need to set the baseHref property as the repository name. The baseHref will be used for all relative URLs on your site. You could specify the baseHref as part of the project architect deploy options in the angular.json file. Or just pass it as the --base-href flag to the ng deploy command. If you’re deploying the project to a Github user page, you do not need to set this option.

ng deploy --base-href=/<repository-name>/

GitHub will automatically enable Pages when you push a gh-pages branch. There is no need to enable Pages from the repository settings.

ng deploy --base-href=/angular-lib-demo/

Support Docs

• Creating libraries - Official
• The Angular Library Series - Creating a Library with Angular CLI
• Create your Angular Library and linking
• Material Icons' Symbols
• Material Icons Guide
• 'angular-svg-icon' repo
• Angular: Using custom made SVG icons through Angular Material
• Material Icon - custom icons
• Free Svg Repo
• Hex Color To CSS Filter Converter
• Free svg background - heazy
• Free svg background - haikei