@monsenso/components
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1-prerelease.20 • Public • Published

    angular-component-library

    Requirements

    Tools

    Quick Start

    # Install all dependencies 
    yarn
     
    # Build the library 
    yarn build

    Getting Started

    Build the library

    • yarn build for building the library once.
    • yarn build:watch for building the library and watch for file changes.

    You may also build ESM files separately:

    • yarn build:esm - for building AOT/JIT compatible versions of files.
    • yarn build:esm:watch - the same as previous command but in watch-mode.

    Other commands

    Lint the code

    • yarn lint for performing static code analysis on both typescript files and scss files.

    Lint the typescript code

    • yarn tslint for performing static code analysis on typescript files.

    Lint the SCSS code

    • yarn sass-lint for performing static code analysis on scss files.

    Test the library

    • yarn test for running all your *.spec.ts tests once. Chrome browser is used by default.
    • yarn test:watch for running all your *.spec.ts and watch for file changes.
    • yarn test:safari for running all your *.spec.ts tests once with Safari.
    • yarn test:ie for running all your *.spec.ts tests once with Internet Explorer.
    • yarn test:edge for running all your *.spec.ts tests once with Edge.
    • yarn test:safari for running all your *.spec.ts tests once with Safari.
    • yarn test:all for running all your *.spec.ts tests once with all 4 supported browsers.

    Generate documentation

    • yarn docs for generating documentation in the docs folder.

    Bump library version

    • npm version [<newversion> | major | minor | patch] to increase library version.

    preversion script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing.

    Publish library to NPM

    • This is done automatically on Jenkins. Pre-release is pushed when the develop branch is processed and release is pushed when the master branch is processed.

    Cleaning

    • yarn clean:tmp command will clean up all temporary files like docs, lib, tmp etc.
    • yarn clean:all command will clean up all temporary files along with node_modules folder.

    Library development workflow

    In order to debug the library in your browser you'll need to have an Angular project that will consume your library, build the application and display it. For your convenience all of that should happen automatically in background so once you change library source code you should instantly see the changes in browser.

    There are several ways to go here:

    • Use your real library-consumer project and link your library to it via yarn link command (see below).
    • Use Angular-CLI OR Ionic-CLI to generate library-consumer project for you and then use yarn link to link your library to it.

    Using yarn link

    In you angular-component-library root folder:

    # Create symbolic link 
    yarn link
     
    # Build library in watch mode 
    yarn build:watch

    In you project folder that should consume the library:

    # Link your library to the project 
    yarn link "@monsenso/components"

    Note that this link is removed when yarn install is done on the consumer project. So you must do yarn install before setting up the link.

    Now, once you update your library source code it will automatically be re-compiled and your project will be re-built so you may see library changes instantly.

    More information about yarn link command.

    At the moment of publishing this project there is a bug exists when using yarn link in combination with Angular CLI. The issue is caused by having node_modules folder inside linked library. There is a workaround has been provided that suggests to add a paths property with all Angular dependencies to the tsconfig.json file of the Angular CLI project like so: "paths": { "@angular/*": ["../node_modules/@angular/*"] }

    Known issues

    Images in components

    At the moment angular-component-library does not handle images in components. When a component needs an image file to work this file must be added to the consumer project at the location specified in the component code.

    Keywords

    none

    Install

    npm i @monsenso/components

    DownloadsWeekly Downloads

    1

    Version

    1.1.1-prerelease.20

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    6.88 MB

    Total Files

    31

    Last publish

    Collaborators

    • monsensojenkins