BC Gov News Dashboard frontend application for keeping Ministry Offices and stakeholders informed. This application is built with Angular 10.
This project was generated with Angular CLI version 10.0.4 and requires the following:
Node Version Requirement
Angular CLI and the generated project requires Node 10.0 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.
:warning: NOTE: You’ll need to have Node on your local development machine (but it’s not required on the server).
To install the Angular CLI:
npm install -g @angular/cliAfter 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:
# should be 7.0.0 (or greater)
ng versionFrom your command line:
# Clone this repository
git clone https://github.com/bcgov/gcpe-news-dashboard
# Go into the repository
cd gcpe-news-dashboard
# Install dependencies
npm install -g @angular/cli
npm install
# Build from source
npm run build
# Run the app
npm startnpm startRuns the app in development mode. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
To build the project:
# Build in development mode
ng build
# Build in production mode
ng build --prodThe build artifacts will be stored in the dist/ directory.
Use the
--prodflag for a production build.
From your command line:
npm run lintThis will lint your app code using TSLint. Linting rules are specified in tslint.json
To generate a new component:
ng generate component [component-name]You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module
Generate a customer component
ng generate component customerGenerate a directive: search-box
ng generate directive search-boxGenerate a service: general-data
ng generate service general-dataAngular 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
providersarray.
Generate a service and include it in a module automatically
ng generate service general-data2 -m app.moduleGenerate a class, an interface and enum
# class
ng generate class models/customer
# interface
ng generate interface models/person
# enum
ng generate enum models/genderGenerate a pipe
ng generate pipe shared/init-capsGenerate a module
ng generate module login/login.moduleThe CLI creates a login directory and generates a login module in that directory
Add Routing Features
ng generate module admin --routingGenerates a module called admin and adds routing feature to it.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
npm run testTests 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.
npm run e2eBefore running the tests make sure you are serving the app via ng serve. End-to-end tests are run via Protractor.
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.
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 applicationThe 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.
./start.shDocker will serve the application at http://localhost:4200/. The app will automatically reload if you change any of the source files.
./stop.shTo verify which containers are running:
# List the currently running containers.
docker ps
# List all containers.
docker ps -aTo launch an interactive shell on the frontend container:
docker exec -it news-dashboard bashThis will launch a bash shell that is running within the container, allowing you to inspect the internal files and folders within the container.
See OpenShift README
Enable the legacy browser polyfills. See /src/polyfills.ts for instructions.
To report bugs/issues/feature requests, please file an issue.
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.
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.