升级Angular CLI

由于在新机器上安装的 Angular CLI 版本较新,所以我趁此机会也更新了现有环境。因为原有环境的 Angular CLI 版本是 1.7.4(太旧了),所以感觉有点被落下,我本来以为这次更新可能会失败(因为 Angular 版本是 5.2.0,可能会顺利进行),果然失败了,所以边哭边记录工作备忘录。

操作步骤。

操作步骤

    1. 删除和安装全局的 Angular CLI

 

    1. 更新本地(项目内的)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的第一集 – 为初学者介绍 的导论中总结得很简短明了,很容易理解。

下一步,我希望能够同时整理实施并创建具体的作品来输出。

广告
将在 10 秒后关闭
bannerAds