Merge pull request #60 from ionic-jp/feat/v7

feat(v7): v7へのプルリクエスト

Author: rdlabo

CONTRIBUTING.md

@@ -23,11 +23,11 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check
 In order to run the documentation locally, install the dependencies and run the development server:
 
 ```sh
-$ npm install
+$ npm install --legacy-peer-deps
 $ npm start
 ```
 
-> **Note**: recent versions of npm (5+) and Node.js (10+) are required to run certain scripts.
+> **Note**: certain versions of npm (5-8) and Node.js (10-16) are required to run certain scripts.
 
 ---
 

docs/angular/config.md

@@ -41,7 +41,9 @@ AngularのLife Cycle Eventsに加えて、Ionic Angularには、使用可能な
 | `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。  |
 | `ionViewDidLeave`  | コンポーネントを離脱するアニメーションが終了した時に発火します。 |
 
-`ionViewWillEnter` と `ionViewDidEnter` の違いは発火するタイミングです。前者は、 `ngOnInit` の直後であり、ページの処理がはじまる前に発火しますが、後者は処理が終了してから発火します。
+これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。
+
+`ionViewWillEnter`と`ionViewDidEnter`の違いは、いつ発火するかです。前者は `ngOnInit` の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます。
 
 `ionViewWillLeave` と `ionViewDidLeave` についてですが、 `ionViewWillLeave` は現在のページから離脱する処理がはじまる前に呼び出されますが、 `ionViewDidLeave` は新しいページに遷移する処理が成功してから呼び出されます (新しいページの `ionViewDidEnter` が発火した後になります)。
 

docs/angular/lifecycle.md

@@ -178,6 +178,54 @@ import { LoginComponent } from './login.component';
 
 ここでは、`RouterModule` のインポートとともに、典型的な `Angular Module` の設定がありますが、`RouterModule` では `forChild` によってコンポーネントを使用することを宣言しています。この設定では、ビルドを実行するときに、`App Component`（Root）、 `login Component` 、および `detail Component` において別々のチャンクを作成します。
 
+## Standalone Components
+
+:::caution Experimental API
+
+Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable.
+
+:::
+
+Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module.
+
+To use standalone components with routing and Ionic Framework, you must first be on Ionic ^6.3.0. The experimental API requires developers to assign the `EnvironmentInjector` instance for each router outlet (`ion-router-outlet` and `ion-tabs`) that uses standalone component routing.
+
+```ts title="app.component.ts"
+import { Component, EnvironmentInjector } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: 'app.component.html',
+})
+export class AppComponent {
+  constructor(public environmentInjector: EnvironmentInjector) {}
+}
+```
+
+```html title="app.component.html"
+<ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
+<!-- or if you are using ion-tabs -->
+<ion-tabs [environmentInjector]="environmentInjector"> ... </ion-tabs>
+```
+
+Developers can use the existing syntax for standalone component routing from Angular:
+
+```ts
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: 'standalone-route',
+        loadComponent: () => import('./path/to/my-component.component').then((c) => c.MyComponent),
+      },
+    ]),
+  ],
+})
+export class AppRoutingModule {}
+```
+
+To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components).
+
 ## Live Example
 
 If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz.
@@ -192,8 +240,8 @@ The following is an example of linear routing in a mobile app:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/linear-routing-demo.mp4')}
@@ -218,8 +266,8 @@ The following is an example of non-linear routing:
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/non-linear-routing-demo.mp4')}
@@ -433,8 +481,8 @@ The example below shows how the iOS App Store app handles presenting an "Account
 
 <video
   style={{
-    'margin': '40px auto',
-    'display': 'flex'
+    margin: '40px auto',
+    display: 'flex',
   }}
   width="400"
   src={useBaseUrl('video/tabs-account-demo.mp4')}
@@ -449,6 +497,6 @@ Instead, we recommend having routes in each tab that reference the same componen
 
 The example below shows how the Spotify app reuses the same album component to show content in multiple tabs. Notice that each screenshot shows the same album but from a different tab.
 
-| Home Tab | Search Tab |
-| :------: | :--------: |
+|                      Home Tab                       |                      Search Tab                       |
+| :-------------------------------------------------: | :---------------------------------------------------: |
 | <img src={useBaseUrl('img/usage/tabs-home.jpg')} /> | <img src={useBaseUrl('img/usage/tabs-search.jpg')} /> |