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

• 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

Links

• (DISCLAIMER)[https://code.usgs.gov/ghsc/hazdev/hazdev-ng-template/-/raw/main/DISCLAIMER.md]
• (LICENSE)[https://code.usgs.gov/ghsc/hazdev/hazdev-ng-template/-/raw/main/LICENSE.md]