@what3words/angular-components

Our What3Words Angular package combines both the workspace and project at the same directory level. Angular has the concept of a default application that serves as the root project, however this does not seem possible with libraries [06/03/23]. As such, while our approach is non-standard, it is necessary to allow lerna to correctly link dependencies, access build scripts and version manage the package. There could be unintended consequences of doing things this way, so please report any issues you find will working with this project.

This README is broken into two main sections, Angular Workspace and Angular Components with each describing how both were setup.

Angular Workspace

This project was generated with Angular CLI version 15.2.0.

Setup Notes

The following ordered commands were used to generate this project.

• npx -p @angular/cli ng new angular --no-create-application --skip-tests
• rm -rf .vscode .editorconfig
• npm uninstall jasmine-core @types/jasmine

It may be possible to scaffold a smaller project template, but none that are officially supported/guaranteed to work [27/02/23].

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application 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.

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 a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Angular Components

This library was generated with Angular CLI version 15.2.0.

Setup Notes

The following ordered commands were used to generate this project.

• npx -p @angular/cli ng generate library components --project-root .

Code scaffolding

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

Note: Don't forget to add --project components or else it will be added to the default project in your angular.json file.

Build

Run ng build components to build the project. The build artifacts will be stored in the dist/ directory.

The @what3words/javascript-components library is included as a dependency to ensure that lerna can link the package (??). To enable this, the allowedNonPeerDependencies option in the ng-package config file is set to true. However, this is not a recommended package publishing approach as it can lead to front-end build bugs. This may have an impact on end-consumers of the angular package.

Publishing

After building your library with ng build components, go to the dist folder cd dist/components and run npm publish.

Running unit tests

TBC

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.