Semantic release Angular with Gitlab CI
Semantic release Angular with Gitlab CI

And publish on Gitlab Pages. And display our version with an APP_INITIALIZER.

In this article, we will go through the few steps that lead to publish an Angular application with the help of Gitlab CI pipelines, using semantic release to generate the appropriate version according to our commits and push this version in the app deployed with Gitlab Pages.

You will need some basic knowledge of git commit and gitlab, but nothing really complicated. The final product would be quite far from a production ready stack, but hopefuly a good start for people jumping into these devops issues. …

In this article, we will see how to build and test and Angular project with Travis CI and Sonar Cloud.

Setup the tests

Of course our project will be on github, since it’s an easy way to integrate with Travis CI. End to end tests will be launched with Cypress. Unit tests will run with karma, using a nice setup that is presented here by the fun Shai Reznik :

Basically, the setup is to use karma-jasmine-diff-reporter, karma-mocha-reporter and ChromeHeadless. The result is really nice and can run transparently both on you dev machine and on your CI.

reporters: ["jasmine-diff", "mocha"], port…

NestJs backend and Angular NgRx Data

Today we will explore the way to connect a simple NestJS server with the latest Angular NgRx Data.

In previous articles, we connected both a json-server and a SpringBoot backend with NgRx Data. With the version 8, this library was integrated in the official NgRx, that’s a good point, and ensures compatibility in the future releases.

NestJS server

Many people already talked about this project, I won’t add too much, but the pros that I see in NestJS are :

  • Code architecture based on Angular-like structure, with Modules and TypeScript.
  • Abstraction of NodeJS Express, and a very easier approach.
  • Spring-like decorators, a…

NgRx can be tricky

Attention : This article is updated with NgRx version 8 and as much as possible with “new” syntax for creators like createAction and createReducer. The option is listed as : -c.

When you want to work with NgRx for you Angular application, you have many resources, to say the least. My attempt here is to go from scratch to a decent state of your App that could look like a production-type one.

I don’t want to bring tons of code here, I want to be as simple and demonstrative as possible. Also, we want to use schematics as much as…

Bootstrap and Angular

For those who don’t use / like that much Material Design, we still can do some Bootstrap … right ?

I like to use ngBootstrap for components that require jQuery in the original Bootstrap distribution. The good thing is you don’t have to import Bootstrap javascript files, and keep doing Angular code. (I really don’t need to say that we don’t want to mix Angular app with any other javascript lib, but sometimes I have to say it when faced with projects demands …)

Ok, now I came across a nice Bootstrap component : Custom Input File.

Spring Boot Data and Angular NgRx Data

In my previous article, I talked about NgRx Data linked to a simple json server. It was an attempt to show how easy is the Angular library with a simple CRUD backend.

Now let’s move on a little bit with a more “project style” application. This will be a Spring Boot starter application as a dataservice backend AND as a front Angular application.

I should have some disclaimer here : There is a perfectly great project working with Spring Boot and Angular already : jHipster ! I don’t intend to do what they do here, but merely keep working with…

NgRx Data by John Papa and json-server

Attention : the NgRx Data will be part of official NgRx starting with version 8 ! Check the next version docs :

For anyone who started implementing ngrx state, store, entities management, we know that this can be a long way to have a clean and maintainable code. What is called the boilerplate is the minimal amount of code to handle properly the basic operations like subscribing to a centralized state, store or data service.

Go check the next step with Spring Boot here :

NgRx boilerplate

This code includes elements like :

  • Actions definitions, classes and inner types as…

Lately I was still working with ng1.x applications and using Javascript librairies like Lodash and Moment.

Switchin to next versions, it’s very simple for an Angular 4 application to integrate (providing the types exists) and to develop with !

For Lodash, we just need to install both the lib and the types :

npm install --save lodash
npm install --save-dev @types/lodash

Just import in your component the library and use it :

import * as _ from 'lodash';var tmpHero: Hero = _.find(heroes, (hero) => == id);

Alain Boudard

Frontend dev and downhill rider

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store