角11の新機能

角度は、デスクトップアプリケーションとモバイルアプリケーションを構築する最も人気のあるフレームワークとプラットフォームです.角はタイプスクリプトで書かれます.アングル11は11月20日にリリースされました、そして、それはGoogleによって開発されます.

何が角ですか?
アングルは、Web/モバイル/デスクトップ内のアプリケーションを作成することが容易になっているタイプスクリプトベースのオープンソースプラットフォームです.これは、単一のページアプリケーションを作成するためのフレームワークとプラットフォームです.

角11のバージョンを更新する方法?
インストールされている角度のバージョンをチェックするには、NGバージョンコマンドを実行します.

Angular CLI: 10.0.8
Node: 12.18.3
OS: win32 x64
Angular:
...
Ivy Workspace:
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.8
@angular-devkit/core         10.0.8
@angular-devkit/schematics   10.0.8
@schematics/angular          10.0.8
@schematics/update           0.1000.8
rxjs                         6.5.5

角のCLIバージョンを更新し、次のコマンドを実行します

npm install -g @angular/cli@latest

Gはグローバルインストールを表します.インストールされた最新バージョンのアングルをチェックするには、コマンドプロンプトを開き、テインバージョンコマンドを実行します.

>ng version
Angular CLI: 11.0.2
Node: 14.15.1
OS: win32 x64
Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.2
@angular-devkit/build-angular   0.1100.2
@angular-devkit/core            11.0.2
@angular-devkit/schematics      11.0.2
@schematics/angular             11.0.2
@schematics/update              0.1100.2
rxjs                            6.6.3
typescript                      4.0.5

角度の新機能
ルータ
以前のバージョンの角度でRoutereuseStrategy - CeneRunuserOteメソッドを使用している間、子ルートの次のルートについての懸念がありました.この問題は角度11で修正されています.
パイプ
角度11は、入力として任意のタイプを取るために使用される以前の日付と番号のパイプのためのタイピングを修正しました.datepipeにおいて、それは提供される最寄りのミリセカンドのミリ秒部分から回ります.非同期パイプは、未定義の入力の値としてNULL値を返さない.
続きを読む:Introduction To Custom Angular Schematics
( Webpack 5のサポート)
角11では、WebPack 5を使用できます.プロジェクトでWebPack 5を使用するには、次のコードをパッケージに追加します.JSONファイル.このWebPack 5のサポートでは、小さなバンドルと高速ビルドを実現する.

"resolutions": {
    "webpack": "5.4.0"
}

NPPMがこのプロパティをサポートしていないため、WebPack 5を使用するには、これをテストするためにヤーンを使用する必要があります.
ブラウザサポート
IEの9、IE 10、およびIEの携帯電話のサポートは角度11で削除され、彼らは角度10のリリースで非難された.角度はIE 11バージョンのみをサポートします.
バージョンスクリプト
角11は、ビルドを高速化し、typemcript 3.9のサポートを削除するためにtypescript 4.0のみをサポートしています.

"devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }

フォーマットビルド出力
角度11は、新しいCLI出力更新をログに報告し、レポートを理解しやすくするためにもたらします.ビルドの出力説明を以下に示します.

>ng build --prod
? Browser application bundle generation complete.
? Copying assets complete.
? Index html generation complete.
Initial Chunk Files               | Names         |      Size
main.67369a137e02816722b6.js   | main            | 213.08 kB
polyfills.bf99d438b005d57b2b31.js | polyfills    |  36.00 kB
runtime.359d5ee4682f20e936e9.js | runtime         |   1.45 kB
styles.09e2c710755c8867a460.css  | styles          |   0 bytes
                                  | Initial Total | 250.53 kB
Build at: 2020-12-01T04:45:59.463Z - Hash: d633afb7245175d2bf60 - Time: 34869ms

サポート緩慢読み込み
角度11は、名前のアウトレットと怠惰な読み込みをサポートしています.角の名前のアウトレットの以前のバージョンは常にコンポーネントをサポートしていました.

{
      path: '',
      outlet: 'home',
      loadChildren: ()=>import('./home/home.module').then(m=>m.HomeModule)
  }

HMRサポート
角度11では、アプリケーションを起動するときにホットモジュール置換(HMR)を有効にするためにCLIを更新しました.HMRは、モジュールをブラウザをリフレッシュせずに置き換えることができます.HMRから始めるには、次のコマンドを実行します.

ng serve --hmr

このコマンドを実行した後、コンソールはHMRモジュールが有効になっている確認メッセージを表示します.

>ng serve --hmr
NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.
? Browser application bundle generation complete.
Initial Chunk Files   | Names         |      Size
vendor.js          | vendor      |   2.66 MB
polyfills.js          | polyfills    | 484.95 kB
styles.css, styles.js   | styles          | 350.57 kB
main.js            | main          |  60.88 kB
runtime.js         | runtime        |  33.44 kB
                      | Initial Total |   3.57 MB
Build at: 2020-12-01T07:20:29.835Z - Hash: 4c8934a81ed952e948e6 - Time: 9147ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
? Compiled successfully.

hire Angular Developer .あなたの検索はここで終わります.
リゾルバのジェネレータ
角11では、CLIと以下のコマンドを使用して解決ガードを生成できます.

ng g resolver resolvername

このコマンドを使用して、プロジェクトにレゾルバを作成できます.

ng g resolver DemoResolver

このコマンドを実行した後、2つのファイルdemoresolverが含まれます.リゾルバ.tsとdemoresolverリゾルバ.仕様

import { Injectable } from '@angular/core';
import {
  Router, Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot
} from '@angular/router';
import { Observable, of } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class DemoResolverResolver implements Resolve<boolean> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return of(true);
  }
}
</boolean></boolean>

トークン
角11では、角パッケージからI 18 nトークンを取り出すことができます.次のコマンドをライブラリで使用できます.

ng xi18n --ivy

インラインフォント
角11では、フォントをインデックスのインラインに変換することができます.HTML .あなたの角度でフラグを設定することができます.ビルドオプションの下のJSON.この機能はデフォルトで生産設定に有効です.

"configurations": {          
   "optimization": true,
}

最適化を無効にすると、次のコマンドでフラグを変更できます.

"configurations": {           
"optimization": {
        "fonts": false
     },
}

OR

"optimization": {
        "fonts": {
            "inline": false
         }
     },
}

サービス労働者の改善
サービスワーカーを使用して、ナビゲーション要求のネットワーク要求を作成し、新しいNavigationRenestStrategateを構成できます.キャッシュとサーバに欠落した資産があり、サービスワーカーの新しい状態unrecoverableStateErrorが送出されます.

結論
このブログでは、角度と角度の最新バージョンを更新する方法を見てきました.角11の最新バージョンをリリースし、角度11の新機能について議論した.