藤井無限です。
2017年3月23日にAugular4.0.0がリリースされました。
Angular4.0.0

上記ドキュメントの内容を拙いですが翻訳しておきます。

2017年3月23日木曜日
Angular 4.0.0公開

Angular4.0.0が公開されました。
これは、announced adoptino of Semantic Versioning
のメジャーリリースです。そして、ほとんどのアプリケーションに対する2.x.xの後方互換性です。
コミュニティにこのリリースを共有できて興奮しています。
このリリースは、過去3ヶ月私達が働き続けたメジャーな改善と機能を含んでいます。
私どもは、このリリースへのアップデートが開発者に簡単であることを確かにするため懸命に働きました。

What’s New

より小さく&より速く

 
このリリースでAngularアプリケーションをより小さく、より速く作れることを約束します。
決して私たちはまだやっていません。あなたは、今後数ヶ月間にさらなる改善に注力していることがわかります。

Viewエンジン

AOTが生成したコードがどのようにみえるかという変更をhoodに変更を加えました。
この変更はユーザーのコンポーネントのために生成したコードのサイズをほとんどのケースにおいて60%縮小します。
テンプレートが複雑であればあるほど、高く縮小されます。
リリースキャンディデートの期間の間、Angular4への移行が、
数100kbytesバンドルされた製品を減らしたと多くの開発者に聞きました。
View Engineに対して何をやったか聴きたければDesign Docを見てください。

アニメーションパッケージ

@angular/coreの外にアニメーションを抜き出しました。
そして独自のパッケージに入れました。
これはもし、アニメーションを使いたくなければ、
エキストラコードがあなたの製品にバンドルされないというところに結局行き着きます。
この変更は、もっと簡単にドキュメントを探すことができ、オートコンプリーションをより進化させることをもたらします。@angular/platform-browser/animations.からBrowserAnimationsModuleをインポートすることにより、
ユーザーは自分でアニメーションをあなたのメインのNgModuleに追加することができます。

新たな特徴

*nglfと*ngForの改善

テンプレートのバインド構文は幾つかの有益な変更をサポートしています。
if/elseのスタイルのシンタックスを使うことができます。そして、ローカル変数をアサインできます。

<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count" [user]="user">
  </user-profile>
 <div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>

Angularユニバーサル

ユニバーサル、開発者にサーバー上でAngularを動作させるこのプロジェクトは、Angularで再び最新化されました。そして、もともとコミュニティ主導で進められれていたこのプロジェクトが、Augularチームによって適応されてユニバーサルになっていらい初めてのリリースです。直近の数ヶ月に渡るユニバーサルチームの内外の仕事の結果をこのリリースは含んでいます。ユニバーサルコードの大多数は、@angular/platform-server.に位置しています。
もっとAngularユニバーサルについて知りたければ、@angular/platform-serverのrenderModuleFactoryメソッドを見てください。もしくは、RobWormaldのDemo Repositoryを見てください。
より多くのドキュメントとコードサンプルが今後作られるでしょう。

TypeScript2.1と2.2の互換性

より最新のバージョンのTypeScriptにAngularをアップデートしました。これでngcのスピードが改善されるでしょう。また、アプリケーションのタイプチェックがより良くなります。

テンプレートへのソースMap

テンプレートの一つで何かエラーが発生するともともとのテンプレートに関して意味のある文脈を与えるソースマップを生成します。

パッケージの変更

ESモジュールのフラットさ(Flat ESM/FESM)

私たちは現在、モジュールのフラット化されたバージョンを配布しています(EcmaScriptモジュールフォーマットでコードの “roll up”バージョン、サンプルファイルを参照)このフォーマットは、ツリーシェイキングに役立ち、生成されたバンドルのサイズを縮小し、特定のシナリオではブラウザでビルド、トランジション、ロードを高速化するのに役立ちます。

Flat ES Modulesの重要性に対して
The cost of small modulesを参照してください。

ES2015ビルドの実験

ES2015 Flat ESM format.にてパッケージをリリースしています。このオプションは実験的でオプトインです。開発者は、これらのパッケージをロールアップと組み合わせると、バンドルサイズを最大7%削減できたと報告しています。これらの新しいパッケージを試すと、通常の “module”プロパティよりpackage.jsonの “es2015″プロパティを解決するようにビルドツールチェーンを設定します。

CLosure互換性の実験

すべてのコードにClosureアノテーションが追加され、高度なクロージャ最適化を利用できるようになり、バンドルサイズが小さくなり、ツリーの揺れが改善されました。

4.0.0の変更

4へのアップデートは、最新版へのAugularの依存関係を更新し、アニメーションを使いたいかどうかを2回チェックしておくと簡単です。これでほとんどのユースケースで動作します。

Linux/Mac

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest –save

Windows

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest –save

そしていつも使っているng serveやnpm startコマンドを動作させると、問題なく動作するはずです。
もし、Animationを頼っている場合は、root NgModuleないの@angular/platform-browser/animationsから、
BrowserAnimationsModule をインポートします。こうしなくても、コードは完全で、実行されます。しかし、
Animationがエラーをトリガーします。@angular/coreからのインポートは非推奨です。
‘@angular/animations’;.から { trigger, state, style, transition, animate } をインポートして新しいパッケージからのインポートを使います。
もし、あなたのアプリケーション変更の必要に関して情報を見たければ、対話式のAngular Update Guideを開始しています。

Known Issues

バージョン4へのゴールの一つは、TypeScriptのstrictNullChecksのセッティングへの互換性を作ることです。
RC期間中に、これがすべてのユースケースで適切に機能するようにさらに多くの作業が行われることを発見しました。そして、私たちは意図的にstrictNullChecks設定と互換性がないようにしました

What’s next

2.xの際の公式リリーススケジュールと同じ歩調の、次の6ヶ月のロードマップをセッティングしている最中です。4.00へのパッチアップデートがあり、4.1をすでに開始しています。より小さく、より高速にAngularを作り続けます。
@angular/http, @angular/service-worker, and @angular/language-serviceのように能力を進化させ続けます。
ドキュメントの更新、CLIのステーブルリリース、パッケージングのライブラリ作者によるガイダンスを期待すべきです。

Related posts