前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手工将项目升级至 Angular 9 记录

手工将项目升级至 Angular 9 记录

作者头像
beginor
发布2020-08-10 15:20:22
1.8K0
发布2020-08-10 15:20:22
举报
文章被收录于专栏:张志敏的技术专栏

手工将项目升级至 Angular 9 记录

Angular 最近发布了 9.0 版本, 需要先将一个模板项目升级至新版本。 虽然它提供了 ng update 命令来升级, 但是这个命令会自动调整 package.json 文件依赖项的顺序, 导致向其它项目合并时产生不必要的冲突。 为了不打乱现有的依赖项的顺序, 容易向其它派生项目进行合并, 同时也能明确知道究竟那些文件需要修改, 因此采用手工升级的办法。

项目结构采用 angular-cli 创建的的多项目架构, web 是一个应用, app-shared 是类库。

代码语言:javascript
复制
- angular.json
- package.json
- tsconfig.json
- tslint.json
- projects/
--+ app-shared/
--+ web/

package.json

依赖项 (dependencies) 升级, 将 Angular 的 npm 包 @angular/* 包版本升级为 ~9.0.0 , 以及其相关 npm 包的升级:

代码语言:javascript
复制
{
  "dependencies": {
-    "@angular/animations": "~8.2.14",
+    "@angular/animations": "~9.0.0",
-    "@angular/common": "~8.2.14",
+    "@angular/common": "~9.0.0",
-    "@angular/compiler": "~8.2.14",
+    "@angular/compiler": "~9.0.0",
-    "@angular/core": "~8.2.14",
+    "@angular/core": "~9.0.0",
-    "@angular/forms": "~8.2.14",
+    "@angular/forms": "~9.0.0",
-    "@angular/platform-browser": "~8.2.14",
+    "@angular/platform-browser": "~9.0.0",
-    "@angular/platform-browser-dynamic": "~8.2.14",
+    "@angular/platform-browser-dynamic": "~9.0.0",
-    "@angular/router": "~8.2.14",
+    "@angular/router": "~9.0.0",
-    "rxjs": "~6.4.0",
+    "rxjs": "~6.4.0",
-    "tslib": "^1.10.0",
+    "tslib": "^1.10.0",
-    "zone.js": "~0.9.1",
+    "zone.js": "~0.9.1"
  }
}

开发依赖项 (devDependencies) ,可以看到, 几乎所有的开发依赖项都是大版本更新。

代码语言:javascript
复制
{
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.21",
+    "@angular-devkit/build-angular": "~0.900.1",
-    "@angular-devkit/build-ng-packagr": "~0.803.21",
+    "@angular-devkit/build-ng-packagr": "~0.900.1",
-    "@angular/cli": "~8.3.21",
+    "@angular/cli": "~9.0.1",
-    "@angular/compiler-cli": "~8.2.14",
+    "@angular/compiler-cli": "~9.0.0",
-    "@angular/language-service": "~8.2.14",
+    "@angular/language-service": "~9.0.0",
-    "@types/node": "~8.9.4",
+    "@types/node": "^12.11.1",
-    "@types/jasmine": "~3.3.8",
+    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "^5.0.0",
+    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.4.0",
+    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
+    "karma": "~4.3.0",
-    "karma-chrome-launcher": "~2.2.0",
+    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
+    "karma-jasmine-html-reporter": "^1.4.2",
-    "ng-packagr": "^5.4.0",
+    "ng-packagr": "^9.0.0",
-    "protractor": "~5.4.0",
+    "protractor": "~5.4.3",
-    "ts-node": "~7.0.0",
+    "ts-node": "~8.3.0",
-    "tsickle": "^0.37.0",
-    "tslint": "~5.15.0",
+    "tslint": "~5.18.0",
-    "typescript": "~3.5.3"
+    "typescript": "~3.7.5"
  }
}

@types/node 升级为 ^12.11.1 , 所以建议将本机的 nodejs 也升级为 v12 版本。

angular.json

Angular 9 默认采用 ivy 引擎, 所以应用项目 (web) 的 build 选项需要打开 aot 编译。

类库项目 (app-shared) 也增加了 production 配置

代码语言:javascript
复制
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "web": {
      "architect": {
        "build": {
          "options": {
            "polyfills": "projects/web/src/polyfills.ts",
            "tsConfig": "projects/web/tsconfig.app.json",
-            "aot": false,
+            "aot": true,
             "assets": [
              "projects/web/src/favicon.ico",
              "projects/web/src/assets"
            ],
          },
          "configurations": {
            "production": {
-              "aot": true,
            }
          }
        }
      }
    },
    "app-shared": {
      "architect": {
        "build": {
          "options": {
              "tsConfig": "projects/app-shared/tsconfig.lib.json",
              "project": "projects/app-shared/ng-package.json"
-          }
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/app-shared/tsconfig.lib.prod.json"
+            }
+          }
        }
      }
    }
  }
}

tsconfig.json

精简了 compilerOptions:paths 的设置。

代码语言:javascript
复制
{
  "compilerOptions": {
    "paths": {
      "app-shared": [
+        "dist/app-shared/app-shared",
        "dist/app-shared"
-      ],
+      ]
-      "app-shared/*": [
-        "dist/app-shared/*"
-      ]
    }
  }
}

projects/web/tsconfig.app.json

简化了 include 以及 exclude 配置。

代码语言:javascript
复制
{
  "include": [
-    "src/**/*.ts"
+    "src/**/*.d.ts"
-  ],
-  "exclude": [
-    "src/test.ts",
-    "src/**/*.spec.ts"
  ]
}

