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