Generator Angular Package

This generator will make a very simple structure to build you own Angular packages for distribution.

Installation

First, install Yeoman and generator-angular-pkg using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-angular-pkg

Then generate your new package:

yo angular-pkg

Development

Commands available for package development

Within the package directory there are a number of commands to help you develop and launch a new package. Several gulp tasks are available to manage the package:

$ gulp --tasks
├── clean
├── copy-html-css
├── transpile
├── rollup
├── replace-ng-template-styles
├── minify
├── copy-package
└── default

• clean: Clears the dist directory (packages releases directory).
• transpile: Compiles the typescript files for javascript with AoT support.
• copy-html-css: Copy the template and css files to directory dist from the package.
• rollup: Generates a package bundle using the UMD format.
• minify: Compresses the generated bundle through the rollup.
• replace-ng-template-styles: Task that corrects a problem with the search of templates with relative path (mandatory in the angular). Make templateUrl replace for template: require ('template.html') and styleUrls for styles: [require ('styles.css')].
• copy-package: Copy package_dist.json to directory dist from the package.
• dev: Starts a watcher that monitors changes to the code and generates a new test release.
• build: Task that is executed when no specific task is passed as parameter. Execute in sequence:
  1. clean
  2. transpile
  3. copy-html-css
  4. rollup
  5. minify
  6. replace-ng-template-styles
  7. copy-package

Testing the package

After generating the build with gulp build or gulp dev you can test the packages locally by making a link through NPM or Yarn. Both NPM and Yarn have the link and unlink command to make local packages available for local installation.

With the build generated in .dist / <package-name> in the root of the repository, you will enter the package directory and execute:

$ yarn link

or

$ npm link

After successfully generating the link, just go to the project directory and run:

yarn link <package-name>

Making a distribution

To make a release build for a packag just use gulp command without parameters.

cd package-directory
gulp

This command will generate a distribution folder of the package inside dist directory.

Travis and Coverage

to have in your README file the build and coverage status, you just need to configure them.

links: [Build Status] https://travis-ci.org/ [Coverage Status] https://coveralls.io/

This command will generate a distribution folder of the package inside dist directory.

Publishing package

To publish a packge you need go to the package dist path and run npm publish or yarn publish:

cd dist/<package-name>
npm publish

License

MIT © Hersonls