HazDev Angular Template
An Angular library providing common headers, footers, and USWDS setup for HazDev web apps.
Requirements
Your application must use the same Angular version as hazdev-ng-template. If you are using an older version of Angular, it might install an outdated version of the library or fail to install; if you are using a newer version, it will fail to install.
Your application must use SCSS for its main stylesheet. Installing the library
will fail if it cannot find styles.scss
or similar.
This library is only meant to be installed in applications, not other libraries.
Creating a new application that fits these requirements
npx -p @angular/cli@ANGULAR_VERSION_GOES_HERE ng new --style scss
Installation
Make sure your package manager is configured to look for @ghsc
-scoped packages
in the code.usgs.gov registry; e.g. for npm
, ensure
your project's .npmrc
contains the following line:
@ghsc:registry=https://code.usgs.gov/api/v4/packages/npm/
From your project directory, run:
ng add @ghsc/hazdev-ng-template
If you are working in a repository with multiple projects, specify which one to install into:
ng add @ghsc/hazdev-ng-template --project my-app
Usage
Wrap your app content in a <hazdev-template>
. Example:
<hazdev-template [showSearch]="..." [showSocialLinks]="...">
<router-outlet></router-outlet>
</hazdev-template>
Inputs
Name | Type | Description | Default |
---|---|---|---|
showSearch |
boolean |
Displays a search bar in the header that searches www.usgs.gov (always hidden on narrow viewports) | true |
showSocialLinks |
boolean |
Displays USGS social media links in the footer | true |
Development
Running the example application
The repository includes an example application using the template library. Run it with:
npm run start
The start
script handles watching the library build alongside the application
server. Don't use ng serve
by itself, or changes to the library code won't be
reflected in the application.
Publishing versions
In order to release a new version of the package, create a tag named as the version number, either by creating a release in GitLab or manually with Git commands.
git tag X.Y.Z
git push --tags
The major version number should be the same as the major version of Angular the library is built for.
Testing Changes Locally
-
Build local package for
hazdev-ng-template
:- Clone local copy of hazdev-ng-template someplace locally:
git clone <GIT_ORIGIN_TEMPLATE_URL> .
cd hazdev-ng-template
- Pull changes to test:
git checkout <GIT_BRANCH>
- Install dependencies:
npm install
- Build project:
npm run build -- hazdev-ng-template
- Build schematic:
./projects/hazdev-ng-template/build-schematics.sh
- Bump version:
cd dist/hazdev-ng-template
npm version --no-git-tag <VERSION>
- Package dist:
npm pack
- Clone local copy of hazdev-ng-template someplace locally:
-
Install local package in application, e.g.
earthquake-eventpages
project:cd ../earthquake-eventpages
npm install ../dist/hazdev-ng-template/ghsc-hazdev-ng-template-<VERSION>.tgz
-
Test it out:
npm start