README.old.md

Introduction

Angular Starter Lib Pack For Angular 2 (and beyond provides the fast, reliable and extensible starter for the development of Angular 2 (and beyond) Libraries.

angular-lib-starter-pack

Current Version

7.2.0

You can use angular-cli for making libs

You can create library with angular-cli, look at documentation.

Quick Start

# Clone
$ git clone https://github.com/vyakymenko/angular-lib-starter-pack.git

# Go to repository folder
$ cd angular-lib-starter-pack

# Install
$ npm install

# Build your awesome library
$ npm run build

# Publish your package
$ npm publish # WARNING: Don't forget to modify your package.json before publishing

Out of the box

• AOT/JIT/UMD Compatible
• Continuous Integration supported by Travis CI
• Automate your npm dependency management supported by Greenkeeper
• Automatically generated documentation supported by Compodoc
• Static code analysis supported by Codelyzer and TSLint
• Analyze and debug your library with Sourcemap Explorer
• Test your library (In development)
• Run E2E tests for your library (In development)

Start Development your Angular Library

• In webpack.umd.config.ts replace library: hello-world to new of your new library.
• In src/ directory rename your file to your-awesome-library.module.ts.
• In your-awesome-library.module.ts don't forget to update module name per Angular Style Guide to YourAwesomeLibraryModule.
• After we need to configure our package.json
• In package.json configure fields like name, version, keywords, description etc. More details you can reed here.
• Note Your library must have index.ts file as an entry point for further building.

Commands List

Build

• $ npm run build - building AOT/JIT and UMD bundle.
• $ npm run build:watch - building AOT/JIT and UMD bundle in watch-mode.

Target Build

• $ npm run build:esm - building AOT/JIT.
• $ npm run build:esm:watch - building AOT/JIT in watch-mode.
• $ npm run build:umd - building UMD bundle.
• $ npm run build:umd:watch - building UMD bundle in watch-mode.

Lint

• $ npm run lint - lint your TypeScript files.

Source Maps Explorer

• $ npm run explore - explore your library sources.

Documentation

• $ npm run docs - generating local documentation.
• $ npm run gh-pages - generating documentation and uploading it to GitHub Pages.

Publish library to NPM

• $ npm publish - publish your library sources on npmjs.com. After publishing library will be available in npm packages.
• NOTE: prepublishOnly script will automatically run and build your library before publishing.

Clean

• $ npm clean - clean up all temporary files.

Test your library with Angular-CLI

• If you don't have it npm install -g @angular/cli.
• Generate angular project with ng new LibraryTestProject.
• Go to your test project cd LibraryTestProject.
• Install you awesome library npm install your-awesome-library.
• Inside Angular application import YourAwesomeModule and use you library:

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { YourAwesomeModule } from 'your-awesome-library';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      YourAwesomeModule,
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

Test your library with Angular Seed or Angular Seed Express

• After clone angular-seed let's config our project:
• In project.config.ts configure:

    ...

    // Add packages (e.g. ng2-translate)
    const additionalPackages: ExtendPackages[] = [
      {
      name: 'angular-lib-starter-pack',
      // Path to the package's bundle
      path: 'node_modules/angular-lib-starter-pack/dist/index.umd.js'
    }
    ];

    this.addPackagesBundles(additionalPackages);
    
    ...

• Inside Angular application import YourAwesomeModule and use you library:

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { YourAwesomeModule } from 'your-awesome-library';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      YourAwesomeModule,
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

TODO

• Unit Testing
• E2E Testing

Contributing

Please see the CONTRIBUTING file for guidelines.

License

MIT