Onguard Components Library

What is this repository for?

This repository is an Angular Library project. Components, Directives, Pipes and Services that are shared across the suite of OnGuard projects should be built here.

References

• How to Build a Library for Angular Apps

• Angular Creating Libraries

• Angular Library Guide

• Storybook Angular Intro

• Using a Private npm Library with Docker

How do I get set up?

Install Project Requirements

• Node and npm Install with nvm

• Optional

  • Make
    • Default on Mac
    • Install on Windows with this Chocolatey Package

Run the Storybook View

1. Install expected version of node nvm use
2. Install Dependencies make npm-install OR npm install && cd projects/onguard-components && npm install
3. Run the Project npm run storybook

Contributing

Source Control Guidelines

When starting a task or feature, create a new feature branch off of develop. This is best accomplished with git flow or with Atlassian SourceTree

The workflow is outlined in detail in Atlassian's Docs.

Generally feature branches should include the JIRA task id followed by an underscore '_' and then a Snake Cased description. git flow feature start <TASK ID>_Description-of-task

New Angluar Files

When creating a module, component, directive, pipe, or service be sure to leverage the Angular CLI's generate command

ng generate component components/<path-to-location>/component/name
ng generate module components/<path-to-location>/module-name
ng generate directive directives/<path-to-location>/directive-name

Modules

To allow Angular's tree shaking to optimize the size of this library when imported into another project, Each Component, Pipe and Directive should have it's own Module. This file will be used to import any other dependencies of its corresponding Component/Directive. Basic Example

Storybook

Each Angular Component has its own .stories.ts file. These Files define implementations of each component. Think of these as visual test cases. In fact, it's possible to set up unit tests on these stories to check for specific behaviour. The benefit is that the story does all of the component setup for you and the test can essentially just be an assertion. Basic Example Multi-template Example

Folder Structure for Components

• component-name
  • component-name.component.html
  • component-name.component.scss
  • component-name.component.spec.ts
  • component-name.component.ts
  • component-name.module.ts
  • component-name.stories.ts

Linking this library to an angular application

1. Build the project

2. navigate to the dist directory cd projects/onguard-components/dist

3. Create a link npm link.

4. From the project that you would like to consume this library, run npm link @creedinteractive/onguard-components

5. Make sure that symlinks are preserved on the project consuming this library in angular.json

6. Consume assets from the library by adding an object to your angular.json

   {
       "architect": {
           "build": {
               "options": {
                   "preserveSymlinks": true,
                   "assets": [
                        {
                            "glob": "**/*",
                            "input": "./node_modules/@creedinteractive/onguard-components/public/assets",
                            "output": "/assets"
                        }
                    ],
                }
            }
       }
   }

Dependency Organization

The angular workspace with sub-libraries might be confusing at first. The goal is that all dependencies are maintained at the root level and each library project only specifies peer dependencies that it needs to function.

Stack Overflow Reference The project should only have one "node modules" folder at the root level. The second level should essentially just have peer dependencies

What if you need to import a style sheet from node modules. No problem, just make sure that the relative path points to the (only) node_modules folder at the workspace root.

Fixing build warnings

WARNING: No name was provided for external module 'd3' in output.globals – guessing 'd3

Fix by adding a unique name identifier explicitly to the library's package.json file in the ngPackage section

"ngPackage": {
    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
    "dest": "./dist",
    "assets": [
      "public/assets/**/*"
    ],
    "lib": {
      "entryFile": "src/public_api.ts",
      "umdModuleIds": {
        "moment": "moment"
        "d3": "d3"
      }
    }
  },