Thursday 7 February 2019

Angular App Upgrade

For simple Angular1 apps, it just might make more sense to rewrite them, than to upgrade them.

This might seem easier as I haven't done anything with my Angular app lately, it's still on Angular 4 (4.0.0) and Angular 7 (7.2.0) is out by now.

Added benefit is that I see firsthand the different changes, and I can blog about it.

Let's see what has changed, and how I am going to replace certain elements.

General setup

Creating the App

Start by creating the application.

$ ng new my-app

Bootstrap

Adding bootstrap can be done using [2].

$ npm install bootstrap --save

Added the bootstrap css to the styles in angular.json.

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

I am not planning on using NgBootstrap2, I think it's just a wrapper.

Material Icons

I need me some icons4, without getting *everything*.

$ npm install --save material-icons

Added the icons css to the styles in angular.json.

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/material-icons/iconfont/material-icons.css"
],

Miscellaneous settings

I usually make some small changes in the angular.json. These are documented here.

"outputPath": "../webapp",

Components and Services

It's possible to generate a skeleton for components and services we wish to design.

$ ng generate component errors
$ ng generate service player

JSON-typescript-mapper

I used to use the json-typescript-mapper as displayed below, as it helps to convert a incoming json response into a real live TypeScript class. It works by adding approproate @JsonProperty annotations.

I have since removed this, as I find that the new Angular has the possibility of getting a "Typed" JSON response.

Although, since at the bottom is it still JavaScript, it means I cannot have any business logic in my "JSON" TypeScript classes, as per the usual the casting of type A to type B is simply ducktyping in action.

I do run the risk of creating an anemic entity model, though.

$ npm install --save json-typescript-mapper

The Differences

This is the important part.

Angular CLI
It seems I originally built the app using CLI version 1.0.6. Now I am using 7.2.1.
Generating code
It is now possible to generate guard, interface and enum with the CLI.
angular.json
The file angular.json is new, and replacing the old .xxxx
test files moved to src directory
Test files are now in /e2e/src/app.e2e-spec.ts
creating docs
Need to remember that the old file had a way to generate docs.In scripts of the package.json
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"typedoc": "typedoc"
Tslint and TypeScript syntax
  • TsLint says: single quotes are better than double quotes.
  • always use the === instead of ==, unless you're sure.
  • most of the stuff I use locally should be const instead of let
  • tslint actually complains sometimes if I am specific. For example with error: boolean = false;
Http
The HttpModule has been replaced/renamed to HttpClientModule and is moved from @angular/http to @angular/common/http.
Injectable annotation
has a new "providedIn" property.
REST service calls

The calling of a rest service has been simplified, from:

public updateGuild(guild: Guild): Observable<any> {
  let headers = new Headers({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  });
  let options = new RequestOptions({ headers: headers });
  return this.http.put(this.getGuildUrl(), guild, options)
    .catch((n) => this.handleError(n));
}
To:
public updateGuild(guild: Guild): Observable<any> {
  return this.http.put(this.getGuildUrl(), guild);
}

Luckily the actual code didn't need much changing.

Build and Release

Building for production

$ ng build --prod --base-href "/karchanpersonal/"

Miscellaneous

Dates

For some reason, the dates returned by the Rest services are in a format that is not recognised by JavaScript.

2010-03-03T05:54:09Z[UTC]

The [UTC] at the end is weird.

An ugly hack that removed the [UTC] with string.replace works.

References

[1] Angular
https://angular.io/
[2] Adding Bootstrap to Angular
https://www.talkingdotnet.com/add-bootstrap-4-to-angular-6-application/
[3] NgBootstrap - Getting started
https://ng-bootstrap.github.io/#/getting-started
[4] NPM - Material Icons
https://www.npmjs.com/package/material-icons

No comments:

Post a Comment