Mi Águila Kit

Component prefix

The prefix for a component selector is ma which represents from Mi Aguila:

e.g. ma-button, ma-input, ma-badge

Why? Prevents element name collisions with components in other apps and with native HTML elements.

Why? Makes it easier to promote and share the component in other apps.

Why? Components are easy to identify in the DOM.

reference: Style 02-07

Add a new UI Component in the Library

1. Run the following command on the root:

ng g component <component-name> --project=ui-component-library

2. Add new component in exports array list:

import { NgModule } from '@angular/core';
import { ButtonComponent } from './button/button.component';
import { InputComponent } from './input/input.component';
import { NewComponent } from './new/new.component';

@NgModule({
  declarations: [ButtonComponent, InputComponent, BadgeComponent],
  imports: [
  ],
  exports: [ButtonComponent, InputComponent, NewComponent] // Added NewComponent in exports array
})
export class UiComponentLibraryModule { }

3. Add new component in public_api.ts in order to make it public:

export * from './lib/button/button.component';
export * from './lib/input/input.component';
export * from './lib/new/new.component'; // Added new component

export * from './lib/ui-component-library.module';

Build the Library

Run the following command on the root to build the library:

ng build ui-component-library

The build artifacts will be stored in the dist/ directory.

Publish new library version

Run the following command on dist/ui-component-library/ to publish the library:

npm publish

NOTE: Ensure the library's package.json field version was increased to avoid the following error:

You cannot publish over the previously published versions: 0.0.X. : ui-component-library

This project was generated with Angular CLI version 7.3.4.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.