Administrative front-end for the ACRFD (formerly: PRC) application.
Technology | Version | Website | Description |
---|---|---|---|
node | 10.x.x | https://nodejs.org/en/ | JavaScript Runtime |
npm | 6.x.x | https://www.npmjs.com/ | Node Package Manager |
ng | 6.x.x | https://cli.angular.io/ | Angular CLI |
yarn | latest | https://yarnpkg.com/en/ | Package Manager (more efficient than npm) |
Note: This app also requires bcgov/nrts-prc-api to handle its requests and authentication.
Note: Windows users can use NVM Windows to install and manage multiple versions of Node+Npm.
Note: Use @angular/cli
. Do not use @angular/angular-cli
.
npm install -g @angular/cli
npm install -g yarn
yarn install
npm start
Go to http://localhost:4200 to verify that the application is running.
Note: To change the default port edit angular.json
.
yarn install
Run the build
The build artifacts will be stored in the ./dist/
directory.
npm run build
--prod
flag to run the app in prod mode
ng serve --prod
Linting and formatting is handled by a combiation of TSlint
and Prettier
. The reason for this, is that you get the best of both worlds: TSlint's larger selection of linting rules with Prettier's robust formatting rules.
These 2 linters (tslint, Prettier) do have overlapping rules. To avoid weird rule interactions, TSlint has been configured to defer any overlapping rules to Prettier, via the use of tslint-config-prettier
in tslint.json
.
Recommend installing the VSCode Prettier extension, so Prettier's formatting can be applied on-the-fly.
TSLint, Prettier, Stylelint, husky, lint-staged
Package.json has been configured to use husky
with lint-staged
to run the lint-fix
(linting + formatting) commands, against the files staged to be committed, whenever you perform a commit. This ensures that all committed code has been linted and formatted correctly.
If the linters or formatters find issues that cannot be automatically fixed, it will throw an error and provide output as to what is wrong. Fix the issues and commit again.
*.ts
files using TSLint
.
npm run lint:ts
*.scss
files using Stylelint
.
npm run lint:scss
npm run lint
Note: In the worst case scenario, where linting/formatting has been neglected, then these lint-fix
commands have the potential to create hundreds or thousands of file changes. In this case, it is recommended to only run these commands as part of a separate commit.
Note: Not all linting/formatting errors can be automatically fixed, and will require human intervention.
*.ts
files using TSLint
+ Prettier
.npm run lint-fix:ts
*.scss
files using Stylelint
.
npm run lint-fix:scss
npm run lint-fix
When viewing test output in the browser, via localhost:9876, Firefox produces somewhat cryptic error output. Chrome doesn't have this issue.
watch=true
npm run tests
Run the unit tests with watch=false
and run the coverage report
View the coverage report at ./coverage/index.html
npm run tests-ci
Run the end-to-end tests
Before running the tests make sure you are serving the app via ng serve
npm run e2e
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|module
.
ng g c customer
ng g d search-box
ng g s 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, we must go to its owning module and add the service to the providers
array.
ng g s general-data2 -m app.module
# class
ng g cl models/customer
# interface
ng g i models/person
# enum
ng g enum models/gender
ng g pipe shared/init-caps
Create a login directory and generate a login module in that directory.
ng g module login/login.module
Generate a module called admin and add routing feature to it.
ng g module admin --routing
ng set default.styleExt css
ng new my-app --routing --style scss
For dev, test, and prod builds on OpenShift/Jenkins see openshift/README.md for detailed instructions on how to setup in an OpenShift environment using nginx.
Create pull requests against the master
branch.
A list of recommended/helpful VS Code extensions.