onguard-libraries v0.3.4
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 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
- Make
Run the Storybook View
- Install expected version of node
nvm use
- Install Dependencies
make npm-install
ORnpm install && cd projects/onguard-components && npm install
- 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
- Build the project
- navigate to the dist directory
cd projects/onguard-components/dist
- Create a link
npm link
. - From the project that you would like to consume this library, run
npm link @creedinteractive/onguard-components
- Make sure that symlinks are preserved on the project consuming this library in
angular.json
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"
}
}
},
2 years ago