AngularPackageTemplate

This is the angular package template project. Generated with Angular CLI v 1.6.8

You can use this project to create custom components, services, pipes and directives.

Please follow this README for detailed instructions on how to create these custom packages.

Create a Component

Run ng generate component modules/component-name to generate a new component.

Replace component-name with the name of your component.

All component names should be kebab cased and may not include the word component.

Ex:

ng generate component modules/ac-slider-textbox

Where the ac indicates the scope. In this case ac is short for Allegiace Consulting You can also generate a component by using the shorthand ng g component modules/ac-slider-textbox where g stands for generate.

Please don't delete the default app component files as you will be using them to test your package.

Create a Module

You have generated a component it is now time to generate a module, use the following command:

ng g module modules/module-name

Replace module-name with the same name as the component, in this case it would be

ng g module modules/ac-slider-textbox

Build Component

Now build your component - this step is unique to each new component.

Add Component to Module

After your component is done it is time to add it to the correct module.

Open ac-slider-textbox.module.ts file and add the component to the import statements. You want it to represent something similar to this except it should contain you component name import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';

import { AcSliderTextboxComponent } from './ac-slider-textbox.component';

@NgModule({ imports: [ CommonModule ], declarations: [ AcSliderTextboxComponent ], exports: [ AcSliderTextboxComponent ] }) export class AcSliderTextboxModule { }

Playground Test

You have to test your component in the app component file before you package it and run the neccessary linting and unit tests.

In your app.module.ts file import your specific module.

In this case it would look something like this:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppComponent } from './app.component'; import { AcSliderTextboxModule } from './modules/ac-slider-textbox/ac-slider-textbox.module';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AcSliderTextboxModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

In your app.component.html file you would include it by it's selector, in this case it would be <ac-slider-textbox></ac-slider-textbox> you would also pass in and bind to any Input or Output variables at this stage.

Lint Your Package

Test you application and if it you are happy run the following command to lint your package. ng lint Make sure it says All files pass linting. If it does not fix the issues.

Create Unit Tests

//Run Unit tests.

Export your Package

In the public_api.ts file add your export statement In this case it would be export * from './src/app/modules/ac-slider-textbox.module'

Release version & naming

Open the package.config file. If this is the first version of your package set the version to "version": "1.0.0" If this is not the first version apply the correct versioning:

major.minor.maintenance

If you have a new release that might break previous functionality increase the major number, the same goes for minor, in the case of a minor release there may not be any breaking changes to people consuming your previous package - meaning no dependancy changes. Increase the mainenance tag for small fixes and or patches.

Also rename the name of the package to the appropriate name in this case it would be "name": "ac-slider-textbox".

Add/Update README

Replace the contents of this README file with the specific README documentation of your package.

Commit files

Please make sure you have created a feature branch in this case it would be package/ac-slider-textbox

Commit your files and push them.

Build Agents

As soon as you push the build agent will pick up your package and scaffold and build it.

When it is done it will deploy your package to nexus.

This package can then be installed using the following command npm install my-package optionally your can select the version to install npm install [email protected] and it will install that version for you.