It was suggested on the Angular 2 Password Strength Bar post that I publish the component as an NPM package. This sounded like a good sharing idea and it was something I've never done before. So, here it is.
You should go to the Github repository and inspect the code directly. I'm just going to note some non-obvious details here.
Application Notes:
- Added in-line CSS with the @Component styles metadata property.
- In addition to passwordToCheck, added client configurable barLabel parameter.
Project Notes:
- src: This is where the PasswordStrengthBar component (passwordStrengthBar.component.ts) is. The CSS and HTML are embedded directly in the @Component metadata. Also, note that the tsconfig.json compiles the Typescript to ../lib which is what is distributed to NPM (app and src are excluded in .npmignore).
- The index.d.ts and index.js in the root directory reference ./lib to allow importing the component without having to specify a Typescript file. See the How TypeScript resolves modules section in TypeScript Module Resolution. I.e. after the npm installation is complete you just need this:
|
1 |
import { PasswordStrengthBar } from 'ng2-password-strength-bar'; |
- app: Contains a test application component (app.ts) and Karma unit (passwordStrengthBar.spec.ts) and integration (app.spec.ts) tests. These are very simple tests just to demonstrate a testing structure for a component like this.
- Tests are run on Github commits with Travis CI -- see the .travis.yml configuration file.
Development Notes:
Overall (and briefly), I find the Typescript/Javascript tooling very frustrating. I'm not alone, e.g.: The Controversial State of JavaScript Tooling. The JSON configuration files (npm (package.json), Typescript, Karma, Webpack, etc.) are complex and the documentation is awful.
The worst part (IMO) is how fragile everything is. It seems like the tools and libraries change rapidly and there's no consideration for backward compatibility or external dependencies. Updating versions invariably breaks the build. On-line fixes many times take you down a rabbit hole of unrelated issues. If you're lucky, the solution is just to continue to use an older version. Use npm-check-updates at your own risk!
Feedback:
If you have questions or problems, find a bug, or have suggested improvements please open an issue. Even better, fork the project, make the desired changes and submit a pull request.
Enjoy!
