@comparenetworks/imsmart

Todos

• Figure out macs implementation

Consuming IMSmart

To install this library, run:

$ npm install @comparenetworks/imsmart --save

If you need a prior version of the package use following syntax:

$ npm install <package>@<version> --save
$ npm install @comparenetworks/[email protected] --save //example

and then from your Angular AppModule:

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

import { AppComponent } from './app.component';

// Import IMSmart + any additional services you will utilize
import { IMSmart, SampleService } from '@comparenetworks/imsmart';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify IMSmart as an import
    IMSmart
  ],
  providers: [
    //services go here
    SampleService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once IMSmart is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>

Each service you will be using must be imported seperately. Remember to place each in the providers array as well so its available throughout your application. Individual components using the service will need to import it as well just like normal.

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To publish to npm

• Update package.json version number in src folder then

$ npm publish dist --access restricted

To lint all *.ts files:

$ npm run lint

Render Docs

$ npm run docs:build
$ npm run docs:serve

• Head over to http://localhost:8080/ to see the docs

Creating Custom Library Items

• Place desired components, services, pipes, and directives in their corresponding folders in the src directory.
• Required dependencies need to be tested to make sure they place nice with the rest of the module with regards to versioning. They can be imported into the index.ts module to expose their components/services.
• Components, pipes, and directives must be listed in the declarations and exports prop arrays.
• All must be both imported + exported from the module.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

//components
import { SampleComponent } from './components/sample.component';

//directives
import { SampleDirective } from './directives/sample.directive';

//pipes
import { SamplePipe } from './pipes/sample.pipe';

//services
import { SampleService } from './services/sample.service';

export * from './components/sample.component';
export * from './directives/sample.directive';
export * from './pipes/sample.pipe';
export * from './services/sample.service';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [ //add components, directives, pipes
    SampleComponent,
    SampleDirective,
    SamplePipe
  ],
  exports: [ //add components, directives, pipes
    SampleComponent,
    SampleDirective,
    SamplePipe
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ], //allows for non angular custom element names
})
export class IMSmart {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: IMSmart,
      providers: []
    };
  }
}

Versioning

• For our module to play nice with our applets we should look into a standard boiler with consistent versioning on dependencies. Easy for things to not play nice without explicit versioning. Will need to consider standards for this.
• Try and use explicit version numbers on dependencies instead of carats/tildes (which might push them to an unsupported level)

If committing to the repo please add the version # to your commit comment to keep track of changes