A simple Angular application to edit the packages.json file in the LCG CMake project at CERN. This tool is used to provide a simple way to edit the package information displayed at the LCG Info website but it doesn't provide a way to update the information directly. Instead it provides a JSON file as replacement for the existing packages.json in lcgcmake/documentation/packages.json.
Input: The raw data from CERN's GitLab repository:
https://gitlab.cern.ch/sft/lcgcmake/raw/master/documentation/packages.json- This project is based on angular-ngrx-material-starter by @tomastrajan
npm install- installs the dependencies intitallynpm start- starts a dev server and opens browser with running appnpm run start:prod- runs full prod build and serves prod bundlenpm run test- runs lint and testsnpm run watch- runs tests in watch modenpm run prettier- runs prettier to format whole code base (.tsand.scss)
When using this starter project to build your own app you might consider some of the following steps:
- use
search and replacefunctionality of your favourite IDE to replaceanmswith<your-app-prefix> - rename project in
package.jsonnameproperty and set appropriate version (eg0.0.0or1.0.0) - remove / rename context path config
-- --deploy-url /angular-ngrx-material-starter/ --base-href /angular-ngrx-material-starterinpackage.json, this is used to configure url (context path) on which the application will be available (eg.https://www.something.com/<context-path>/) - rename app in
/environments/files (will be shown in browser tab) - edit the title and Open Graph metadata properties in
index.html - remove or adjust links in the footer
- replace logo in
/assetsfolder ( currently 128 x 128 pixelpngfile ) - adjust colors in
/themes/default-theme.scss
The main goal of this repository is to provide an up to date example of Angular application following all recent best practices in various areas like:
@ngrx/store- including reducers, actions, selectors@ngrx/effects- for implementation of side effects likehttprequests, logging, notifications,...@ngrx/entity- for CRUD operations@ngrx/router-store- to connect the Angular Router to @ngrx/store@ngrx/store-devtools- to enable a powerful time-travelling debugger.@angular/material- material design component library, theming, ...- routing
- testing of all the above mentioned concepts
- Angular CLI configuration (prod build, budgets, ...)
This repository will also strive to always stay in sync with releases of Angular and the related libraries. The nature of the repository is also a great match for first time open source contributors who can add simple features and enhance test coverage, all contributors are more than welcome!
Articles with content that explains various approaches used to build this starter project.
- Blog post about Best subscribing to RxJS Observable data by Components: subscribe() vs | async pipe
- Blog post about Best Practices for Angular CLI used in this starter project
- Blog post about Typescript tips for Ngrx reducer code
- Blog post about building responsive layouts with Bootstrap 4 in Angular apps
- Blog post about configuration of animations during runtime
- Blog post about unit testing of components with NgRx TestStore
- Blog post about Angular CLI budgets
- Blog post about the best way to unsubscribe RxJs streams
- Blog post about Angular 6+ DI with providedIn
- custom themes support (4 themes included)
- lazy-loading of feature modules
- lazy reducers
- localStorage ui state persistence
@ngrx/effectsfor API requests- fully responsive design
- angular-material and custom components in
SharedModule
- Angular
- ngrx (or try ngx-model if you prefer less boilerplate)
- Angular Material
- Bootstrap 4 (only reset, utils and grids)
- Blocking at emitting LicenseWebpackPlugin when npm start - try using cnpm instead of npm