bcgov / gcpe-nrms-frontend

The front end Angular 6 application for the News Release Management System (NRMS)

gcpe-NRMS-frontend

The frontend Angular 6 application for the News Release Management System (NRMS)

Prerequisites

This project was generated with Angular CLI version 6.1.4 and requires the following:

Node and NPM

Node Version Requirement

Angular CLI and the generated project requires Node 8.9 or higher, together with NPM 5.5.1 or higher. You can manage multiple versions of Node on the same machine with nvm or nvm-windows.

You’ll need to have Node on your local development machine (but it’s not required on the server).

Yarn

To install Yarn:

npm install -g yarn

Yarn is a package manager for your code (like npm). Yarn is fully backward compatible with the npm package manager structure.

Angular CLI

To install the Angular CLI:

npm install -g @angular/cli
# OR
yarn global add @angular/cli

After installation, you will have access to the ng binary in your command line. You can verify that it is properly installed by simply running ng, which should present you with a help message listing all available commands.

You can check you have the right version with this command:

ng -v

Getting Started

From your command line:

# Clone this repository
git clone https://github.com/bcgov/gcpe-NRMS-frontend

# Go into the repository
cd gcpe-NRMS-frontend

# Install dependencies
npm install -g @angular/cli yarn
yarn install

# Build from source
npm run build

# Run the app
npm start

Development

Running in development mode

npm start

Runs the app in development mode. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

To build the project:

ng build

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

Use the --prod flag for a production build.

Linting

From your command line:

npm run lint

This will lint your app code using TSLint. Linting rules are specified in tslint.json

Code scaffolding

To generate a new component:

ng generate component <component-name>

You can also use ng generate directive|pipe|service|class|guard|interface|enum|module

Examples

Generate a customer component

ng generate component customer

Generate a directive: search-box

ng generate directive search-box

Generate a service: general-data

ng generate service general-data

Angular will give out a warning line after this command,

"WARNING - service is generated but not provided, it must be provided to be used"

After generating a service, you must go into the parent module and add the service to the providers array.

Generate a service and include it in a module automatically

ng generate service general-data2 -m app.module

Generate a class, an interface and enum

# class
ng generate class models/customer

# interface
ng generate interface models/person

# enum
ng generate enum models/gender

Generate a pipe

ng generate pipe shared/init-caps

Generate a module

ng generate module login/login.module

The CLI creates a login directory and generates a login module in that directory

Add Routing Features

ng generate module admin --routing

Generates a module called admin and adds routing feature to it.

Further help

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

Testing

Running unit tests

npm run test

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false or --single-run.

Running end-to-end tests

npm run e2e

Before running the tests make sure you are serving the app via ng serve. End-to-end tests are run via Protractor.

Writing tests

Place your test files next to the tested modules using some kind of naming convention, like <module_name>.spec.ts. Your tests should live together with the tested modules, keeping them in sync. It would be really hard to find and maintain the tests and the corresponding functionality when the test files are completely separated from the business logic.

Folder Structure

angular.json                  - Configuration for Angular CLI
tsconfig.json                 - TypeScript compiler configuration for your IDE
├───node_modules/             - Where npm-installed modules end up going
├───e2e/                      - End-to-end (functional) tests
├───openshift/                - OpenShift-specific files
│   ├───scripts               - Helper scripts
│   └───templates             - Application templates
├───dist/                     - Distributable files (.js)
└───src/                      - Source files (.ts)
    ├───app                   - Root of the frontend application
    ├───assets                - Public HTML assets (e.g. images, css)
    └───environments          - Configuration variables to use in your application

Running in Docker

The following instructions provide details on how to deploy the project using Docker Compose. This method of deployment is intended for local development and demonstration purposes. It is NOT intended to be supported in production level deployments where security, availability, resilience, and data integrity are important.

All application services are exposed to the host so they may be easily accessed individually for development and testing purposes.

Starting the project

./start.sh

Docker will serve the application at http://localhost:4200/. The app will automatically reload if you change any of the source files.

Stopping the project

./stop.sh

Troubleshooting

To verify which containers are running:

# List the currently running containers.
docker ps

# List all containers.
docker ps -a

To launch an interactive shell on the frontend container:

docker exec -it nrms-frontend bash

This will launch a bash shell that is running within the container, allowing you to inspect the internal files and folders within the container.

OpenShift Deployment

See OpenShift README

Common Issues

Not working on Internet Explorer? Or older browser versions?

Enable the legacy browser polyfills. See /src/polyfills.ts for instructions.

Useful resources

• Angular - Frontend framework
• Angular CLI - Tool to initialize, develop, scaffold and maintain Angular applications
• TypeScript - Typed superset of JavaScript that compiles to plain JavaScript
• Jasmine, Karma, Protractor - Unit Tests
• Docker - Containers

Getting Help or Reporting an Issue

To report bugs/issues/feature requests, please file an issue.

How to Contribute

If you would like to contribute, please see our CONTRIBUTING guidelines.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

License

Copyright 2018 Province of British Columbia

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

gcpe-nrms-frontend's Issues

Add missing topics

TL;DR

Topics greatly improve the discoverability of repos; please add the short code from the table below to the topics of your repo so that ministries can use GitHub's search to find out what repos belong to them and other visitors can find useful content (and reuse it!).

Why Topic

