Update Angular CLI
WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior JavaScript developers.
Installed on a new machine and the version of Anglar CLI was well advanced so we updated the existing environment on this occasion. Because the existing environment was Angular CLI: 1.7.4 (old old guy) and it is packed full of feeling of a jumpy feeling, if I thought that it could update (because Angular was 5.2.0 it probably will go smoothly While having hope) I was able to make a good suggestion so I cried while working notes.
Work procedure
procedure
- Delete / install global Angular CLI
- Update local (in project) Angular CLI
- Build has passed, so I will make a new project unavoidably
Real work
1. Delete / install the global Angular CLI
After making a command mistake
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
│ │
│ New minor version of npm available! 6.0.0 → 6.5.0 │
│ Changelog: https://github.com/npm/npm/releases/tag/v6.5.0: │
│ Run npm install - g npm to update! │
│ │
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
Because it is said that it is so updated global npm updated. Then deletion of global Angular CLI.
npm uninstall - g @ angular / cli
npm cache clean
I do not know if cache clean is necessary but I will see an article saying well well. Then install the global Angular CLI
npm install - g @ angular / cli
2. Update local (in project) Angular CLI
Go to Angular project and update local (in project) Angular CLI
ng update @ angular / cli
After completing the above, try building it for the time being
The serve command requires to be run in an angular project, but a project definition could not be found.
I was scolded. Since it was .angular-cli.jsonfrom some version of Angular CLI angular.jsonthat it came from, I brought from a project I created newly, .angular-cli.jsonwrite the contents I set with, build again. Then, there is no module now, Observable type is missing, so it gets angry, so it's too annoying so I will make a new project and set up the files I created there.
3. Build has passed, so make a new project inevitable
Copy the necessary files after creating the new project , build the .angular-cli.jsoncontents added to the angular.jsonbuild, build.
import { trigger } from '@ angular / core' ;
import { transition } from '@ angular / core' ;
import { style } from '@ angular / core' ;
import { animate } from '@ angular / core' ;
Since error occurs at the place where I am writing,
import { trigger } from '@ angular / animations' ;
import { transition } from '@ angular / animations' ;
import { style } from '@ angular / animations' ;
import { animate } from '@ angular / animations' ;
Fixed to. after that
Can not find module '@ angular / http'.
It gets scolded by. '@angular/httpSince I became obsolete, I thought that I should not hold hands, but I pretended not to look ... but, let's fix it.
app.modules.ts Into
import { HttpClientModule } from '@ angular / common / http' ;
Add a combined total @NgModuleof importsadded to. Next, in the place where http relation is described
import { Http } from '@ angular / http' ;
import { Headers } from '@ angular / http' ;
import { RequestOptions } from '@ angular / http' ;
import 'rxjs / add / operator / timeout' ;
To
import { HttpClient , HttpHeaders } from '@ angular / common / http' ;
import { timeout , catchError } from 'rxjs / operators' ;
import { Observable , throwError } from 'rxjs' ;
Then rewrite the relevant part. For reference, the transmission process is changed as follows.
/ **
* http post processing
* @ param {string} _postUrl - Outgoing URL
* @ param {any} _trans_data - transmission data
* @return {any} http.post Response of processing
* /
- public http (_postUrl: string, _trans_data: any, _options ?: RequestOptions): any {
+ public http (_postUrl: string, _trans_data: any): any {
let ret;
let postUrl = SystemConst.API_DIR + _postUrl;
- ret = this._http.post (postUrl, _trans_data, this.options) .timeout (SystemConst.TIMEOUT_TIME);
+ ret = this._http.post (postUrl, _trans_data, HTTP_OPTIONS)
+. pipe (
+ timeout (SystemConst.TIMEOUT_TIME),
+ catchError (this.handleError ())
+);
return ret;
}
I do not know whether timeout is done with pipe but it is good because it is running for the time being. When it postUrlis wrong without relation to pipe It is slightly a mystery (it seems to be a problem of setting on the server side) that you can not get the HTTP status code 404. Since it will be handled as a timeout if it is current, I want to do it. For the time being, I added the following while referring to the headquarter 's here and the main house here .
const HTTP_OPTIONS = {
headers : new HttpHeaders ({
'Content-Type' : 'application / json'
})
};
/ **
* Return error of Observable
* Without @ param
* @ return {Observable }
* /
Private handleError () {
return ( error : any ): Observable < any > => {
// forcibly moved to the top
this . ScrollTop ();
return throwError ( error . Message );
};
}
It seems to be in a state to move like the original for the time being.
When I get a build error on version up, I get bad for my stomach normally but I do not understand RxJS or Observable, but I could understand it slightly. Conceptual explanation of RxJS Let's learn RxJS # 1 - Introduction for people to get started from now is easy to understand, although it is short.
Next is the place I want to output while making something concretely doubling the mounting arrangement .