升级Angular CLI
由于在新机器上安装的 Angular CLI 版本较新,所以我趁此机会也更新了现有环境。因为原有环境的 Angular CLI 版本是 1.7.4(太旧了),所以感觉有点被落下,我本来以为这次更新可能会失败(因为 Angular 版本是 5.2.0,可能会顺利进行),果然失败了,所以边哭边记录工作备忘录。
操作步骤。
操作步骤
-
- 删除和安装全局的 Angular CLI
-
- 更新本地(项目内的)Angular CLI
- 由于构建无法通过,不得不创建一个新项目
实际操作
1. 删除并安装全球的 Angular CLI
如果输入错误了命令
╭────────────────────────────────────────────────────────────────╮
│ │
│ 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! │
│ │
╰────────────────────────────────────────────────────────────────╯
鉴于有人建议我这样做,所以我趁机更新全局的 npm 包。然后我删除了全局的 Angular CLI。
npm uninstall -g @angular/cli
npm cache clean
虽然不确定是否需要进行缓存清理,但还是看到一篇建议经常清理的文章,所以先安装全局 Angular CLI。
npm install -g @angular/cli
2. 更新本地Angular CLI(项目内)
转到Angular项目并更新本地(项目内)的Angular CLI。
ng update @angular/cli
完成以上后,暂时尝试构建一下。
The serve command requires to be run in an Angular project, but a project definition could not be found.
我被责骂了。从某个版本的Angular CLI开始,.angular-cli.json文件被改为angular.json文件。因此,我从新建的项目中拿来了这个文件,并将.angular-cli.json中的配置内容写入并重新进行构建。结果现在又出现了没有module或没有Observable类型的错误,感觉很麻烦,所以决定新建一个项目并将创建的文件放置在那里。
由于构建无法通过,所以不得不创建一个新项目。
在新建项目后,将所需的文件复制,并将 .angular-cli.json 文件中的内容添加到 angular.json 文件中,然后进行构建。
import { trigger } from '@angular/core';
import { transition } from '@angular/core';
import { style } from '@angular/core';
import { animate } from '@angular/core';
因为在写这部分的时候出现了错误,
所以。
import { trigger } from '@angular/animations';
import { transition } from '@angular/animations';
import { style } from '@angular/animations';
import { animate } from '@angular/animations';
然后进行修正。
Cannot find module '@angular/http'.
由于 ‘@angular/http’ 已被废弃,我本以为需要动手修改,但一直假装没看到… 是的,我们来修正一下吧。
将以下内容用中文还原为一种可能方式:
在 app.modules.ts 文件中。
import { HttpClientModule } from '@angular/common/http';
在@NgModule的imports中添加追加和合并。然后,在涉及http相关的部分进行描述。
import { Http } from '@angular/http';
import { Headers} from '@angular/http';
import { RequestOptions} from '@angular/http';
import 'rxjs/add/operator/timeout';
以中国的母语进行改写,只需要一个选项:
对于”を”这个词进行改写,只需要一个选项。
Note: The given sentence “を” has no specific context or meaning in Chinese. The provided paraphrase is a general translation based on the request.
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { timeout, catchError} from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
然后,重新写相关的部分。以下是发送过程的变更,供参考。
/**
* httpポスト処理
* @param {string} _postUrl - 送信URL
* @param {any} _trans_data - 送信データ
* @return {any} http.post処理のレスポンス
*/
- 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;
}
虽然不确定使用管道进行超时处理是否正确,但现在它能正常运行,所以可以认为是好的。但如果与管道无关的 postUrl 错误,将无法获取到 HTTP 状态码 404,这有点神秘(可能是服务器端设置的问题)。目前它被视为超时处理,所以希望能解决这个问题。暂时先参考原文的这里和原文的这里,然后添加以下内容。
补充说明:404已经正确获取,并且问题出在handleError()函数中return throwError(error.message)之后的自定义处理上,试图从return值error.message中获取status。实际上,error内已经正确存储了status信息。
const HTTP_OPTIONS = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
/**
* Observable のエラーを返却します
* @param 無し
* @return {Observable<any>}
*/
private handleError() {
return (error: any): Observable<any> => {
// 強制的にトップに移動
this.scrollTop();
return throwError(error.message);
};
}
可以认为以上的情况已基本恢复到原本的状态。
升级版本时出现构建错误,通常会让我感到很不爽,胃也会痛,但是我对RxJS和Observable的理解还不太透彻,不过稍微能理解一点点,感觉还不错。RxJS的概念性说明在学习RxJS的第一集 – 为初学者介绍 的导论中总结得很简短明了,很容易理解。
下一步,我希望能够同时整理实施并创建具体的作品来输出。