In short order we'll add our 800th repo. This large number clearly demonstrates the success of using GitHub and our Open Source initiative. This huge success means its critical that we work to make our content as discoverable as possible; Through discoverability, we promote code reuse across a large decentralized organization like the Government of British Columbia as well as allow ministries to find the repos they own.

What to do

Below is a table of abbreviation a.k.a short codes for each ministry; they're the ones used in all @gov.bc.ca email addresses. Please add the short codes of the ministry or organization that "owns" this repo as a topic.

That's in, you're done!!!

How to use

Once topics are added, you can use them in GitHub's search. For example, enter something like org:bcgov topic:citz to find all the repos that belong to Citizens' Services. You can refine this search by adding key words specific to a subject you're interested in. To learn more about searching through repos check out GitHub's doc on searching.

Pro Tip 🤓

• If your org is not in the list below, or the table contains errors, please create an issue here.

• While you're doing this, add additional topics that would help someone searching for "something". These can be the language used javascript or R; something like opendata or data for data only repos; or any other key words that are useful.

• Add a meaningful description to your repo. This is hugely valuable to people looking through our repositories.

• If your application is live, add the production URL.

Ministry Short Codes

Short Code	Organization Name
AEST	Advanced Education, Skills & Training
AGRI	Agriculture
ALC	Agriculture Land Commission
AG	Attorney General
MCF	Children & Family Development
CITZ	Citizens' Services
DBC	Destination BC
EMBC	Emergency Management BC
EAO	Environmental Assessment Office
EDUC	Education
EMPR	Energy, Mines & Petroleum Resources
ENV	Environment & Climate Change Strategy
FIN	Finance
FLNR	Forests, Lands, Natural Resource Operations & Rural Development
HLTH	Health
FLNR	Indigenous Relations & Reconciliation
JEDC	Jobs, Economic Development & Competitiveness
LBR	Labour Policy & Legislation
LDB	BC Liquor Distribution Branch
MMHA	Mental Health & Addictions
MAH	Municipal Affairs & Housing
BCPC	Pension Corporation
PSA	Public Safety & Solicitor General & Emergency B.C.
SDPR	Social Development & Poverty Reduction
TCA	Tourism, Arts & Culture
TRAN	Transportation & Infrastructure

NOTE See an error or omission? Please create an issue here to get it remedied.

It's Been a While Since This Repository has Been Updated

This issue is a kind reminder that your repository has been inactive for 401 days. Some repositories are maintained in accordance with business requirements that infrequently change thus appearing inactive, and some repositories are inactive because they are unmaintained.

To help differentiate products that are unmaintained from products that do not require frequent maintenance, repomountie will open an issue whenever a repository has not been updated in 180 days.

• If this product is being actively maintained, please close this issue.
• If this repository isn't being actively maintained anymore, please archive this repository. Also, for bonus points, please add a dormant or retired life cycle badge.

Thank you for your help ensuring effective governance of our open-source ecosystem!

Add project lifecycle badge

No Project Lifecycle Badge found in your readme!

Hello! I scanned your readme and could not find a project lifecycle badge. A project lifecycle badge will provide contributors to your project as well as other stakeholders (platform services, executive) insight into the lifecycle of your repository.

What is a Project Lifecycle Badge?

It is a simple image that neatly describes your project's stage in its lifecycle. More information can be found in the project lifecycle badges documentation.

What do I need to do?

I suggest you make a PR into your README.md and add a project lifecycle badge near the top where it is easy for your users to pick it up :). Once it is merged feel free to close this issue. I will not open up a new one :)

It's Been a While Since This Repository has Been Updated

This issue is a kind reminder that your repository has been inactive for 400 days. Some repositories are maintained in accordance with business requirements that infrequently change thus appearing inactive, and some repositories are inactive because they are unmaintained.

To help differentiate products that are unmaintained from products that do not require frequent maintenance, repomountie will open an issue whenever a repository has not been updated in 180 days.

• If this product is being actively maintained, please close this issue.
• If this repository isn't being actively maintained anymore, please archive this repository. Also, for bonus points, please add a dormant or retired life cycle badge.

Thank you for your help ensuring effective governance of our open-source ecosystem!

It's Been a While Since This Repository has Been Updated

This issue is a kind reminder that your repository has been inactive for 402 days. Some repositories are maintained in accordance with business requirements that infrequently change thus appearing inactive, and some repositories are inactive because they are unmaintained.

To help differentiate products that are unmaintained from products that do not require frequent maintenance, repomountie will open an issue whenever a repository has not been updated in 180 days.

• If this product is being actively maintained, please close this issue.
• If this repository isn't being actively maintained anymore, please archive this repository. Also, for bonus points, please add a dormant or retired life cycle badge.

Thank you for your help ensuring effective governance of our open-source ecosystem!

Add project lifecycle badge

No Project Lifecycle Badge found in your readme!

Hello! I scanned your readme and could not find a project lifecycle badge. A project lifecycle badge will provide contributors to your project as well as other stakeholders (platform services, executive) insight into the lifecycle of your repository.

What is a Project Lifecycle Badge?

It is a simple image that neatly describes your project's stage in its lifecycle. More information can be found in the project lifecycle badges documentation.

What do I need to do?

I suggest you make a PR into your README.md and add a project lifecycle badge near the top where it is easy for your users to pick it up :). Once it is merged feel free to close this issue. I will not open up a new one :)