projects/web/src/test.ts

对 require 进行了精确的定义。

代码语言:javascript
复制
- declare const require: any;
+ declare const require: {
+     context(path: string, deep?: boolean, filter?: RegExp): {
+         keys(): string[];
+         <T>(id: string): T;
+     };
+ };

projects/web/src/polyfills.ts

Angular 9 的 localize 引入了一些变化, 需要导入 @angular/localize/init 文件, 如果没有使用 @angular/localize , 则不需要修改。

代码语言:javascript
复制
import 'zone.js/dist/zone';  // Included with Angular CLI.

+ import '@angular/localize/init';

projects/web/src/main.ts

如果使用了 @angular/localize 才需要做修改, 否则不用修改。

代码语言:javascript
复制
if (environment.production) {
    enableProdMode();
}

- registerLocaleData(zhHans, zhHansEx);
+ registerLocaleData(zhHans, 'zh-Hans', zhHansEx);

projects/app-shared/package.json

对等依赖项 peerDependencies 升级至 ^9.0.0 , 增加了对 tslib:^1.10.0 的对等依赖.

代码语言:javascript
复制
{
  "name": "app-shared",
  "version": "0.0.1",
  "peerDependencies": {
-    "@angular/common": "^8.2.14",
+    "@angular/common": "^9.0.0",
-    "@angular/core": "^8.2.14"
+    "@angular/core": "^9.0.0",
+    "tslib": "^1.10.0"
  }
}

projects/app-shared/tsconfig.lib.json

精简了一些 Angular 编译器选项。

代码语言:javascript
复制
{
  "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
    "enableResourceInlining": true
  }
}

projects/app-shared/tsconfig.lib.prod.json

这个文件是新增加的, 也就是意味着可以使用 --prod 选项来编译 Angular 类库项目。

代码语言:javascript
复制
+ {
+   "extends": "./tsconfig.lib.json",
+   "angularCompilerOptions": {
+     "enableIvy": false
+   }
+ }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 手工将项目升级至 Angular 9 记录
    • package.json
      • angular.json
        • tsconfig.json
          • projects/web/tsconfig.app.json
            • projects/web/src/test.ts
              • projects/web/src/polyfills.ts
                • projects/web/src/main.ts
                  • projects/app-shared/package.json
                    • projects/app-shared/tsconfig.lib.json
                      • projects/app-shared/tsconfig.lib.prod.json
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档