angular-module-library - Template para generar librerias de angular

Template para librerias de Angular compatibles con AOT/JIT, SCSS-styles externos y HTML-templates.

Main Features

• AOT/JIT compatible library build via Angular Compiler (ngc).
• UMD build via Webpack that allows you to use your library for browser builds. You may play with it on Plunker.
• Testing with Karma and Jasmine.
• Test coverage report via Istanbul.
• Watch modes for building and testing procedures that makes developing process easier.
• Linting with TSLint and Codelyzer for static code analysis.
• Exploring your build via Sourcemap Explorer that shows you a treemap visualization to help you debug where all the code is coming from.
• Documentation generation via Compodoc. Take a look at documentation example.
• Documentation hosting via GitHub Pages.
• AOT/JIT/UMD demos via Webpack and SystemJS that allows you to test library builds.
• Continuous integration with Travis CI.
• Code coverage badge via Codecov as a reminder to cover code with tests.

File Structure

angular-library-seed
  ├─ src                          * Library sources home folder (THE PLACE FOR YOUR LIBRARY SOURCES)
  |  ├─ components                * Library components with tests
  |  ├─ services                  * Library services with tests
  |  ├─ index.ts                  * Library entry point that is used by builders
  |  └─ module.ts                 * Library module
  |
  ├─ .editorconfig                * Common IDE configuration
  ├─ .gitignore	                  * List of files that are ignored while publishing to git repo
  ├─ .npmignore                   * List of files that are ignored while publishing to npm
  ├─ .travis.yml                  * Travic CI configuration
  ├─ LICENSE                      * License details
  ├─ README.md                    * README for you library
  ├─ gulpfile.js                  * Gulp helper scripts
  ├─ library-package.json         * Package configuration for your library
  ├─ template-package.json        * NPM dependencies, scripts for the template
  ├─ karma-test-entry.ts          * Entry script for Karma tests
  ├─ karma.conf.ts                * Karma configuration for our unit tests
  ├─ package.json                 * NPM dependencies, scripts and package configuration
  ├─ tsconfig-aot.json            * TypeScript configuration for AOT build
  ├─ tsconfig.json                * TypeScript configuration for UMD and Test builds
  ├─ tslint.json                  * TypeScript linting configuration
  ├─ webpack-test.config.ts       * Webpack configuration for building test version of the library
  ├─ webpack-umd.config.ts        * Webpack configuration for building UMD bundle
  └─ yarn.lock                    * Yarn lock file that locks dependency versions

Getting Started

Dependencias

Node/NPM

Instalar la ultima version de Node y NPM siguiendo las instrucciones. Versiones Node ≥ 7.0 y NPM ≥ 4.

Gulp

Gulp.js Gulp.js es un build system(sistema de construcción) que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más.

Instalar Gulp npm install gulp-cli -g.

Yarn

Yarn package manager Yarn es un administrador de dependencias open source y fue creado por miembros de Facebook y Google, su principal característica es la rápidez. Más ventajas.

Instalar Yarn siguiendo las instrucciones para windows, despues de instalar reinciar el equipo.

Instalación

• fork el repositorio.
• clone localmente.
• Modifica library-package.json agregando los campos name, version, keywords, description, author, repository, homepage. Para mas información puedes consultar la documentacion de npm package.json handling.
• yarn install para instalar las dependencias requeridas para realizar el merge-json.
• gulp merge-json para integrar el archivo package.json.
• yarn install volver a correr comando para actualizar las dependencias requeridas después de realizar el merge de package.json.

Libreria de ejemplo

En este repositorio encontraras un proyecto de ejemplo, con la estructura para poder generar un modulo con sus respectivos componentes y servicios.

Build the library

• yarn build for building the library once (both ESM and AOT versions).
• yarn build:watch for building the library (both ESM and AOT versions) and watch for file changes.

You may also build UMD bundle and 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.
• yarn build:umd - for building UMD bundle only.
• yarn build:umd:watch - the same as previous command but in watch-mode.

Other commands

Lint the code

• yarn lint for performing static code analysis.

Test the library

• yarn test for running all your *.spec.ts tests once. Generated code coverage report may be found in coverage folder.
• yarn test:watch for running all you *.spec.ts and watch for file changes.

Generate documentation

• yarn docs for generating documentation locally.

Explore the bundle

• yarn explorer to find out where all your code in bundle is coming from.

Bump library version

• npm version patch to increase library version. More on bumping.

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.

Cleaning

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