diff --git a/aio-ja/content/examples/toh-pt6/src/app/hero.service.en.ts b/aio-ja/content/examples/toh-pt6/src/app/hero.service.en.ts index 80d511c776..c1e0b4d094 100644 --- a/aio-ja/content/examples/toh-pt6/src/app/hero.service.en.ts +++ b/aio-ja/content/examples/toh-pt6/src/app/hero.service.en.ts @@ -40,7 +40,7 @@ export class HeroService { // #enddocregion getHeroes-1 .pipe( // #enddocregion getHeroes-2 - tap(heroes => this.log('fetched heroes')), + tap(_ => this.log('fetched heroes')), // #docregion getHeroes-2 catchError(this.handleError('getHeroes', [])) ); diff --git a/aio-ja/content/guide/ajs-quick-reference.md b/aio-ja/content/guide/ajs-quick-reference.md index b900fd0a78..2bc8f4531b 100644 --- a/aio-ja/content/guide/ajs-quick-reference.md +++ b/aio-ja/content/guide/ajs-quick-reference.md @@ -202,10 +202,10 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bootstrapping - +
- + Angular doesn't have a bootstrap directive. diff --git a/aio-ja/content/guide/animations.en.md b/aio-ja/content/guide/animations.en.md index b92e922066..e266c72f9f 100644 --- a/aio-ja/content/guide/animations.en.md +++ b/aio-ja/content/guide/animations.en.md @@ -37,7 +37,7 @@ To get started with adding Angular animations to your project, import the animat Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. - +
@@ -49,7 +49,7 @@ Import `BrowserAnimationsModule`, which introduces the animation capabilities in If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. - +
@@ -61,7 +61,7 @@ If you plan to use specific animation functions in component files, import those In the component file, add a metadata property called `animations:` within the `@Component()` decorator. You put the trigger that defines an animation within the `animations` metadata property. - + ## Animating a simple transition @@ -82,12 +82,12 @@ Use the `style()` function to define a set of styles to associate with a given s Let's see how Angular's `state()` function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a background color of yellow. - + In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green. - + ### Transitions and timing @@ -134,7 +134,7 @@ The third argument, `easing`, controls how the animation [accelerates and decele This example provides a state transition from `open` to `closed` with a one second transition between states. - @@ -142,7 +142,7 @@ In the code snippet above, the `=>` operator indicates unidirectional transition This example adds a state transition from the `closed` state to the `open` state with a 0.5 second transition animation arc. - @@ -180,7 +180,7 @@ In this example, we'll name the trigger `openClose`, and attach it to the `butto Animations are defined in the metadata of the component that controls the HTML element to be animated. Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. - @@ -194,7 +194,7 @@ The animation is executed or triggered when the expression value changes to a ne The following code snippet binds the trigger to the value of the `isOpen` property. - @@ -216,15 +216,15 @@ Here are the code files discussed in the transition example. - - - + diff --git a/aio-ja/content/guide/animations.md b/aio-ja/content/guide/animations.md index b5c1bf0816..05e4d7bc48 100644 --- a/aio-ja/content/guide/animations.md +++ b/aio-ja/content/guide/animations.md @@ -37,7 +37,7 @@ Angularアニメーションをプロジェクトに追加するには、標準 `BrowserAnimationsModule`をインポートしてください。これによってアニメーション機能をAngularのルートアプリケーションモジュールに取り込みます。 - +
@@ -49,7 +49,7 @@ Angularアニメーションをプロジェクトに追加するには、標準 コンポーネントファイルで特定のアニメーション関数を使用する場合は、それらの関数を`@angular/animations`からインポートしてください。 - +
@@ -61,7 +61,7 @@ Angularアニメーションをプロジェクトに追加するには、標準 コンポーネントファイル内の`@Component()`デコレーター内に`animations:`というメタデータプロパティを追加してください。アニメーションを定義したトリガーを`animations`メタデータプロパティ内に配置します。 - + ## シンプルな遷移アニメーション @@ -82,12 +82,12 @@ HTMLでは、これらの属性は色や不透明度などの通常のCSSスタ Angularの`state()`関数がCSSスタイル属性を設定する`style⁣()`関数とどのように機能するかを見てみましょう。次のコードスニペットでは、複数のスタイル属性が状態に対して同時に設定されています。`open`状態では、ボタンの高さは200ピクセル、不透明度は1、背景色は黄色になります。 - + 次の`closed`状態では、ボタンの高さは100ピクセル、不透明度は0.5、背景色は緑になります。 - + ### 遷移とタイミング @@ -134,7 +134,7 @@ Angularでは、アニメーションなしで複数のスタイルを設定で 次の例では、状態間の1秒の遷移で、`open`から`closed`への状態遷移を提供しています。 - @@ -142,7 +142,7 @@ region="transition1"> 次の例では、0.5秒の遷移アニメーションの運動曲線を使用して、`closed`状態から`open`状態への状態遷移を追加します。 - @@ -180,7 +180,7 @@ region="transition2"> アニメーションは、アニメーション化されるHTML要素を制御するコンポーネントのメタデータで定義されます。アニメーションを定義するコードを`@Component()`デコレーター内の`animations:`プロパティ下に配置します。 - @@ -194,7 +194,7 @@ region="component" linenums="false"> 次のコードスニペットでは、トリガーを`isOpen`プロパティの値にバインドします。 - @@ -216,15 +216,15 @@ HTMLテンプレートファイル内では、定義されたアニメーショ - - - + diff --git a/aio-ja/content/guide/aot-compiler.md b/aio-ja/content/guide/aot-compiler.md index 24ca09cf6f..dd0bed2019 100644 --- a/aio-ja/content/guide/aot-compiler.md +++ b/aio-ja/content/guide/aot-compiler.md @@ -8,7 +8,7 @@ This guide explains how to specify metadata and apply available compiler options
Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016. + Watch compiler author Tobias Bosch explain the Angular compiler at AngularConnect 2016.
@@ -21,7 +21,7 @@ Angular offers two ways to compile your application: 1. **_Just-in-Time_ (JIT)**, which compiles your app in the browser at runtime. 1. **_Ahead-of-Time_ (AOT)**, which compiles your app at build time. -JIT compilation is the default when you run the _build-only_ or the _build-and-serve-locally_ CLI commands: +JIT compilation is the default when you run the [`ng build`](cli/build) (build only) or [`ng serve`](cli/serve) (build and serve locally) CLI commands: ng build @@ -30,7 +30,7 @@ JIT compilation is the default when you run the _build-only_ or the _build-and-s {@a compile} -For AOT compilation, append the `--aot` flags to the _build-only_ or the _build-and-serve-locally_ CLI commands: +For AOT compilation, include the `--aot` option with the `ng build` or `ng serve` command: ng build --aot @@ -41,7 +41,7 @@ For AOT compilation, append the `--aot` flags to the _build-only_ or the _build- The `ng build` command with the `--prod` meta-flag (`ng build --prod`) compiles with AOT by default. -See the [CLI documentation](https://github.com/angular/angular-cli/wiki) for details, especially the [`build` topic](https://github.com/angular/angular-cli/wiki/build). +See the [CLI command reference](cli) and [Building and serving Angular apps](guide/build) for more information.
@@ -1308,6 +1308,28 @@ Chuck: After reviewing your PR comment I'm still at a loss. See [comment there]( } ``` +{@a tsconfig-extends} +## Configuration inheritance with extends +Similar to TypeScript Compiler, Angular Compiler also supports `extends` in the `tsconfig.json` on `angularCompilerOptions`. A tsconfig file can inherit configurations from another file using the `extends` property. + The `extends` is a top level property parallel to `compilerOptions` and `angularCompilerOptions`. + The configuration from the base file are loaded first, then overridden by those in the inheriting config file. + Example: +```json +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "experimentalDecorators": true, + ... + }, + "angularCompilerOptions": { + "fullTemplateTypeCheck": true, + "preserveWhitespaces": true, + ... + } +} +``` + More information about tsconfig extends can be found in the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). + {@a compiler-options} ## Angular template compiler options diff --git a/aio-ja/content/guide/architecture-components.en.md b/aio-ja/content/guide/architecture-components.en.md index e361c62cd6..75b1029fbd 100644 --- a/aio-ja/content/guide/architecture-components.en.md +++ b/aio-ja/content/guide/architecture-components.en.md @@ -15,7 +15,7 @@ Its `selectHero()` method sets a `selectedHero` property when the user clicks to The component acquires the heroes from a service, which is a TypeScript [parameter property](http://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties) on the constructor. The service is provided to the component through the dependency injection system. - + Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()`. @@ -31,7 +31,7 @@ In addition to containing or pointing to the template, the `@Component` metadata Here's an example of basic metadata for `HeroListComponent`. - + This example shows some of the most useful `@Component` configuration options: @@ -63,7 +63,7 @@ A template looks like regular HTML, except that it also contains Angular [templa For example, here is a template for the Tutorial's `HeroListComponent`. - + This template uses typical HTML elements like `

` and `

`, and also includes Angular template-syntax elements, `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and ``. The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data. @@ -87,7 +87,7 @@ The following diagram shows the four forms of data binding markup. Each form has This example from the `HeroListComponent` template uses three of these forms. - + * The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation) displays the component's `hero.name` property value within the `

  • ` element. @@ -101,7 +101,7 @@ Two-way data binding (used mainly in [template-driven forms](guide/forms)) combines property and event binding in a single notation. Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive. - + In two-way binding, a data property value flows to the input box from the component as with property binding. The user's changes also flow back to the component, resetting the property to the latest value, @@ -164,7 +164,7 @@ Just as for components, the metadata for a directive associates the decorated cl *Structural directives* alter layout by adding, removing, and replacing elements in the DOM. The example template uses two built-in structural directives to add application logic to how the view is rendered. - + * [`*ngFor`](guide/displaying-data#ngFor) is an iterative; it tells Angular to stamp out one `
  • ` per hero in the `heroes` list. * [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists. @@ -176,7 +176,7 @@ In templates they look like regular HTML attributes, hence the name. The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive. `ngModel` modifies the behavior of an existing element (typically ``) by setting its display value property and responding to change events. - + Angular has more pre-defined directives that either alter the layout structure (for example, [ngSwitch](guide/template-syntax#ngSwitch)) diff --git a/aio-ja/content/guide/architecture-components.md b/aio-ja/content/guide/architecture-components.md index 7241a762b6..c7529c9598 100644 --- a/aio-ja/content/guide/architecture-components.md +++ b/aio-ja/content/guide/architecture-components.md @@ -14,7 +14,7 @@ コンポーネントはサービスからヒーローを取得します。これはコンストラクターのTypeScript[パラメータプロパティ](http://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties)です。 サービスは、依存性の注入システムを介してコンポーネントに提供されます。 - + Angularは、ユーザーがアプリケーションを移動するときにコンポーネントを作成、更新、および破棄します。アプリは、ライフサイクルの各段階で、`ngOnInit()`などの[ライフサイクルフック](guide/lifecycle-hooks)を使用してアクションを実行できます。 @@ -31,7 +31,7 @@ Angularは、ユーザーがアプリケーションを移動するときにコ `HeroListComponent`の基本メタデータの例を次に示します。 - + この例は、もっとも役立つ `@Component` の設定オプションの一部です： @@ -62,7 +62,7 @@ Angularは、ユーザーがアプリケーションを移動するときにコ たとえば、チュートリアルの`HeroListComponent`のテンプレートは次のようになります。 - + このテンプレートは `

    `や `

    `のような典型的なHTML要素を使い、Angularテンプレート構文要素、`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`、``なども含みます。テンプレート構文要素は、プログラムロジックとデータを使用してHTMLをスクリーンにレンダリングする方法をAngularに伝えます。 @@ -85,7 +85,7 @@ Angular は、テンプレートの部分をコンポーネントの各部分に `HeroListComponent`テンプレートのこの例は、これらの3つのフォームを使用しています。 - + * `{{hero.name}}`[*補間*](guide/displaying-data#interpolation)は `

  • `要素内にコンポーネントの `hero.name`プロパティ値を表示します。 @@ -96,7 +96,7 @@ Angular は、テンプレートの部分をコンポーネントの各部分に 双方向データバインディング（主に[テンプレート駆動フォーム](guide/forms)で使用される）は、単一の表記法でプロパティとイベントのバインディングを結合します。`HeroDetailComponent` テンプレートの例は、`ngModel` ディレクティブとの双方向データバインディングを使用しています。 - + 双方向バインディングでは、データプロパティ値が、プロパティバインディングと同様にコンポーネントから入力ボックスに流れます。 ユーザーの変更もコンポーネントに戻り、イベントバインディングの場合と同様にプロパティを最新の値にリセットします。 @@ -154,7 +154,7 @@ Angular テンプレートは*ダイナミック*です。Angular がレンダ *構造ディレクティブ*は、DOMの要素を追加、削除、置換することによってレイアウトを変更します。サンプルテンプレートでは、2つの組み込み構造ディレクティブを使用して、ビューのレンダリング方法にアプリケーションロジックを追加しています。 - + * [`*ngFor`](guide/displaying-data#ngFor) は繰り返しで、`heroes`リストのヒーローごとに `
  • ` を打つようAngular に指示します。 * [`*ngIf`](guide/displaying-data#ngIf) は条件分岐で、選択されたヒーローが存在する場合のみ `HeroDetail` コンポーネントが含まれます。 @@ -165,7 +165,7 @@ Angular テンプレートは*ダイナミック*です。Angular がレンダ 双方向データバインディングを実装する `ngModel` ディレクティブは、属性ディレクティブの例です。`ngModel`は、その表示値プロパティを設定し、変更イベントに応答することによって、既存の要素の動作（通常は` `）を変更します。 - + Angularには、レイアウト構造を変更する （たとえば、[ngSwitch](guide/template-syntax#ngSwitch)） diff --git a/aio-ja/content/guide/architecture-modules.en.md b/aio-ja/content/guide/architecture-modules.en.md index 2566b687e4..241a9612da 100644 --- a/aio-ja/content/guide/architecture-modules.en.md +++ b/aio-ja/content/guide/architecture-modules.en.md @@ -23,7 +23,7 @@ An NgModule is defined by a class decorated with `@NgModule()`. The `@NgModule() Here's a simple root NgModule definition. - +
    diff --git a/aio-ja/content/guide/architecture-modules.md b/aio-ja/content/guide/architecture-modules.md index dc0423afe1..b5341e745c 100644 --- a/aio-ja/content/guide/architecture-modules.md +++ b/aio-ja/content/guide/architecture-modules.md @@ -23,7 +23,7 @@ NgModuleは`@NgModule`で装飾されたクラスとして定義されていま 単純なルートNgModuleの定義は次のとおりです。 - +
    diff --git a/aio-ja/content/guide/architecture-next-steps.en.md b/aio-ja/content/guide/architecture-next-steps.en.md index 5ee726ae37..53f5ba4c9a 100644 --- a/aio-ja/content/guide/architecture-next-steps.en.md +++ b/aio-ja/content/guide/architecture-next-steps.en.md @@ -4,20 +4,20 @@ After you understand the basic Angular building blocks, you can begin to learn m about the features and tools that are available to help you develop and deliver Angular applications. Here are some key features. -## Responsive programming tools +## Responsive programming * [Lifecycle hooks](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces. * [Observables and event processing](guide/observables): How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results. -## Client-server interaction tools +## Client-server interaction * [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. * [Server-side Rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers. * [Service Workers](guide/service-worker-intro): Use a service worker to reduce dependency on the network -significantly improving the use experience. +significantly improving the user experience. ## Domain-specific libraries @@ -28,23 +28,28 @@ without deep knowledge of animation techniques or CSS. ## Support for the development cycle +* [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment. + * [Testing platform](guide/testing): Run unit tests on your application parts as they interact with the Angular framework. * [Internationalization](guide/i18n): Make your app available in multiple languages with Angular's internationalization (i18n) tools. -* [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment. - * [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks. -## Setup and deployment tools +## Setup, build, and deployment configuration -* [Setup for local development](guide/setup): Set up a new project for development with QuickStart. +* [CLI Command Reference](cli): The Angular CLI is a command-line tool that you use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. -* [Installation](guide/npm-packages): The [Angular CLI](https://cli.angular.io/), Angular applications, and Angular itself depend on features and functionality provided by libraries that are available as [npm](https://docs.npmjs.com/) packages. +* [Workspace and File Structure](guide/file-structure): Understand the structure of Angular workspace and project folders. + +* [npm Packages](guide/npm-packages): The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm](https://docs.npmjs.com/) packages and distributed via the npm registry. The Angular CLI creates a default `package.json` file, which specifies a starter set of packages that work well together and jointly support many common application scenarios. * [TypeScript configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development. * [Browser support](guide/browser-support): Make your apps compatible across a wide range of browsers. +* [Building and Serving](guide/build): Learn to define different build and proxy server configurations for your project, such as development, staging, and production. + * [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server. + diff --git a/aio-ja/content/guide/architecture-next-steps.md b/aio-ja/content/guide/architecture-next-steps.md index 68f40be5a3..4c8495ad70 100644 --- a/aio-ja/content/guide/architecture-next-steps.md +++ b/aio-ja/content/guide/architecture-next-steps.md @@ -4,13 +4,13 @@ Angularアプリケーションの開発と提供に役立つ機能とツールの詳細を学ぶことができます。 ここにいくつかの重要な機能があります。 -## レスポンシブプログラミングツール +## レスポンシブプログラミング * [ライフサイクル・フック](guide/lifecycle-hooks): ライフサイクル・フックインターフェースを実装することで、コンポーネントの作成から破棄まで、コンポーネントの存続期間中の重要な瞬間に触れることができます。 * [Observable とイベント処理](guide/observables): コンポーネントやサービスで observable を使用して、ユーザーインタラクションイベントや非同期操作結果など、あらゆるタイプのメッセージをパブリッシュして購読する方法です。 -## クライアントとサーバーのインタラクションツール +## クライアントとサーバーのインタラクション * [HTTP](guide/http): HTTP クライアントを使用してサーバーと通信してデータを取得、保存し、サーバー側のアクションを呼び出します。 @@ -28,23 +28,27 @@ Angularアプリケーションの開発と提供に役立つ機能とツール ## 開発サイクルのサポート +* [コンパイル](guide/aot-compiler): Angularは、開発環境用のジャストインタイム（JIT）コンパイルと、本番環境用の事前（AOT）コンパイルを提供します。 + * [テスティングプラットフォーム](guide/testing): Angular フレームワークとやり取りするアプリケーションの部品において、ユニットテストを実行します。 * [国際化](guide/i18n): Angular の国際化(i18n)ツールを使用して、アプリを複数の言語で利用できるようにします。 -* [コンパイル](guide/aot-compiler): Angular は開発環境用のジャストインタイム(JIT)コンパイルと、本番環境用の事前(AOT)コンパイルを提供します。 - * [セキュリティガイドライン](guide/security): 一般的な Web アプリケーションの脆弱性やクロスサイトスクリプティングなどの攻撃に対する Angular の組み込みの保護機能について説明します。 -## セットアップとデプロイツール +## セットアップ、ビルドとデプロイの設定 -* [ローカル環境のセットアップ](guide/setup): クイックスタートで開発用の新しいプロジェクトをセットアップします。 +* [CLIコマンドリファレンス](cli): Angular CLIは、プロジェクトの作成、アプリケーションおよびライブラリコードの生成、およびテスト、バンドル、デプロイなどのさまざまな進行中の開発タスクの実行に使用するコマンドラインツールです。 -* [インストール](guide/npm-packages): [Angular CLI](https://cli.angular.io/)やAngular アプリケーション、そしてAngular自身は npm パッケージとして利用可能なライブラリによって提供される機能に依存します。 +* [ワークスペースとファイル構成](guide/file-structure): Angularワークスペースとプロジェクトフォルダの構造を理解する。 + +* [npmパッケージ](guide/npm-packages): Angular フレームワーク、Angular CLI、Angularアプリケーションで使用されるコンポーネントは、[npm](https://docs.npmjs.com/)パッケージとしてパッケージ化され、npmレジストリを介して配布されます。 Angular CLIはデフォルトの `package.json`ファイルを作成します。このファイルは、うまく機能し、多くの一般的なアプリケーションシナリオを共同でサポートするパッケージのスターターセットを指定します。 * [TypeScript の設定](guide/typescript-configuration): TypeScript は Angular アプリケーション開発における主要な言語です。 * [ブラウザのサポート](guide/browser-support): アプリを幅広いブラウザに対応させます。 +* [ビルドとサーブ](guide/build): 開発時、ステージング、およびプロダクションなど、プロジェクトのさまざまなビルドおよびプロキシサーバー構成を定義する方法を学びます。 + * [デプロイメント](guide/deployment): Angular アプリケーションをリモートサーバーにデプロイする方法を学びます。 diff --git a/aio-ja/content/guide/architecture-services.en.md b/aio-ja/content/guide/architecture-services.en.md index d555f3577c..8559581702 100644 --- a/aio-ja/content/guide/architecture-services.en.md +++ b/aio-ja/content/guide/architecture-services.en.md @@ -28,11 +28,11 @@ available to components through *dependency injection*. Here's an example of a service class that logs to the browser console. - + Services can depend on other services. For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server. - + ## Dependency injection (DI) @@ -62,7 +62,7 @@ A dependency doesn't have to be a service—it could be a function, for exam When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types. For example, the constructor of `HeroListComponent` needs `HeroService`. - + When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn't yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular. @@ -82,7 +82,7 @@ or you can register providers with specific modules or components. You register providers in the metadata of the service (in the `@Injectable()` decorator), or in the `@NgModule()` or `@Component()` metadata -* By default, the Angular CLI command `ng generate service` registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of HeroService class definition. +* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of HeroService class definition. ``` @Injectable({ @@ -111,6 +111,6 @@ or in the `@NgModule()` or `@Component()` metadata service with each new instance of that component. At the component level, register a service provider in the `providers` property of the `@Component()` metadata. - + For more detailed information, see the [Dependency Injection](guide/dependency-injection) section. diff --git a/aio-ja/content/guide/architecture-services.md b/aio-ja/content/guide/architecture-services.md index a769c2c578..d81dc911c7 100644 --- a/aio-ja/content/guide/architecture-services.md +++ b/aio-ja/content/guide/architecture-services.md @@ -28,11 +28,11 @@ Angularはこれらの原則を*強制*しません。Angularはアプリケー 次に、ブラウザコンソールにログを記録するサービスクラスの例を示します。 - + サービスは他のサービスに依存することがあります。たとえば、`HeroService` は `Logger` サービスに依存し、`BackendService` を使ってヒーローを取得します。そのサービスは、サーバーからヒーローを非同期的に取り出すための `HttpClient` サービスに依存するかもしれません。 - + ## 依存性の注入 (DI) @@ -62,7 +62,7 @@ DI は Angular フレームワークとつながり、必要なサービスや Angular は、コンポーネントクラスの新しいインスタンスを作成すると、コンストラクターのパラメータタイプを調べることによってコンポーネントが必要とするサービスやその他の依存関係を判断します。たとえば、`HeroListComponent` のコンストラクターには　`HeroService` が必要です。 - + Angular はコンポーネントがサービスに依存していることを検出すると、インジェクターにそのサービスの既存のインスタンスがあるかどうかをまずチェックします。要求されたサービスインスタンスがまだ存在しない場合、インジェクターは登録されたプロバイダーを使用してインジェクターを作成し、サービスを Angular に返す前にインジェクターに追加します。 @@ -82,7 +82,7 @@ Angular はコンポーネントがサービスに依存していることを検 プロバイダーはサービスのメタデータ(`@Injectable()` デコレーター内) または `@NgModule()` や `@Component()` メタデータにプロバイダーを登録します -* デフォルトでは Angular CLI コマンド `ng generate service` はプロバイダーのメタデータを `@Injectable()` デコレーターに含めることによってプロバイダーをルートインジェクターに登録します。このチュートリアルでは、このメソッドを使用して HeroService クラス定義のプロバイダーを登録します。 +* デフォルトでは Angular CLI コマンド [ng generate service](cli/generate) はプロバイダーのメタデータを `@Injectable()` デコレーターに含めることによってプロバイダーをルートインジェクターに登録します。このチュートリアルでは、このメソッドを使用して HeroService クラス定義のプロバイダーを登録します。 ``` js @Injectable({ @@ -111,6 +111,6 @@ Angular はコンポーネントがサービスに依存していることを検 新しいサービスインスタンスが取得されます。 コンポーネントレベルで `@Component()` メタデータの `providers` プロパティにサービスプロバイダーを登録します。 - + 詳細は、[依存性の注入](guide/dependency-injection)セクションを参照してください. diff --git a/aio-ja/content/guide/attribute-directives.en.md b/aio-ja/content/guide/attribute-directives.en.md index bec3a903ac..270985d5b0 100644 --- a/aio-ja/content/guide/attribute-directives.en.md +++ b/aio-ja/content/guide/attribute-directives.en.md @@ -37,13 +37,13 @@ This page demonstrates building a simple _appHighlight_ attribute directive to set an element's background color when the user hovers over that element. You can apply it like this: - + {@a write-directive} ### Write the directive code -Create the directive class file in a terminal window with this CLI command. +Create the directive class file in a terminal window with the CLI command [`ng generate directive`](cli/generate). ng generate directive highlight @@ -59,9 +59,9 @@ _Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same The generated `src/app/highlight.directive.ts` is as follows: - + -The imported `Directive` symbol provides the Angular the `@Directive` decorator. +The imported `Directive` symbol provides Angular the `@Directive` decorator. The `@Directive` decorator's lone configuration property specifies the directive's [CSS attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors), `[appHighlight]`. @@ -92,7 +92,7 @@ Exporting `HighlightDirective` makes the directive accessible. Now edit the generated `src/app/highlight.directive.ts` to look as follows: - + The `import` statement specifies an additional `ElementRef` symbol from the Angular `core` library: @@ -111,7 +111,7 @@ This first implementation sets the background color of the host element to yello To use the new `HighlightDirective`, add a paragraph (`

    `) element to the template of the root `AppComponent` and apply the directive as an attribute. - + Now run the application to see the `HighlightDirective` in action. @@ -136,12 +136,12 @@ and respond by setting or clearing the highlight color. Begin by adding `HostListener` to the list of imported symbols. - + Then add two eventhandlers that respond when the mouse enters or leaves, each adorned by the `HostListener` decorator. - + The `@HostListener` decorator lets you subscribe to events of the DOM element that hosts an attribute directive, the `

    ` in this case. @@ -162,11 +162,11 @@ The handlers delegate to a helper method that sets the color on the host DOM ele The helper method, `highlight`, was extracted from the constructor. The revised constructor simply declares the injected `el: ElementRef`. - + Here's the updated directive in full: - + Run the app and confirm that the background color appears when the mouse hovers over the `p` and disappears as it moves out. @@ -183,11 +183,11 @@ Currently the highlight color is hard-coded _within_ the directive. That's infle In this section, you give the developer the power to set the highlight color while applying the directive. Begin by adding `Input` to the list of symbols imported from `@angular/core`. - + Add a `highlightColor` property to the directive class like this: - + {@a input} @@ -200,19 +200,19 @@ Without that input metadata, Angular rejects the binding; see [below](guide/attr Try it by adding the following directive binding variations to the `AppComponent` template: - + Add a `color` property to the `AppComponent`. - + Let it control the highlight color with a property binding. - + That's good, but it would be nice to _simultaneously_ apply the directive and set the color _in the same attribute_ like this. - + The `[appHighlight]` attribute binding both applies the highlighting directive to the `

    ` element and sets the directive's highlight color with a property binding. @@ -221,7 +221,7 @@ That's a crisp, compact syntax. You'll have to rename the directive's `highlightColor` property to `appHighlight` because that's now the color property binding name. - + This is disagreeable. The word, `appHighlight`, is a terrible property name and it doesn't convey the property's intent. @@ -233,23 +233,23 @@ Fortunately you can name the directive property whatever you want _and_ **_alias Restore the original property name and specify the selector as the alias in the argument to `@Input`. - + _Inside_ the directive the property is known as `highlightColor`. _Outside_ the directive, where you bind to it, it's known as `appHighlight`. You get the best of both worlds: the property name you want and the binding syntax you want: - + Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property. If someone neglects to bind to `appHighlightColor`, highlight the host element in red: - + Here's the latest version of the directive class. - + ## Write a harness to try it @@ -259,11 +259,11 @@ lets you pick the highlight color with a radio button and bind your color choice Update app.component.html as follows: - + Revise the `AppComponent.color` so that it has no initial value. - + Here are the harness and directive in action. @@ -283,12 +283,12 @@ Let the template developer set the default color. Add a second **input** property to `HighlightDirective` called `defaultColor`: - + Revise the directive's `onMouseEnter` so that it first tries to highlight with the `highlightColor`, then with the `defaultColor`, and falls back to "red" if both properties are undefined. - + How do you bind to a second property when you're already binding to the `appHighlight` attribute name? @@ -296,7 +296,7 @@ As with components, you can add as many directive property bindings as you need The developer should be able to write the following template HTML to both bind to the `AppComponent.color` and fall back to "violet" as the default color. - + Angular knows that the `defaultColor` binding belongs to the `HighlightDirective` because you made it _public_ with the `@Input` decorator. @@ -319,12 +319,12 @@ This page covered how to: The final source code follows: - - - - - - + + + + + + @@ -338,11 +338,11 @@ You can also experience and download the + You've seen it with an alias: - + Either way, the `@Input` decorator tells Angular that this property is _public_ and available for binding by a parent component. @@ -374,7 +374,7 @@ You can tell if `@Input` is needed by the position of the property name in a bin Now apply that reasoning to the following example: - + * The `color` property in the expression on the right belongs to the template's component. The template and its component trust each other. diff --git a/aio-ja/content/guide/attribute-directives.md b/aio-ja/content/guide/attribute-directives.md index 387f166be6..3f48474618 100644 --- a/aio-ja/content/guide/attribute-directives.md +++ b/aio-ja/content/guide/attribute-directives.md @@ -2,7 +2,7 @@ **属性**ディレクティブは、DOM要素の見た目や動作を変更します。 -を実行してください。 +を実行してください。 {@a directive-overview} @@ -28,13 +28,13 @@ Angularには、3つのディレクティブがあります。 このページでは、ユーザーがその要素の上を移動したときに、要素の背景色を設定するシンプルな _appHighlight_ 属性ディレクティブを作成する方法を示します。これは次のように書くことができます。 - + {@a write-directive} ### ディレクティブのコードを書く -次のCLIコマンドをターミナル画面に入力して、ディレクティブクラスを作成します。 +CLIコマンド [`ng generate directive`](cli/generate) をターミナル画面に入力して、ディレクティブクラスを作成します。 ng generate directive highlight @@ -50,7 +50,7 @@ _ディレクティブ_ は、 _コンポーネント_ と同じ方法で[Angul 生成された`src/app/highlight.directive.ts`は次のとおりです。 - + インポートされた`Directive`シンボルは、Angularの`@Directive`デコレーターを提供します。 @@ -74,7 +74,7 @@ _属性セレクタ_ パターンは、この種のディレクティブの名 生成された`src/app/highlight.directive.ts`を次のように編集します。 - + `import`ステートメントは、Angularの`core`ライブラリから追加の`ElementRef`シンボルを指定します。 @@ -90,7 +90,7 @@ _属性セレクタ_ パターンは、この種のディレクティブの名 新しい`HighlightDirective`を使用するには、ルートである`AppComponent`のテンプレートへ段落(`

    `)要素を追加し、属性としてディレクティブを適用します。 - + 次に、アプリケーションを起動して`HighlightDirective`の挙動を確認します。 @@ -108,11 +108,11 @@ ng serve まず、インポートされたシンボルのリストに`HostListener`を追加します。 - + 次に、マウスの出入りに応答する2つのイベントハンドラーを追加します。個々のイベントハンドラーは、`HostListener`デコレーターによって装飾されます。 - + `@HostListener`デコレーターは、属性ディレクティブをホストする要素（この場合は`

    `）DOM要素のイベントに登録することができます。 @@ -131,11 +131,11 @@ ng serve ヘルパーメソッドである`highlight`がコンストラクターから抽出されました。 改訂されたコンストラクターは、単に注入された`el: ElementRef`を宣言します。 - + 更新されたディレクティブは、すべてここにあります。 - + アプリケーションを起動し、マウスが`p`の上へホバーするときに背景色が表示され、離れると消えていることを確認します。 @@ -150,11 +150,11 @@ ng serve 現在、ハイライト表示の色は、ディレクティブ _内_ でハードコードされていますが、これでは柔軟性に欠けてしまいます。このセクションでは、ディレクティブを適用しながら、ハイライトカラーを設定する方法を開発者へ示します。 `@angular/core`からインポートされたシンボルのリストに`Input`を追加することから始めてください。 - + 次のように、ディレクティブクラスに`highlightColor`プロパティを追加します。 - + {@a input} @@ -166,26 +166,26 @@ ng serve `AppComponent`のテンプレートに次のバリエーションを追加してみてください。 - + `AppComponent`に`color`プロパティを追加してください。 - + プロパティバインディングでハイライトの色を制御します。 - + ディレクティブを同時に適用し、このような _同じ属性_ に色を設定するとよりよいでしょう。 - + `[appHighlight]`属性バインディングが、`

    `要素へハイライト表示ディレクティブを適用し、プロパティバインディングでディレクティブのハイライトカラーを設定します。 両方の作業を行うには、ディレクティブの属性セレクター(`[appHighlight]`)を再利用しており、これは明快でコンパクトな構文です。 カラーのプロパティバインディングの名前になったため、ディレクティブの`highlightColor`プロパティの名前を`appHighlight`に変更する必要があります。 - + `appHighlight`という単語は恐ろしいプロパティ名であり、プロパティの意図を伝えていないので、これでは不愉快です。 @@ -197,22 +197,22 @@ ng serve 元のプロパティ名を復元し、セレクターを`@Input`の引数のエイリアスとして指定します。 - + このディレクティブの _内部_ では、プロパティは`highlightColor`として知られています。 このディレクティブの _外部_ では、バインド先は`appHighlight`と呼ばれています。 これにより、望むプロパティ名とバインディング構文との、両方のベストな世界を得ます。 - + エイリアスを介して`highlightColor`へバインディングするので、`onMouseEnter()`メソッドをそのプロパティを使用するために修正してください。誰かが`appHighlightColor`へのバインディングを怠ると、ホスト要素を赤でハイライトします。 - + ここに、ディレクティブのクラスの最新バージョンがあります。 - + ## 試すためのハーネスを書く @@ -220,11 +220,11 @@ ng serve 次のようにapp.component.htmlを更新します。 - + 初期値を持たないように`AppComponent.color`を修正してください。 - + ここにハーネスとディレクティブの動作するものがあります。 @@ -242,11 +242,11 @@ ng serve `HighlightDirective`へ`defaultColor`と呼ばれる2番目の**input**プロパティを追加します。 - + ディレクティブの`onMouseEnter`を改訂して、最初に`highlightColor`でハイライトし、次に`defaultColor`でハイライトし、どちらのプロパティも未定義の場合は「赤」に戻します。 - + すでに`appHighlight`属性へバインドしているとき、2番目のプロパティへどのようにバインドしますか？ @@ -254,7 +254,7 @@ ng serve 開発者は、次のテンプレートHTMLを書くことができ、どちらも`AppComponent.color`へバインドします。デフォルトの色として「紫」に戻ります。 - + Angularは、`@Input`デコレーターで _パブリック_ にしたため、`defaultColor`が`HighlightDirective`に属していることを知っています。 @@ -276,16 +276,16 @@ Angularは、`@Input`デコレーターで _パブリック_ にしたため、` 最終的なソースコードは次のとおりです。 - - - - - - + + + + + + -また、を体験、ダウンロードすることもできます。 +また、を体験、ダウンロードすることもできます。 {@a why-input} @@ -293,11 +293,11 @@ Angularは、`@Input`デコレーターで _パブリック_ にしたため、` このデモでは、`highlightColor`プロパティは、`HighlightDirective`の***input***プロパティです。エイリアスなしで適用されたことがわかりました。 - + エイリアスありで適用されたこともわかりました。 - + どちらも場合でも、`@Input`デコレーターは、Angularにこのプロパティが _パブリック_ であり、親コンポーネントによるバインドが可能であることを伝えています。`@Input`がなければ、Angularはプロパティへバインドすることを拒否します。 @@ -316,7 +316,7 @@ Angularは、`@Input`デコレーターで _パブリック_ にしたため、` 次に、その理屈を次の例に適用します。 - + * 右側の式の`color`プロパティは、テンプレートのコンポーネントに属します。テンプレートとそのコンポーネントは、お互いを信頼します。`color`プロパティは`@Input`デコレーターを必要としません。 diff --git a/aio-ja/content/guide/bootstrapping.en.md b/aio-ja/content/guide/bootstrapping.en.md index fe5addf879..70c590f662 100644 --- a/aio-ja/content/guide/bootstrapping.en.md +++ b/aio-ja/content/guide/bootstrapping.en.md @@ -12,7 +12,7 @@ Every application has at least one Angular module, the _root_ module that you bootstrap to launch the application. By convention, it is usually called `AppModule`. -If you use the CLI to generate an app, the default `AppModule` is as follows: +If you use the [Angular CLI](cli) to generate an app, the default `AppModule` is as follows: ```typescript /* JavaScript imports */ @@ -52,7 +52,7 @@ The `@NgModule` decorator identifies `AppModule` as an `NgModule` class. * **_bootstrap_**—the _root_ component that Angular creates and inserts into the `index.html` host web page. -The default CLI application only has one component, `AppComponent`, so it +The default application created by the Angular CLI only has one component, `AppComponent`, so it is in both the `declarations` and the `bootstrap` arrays. {@a declarations} @@ -106,18 +106,18 @@ To use a directive, component, or pipe in a module, you must do a few things: Those three steps look like the following. In the file where you create your directive, export it. The following example, named `ItemDirective` is the default directive structure that the CLI generates in its own file, `item.directive.ts`: - + The key point here is that you have to export it so you can import it elsewhere. Next, import it into the NgModule, in this example `app.module.ts`, with a JavaScript import statement: - + And in the same file, add it to the `@NgModule` `declarations` array: - + diff --git a/aio-ja/content/guide/bootstrapping.md b/aio-ja/content/guide/bootstrapping.md index fc7da90a04..046e4ef620 100644 --- a/aio-ja/content/guide/bootstrapping.md +++ b/aio-ja/content/guide/bootstrapping.md @@ -11,7 +11,7 @@ NgModuleは、アプリケーション部品がどのように適合するかを すべてのアプリケーションには少なくとも1つのAngularモジュール（アプリケーションを起動するためにブートストラップするルートモジュール）があります。 慣例により、それは通常`AppModule`と呼ばれます。 -CLIを使用してアプリケーションを生成する場合、デフォルトAppModuleは次のようになります。 +[Angular CLI](cli) を使用してアプリケーションを生成する場合、デフォルトAppModuleは次のようになります。 ```typescript /* JavaScript imports */ @@ -50,7 +50,7 @@ import文の後に、 * **_providers_**—サービスプロバイダー * **_bootstrap_**—Angularが作成してホストWebページである`index.html`に挿入する_ルート_コンポーネント。 -デフォルトのCLIアプリケーションにはコンポーネントが`AppComponent`1つしかなく、 +Angular CLIで作成されたデフォルトのアプリケーションにはコンポーネントが`AppComponent`1つしかなく、 `declarations`と`bootstrap`配列の両方にあります。 {@a the-declarations-array} @@ -102,18 +102,18 @@ import文の後に、 これらの3つのステップは次のようになります。ディレクティブを作成するファイルで、ディレクティブをエクスポートします。 `ItemDirective`という名前の次の例は、CLIが生成する`item.directive.ts`ファイルに生成するデフォルトのディレクティブ構造です。 - + 重要な点は、別の場所にインポートできるようにエクスポートする必要があることです。 次に、JavaScriptのimport文を使用してNgModule、この例では`app.module.ts`にインポートします。 - + そして、同じファイルで`@NgModule`の`declarations`配列に追加します。 - + これで`ItemDirective`をコンポーネントで使えるようになりました。この例では`AppModule`を使いましたが、フィーチャーモジュールでも同じようにできます。ディレクティブの詳細については、[属性ディレクティブ](guide/attribute-directives)と[構造ディレクティブ](guide/structural-directives)を参照してください。また、[パイプ](guide/pipes)やコンポーネントにも同じテクニックを使用します。 diff --git a/aio-ja/content/guide/browser-support.md b/aio-ja/content/guide/browser-support.md index fea8cd245a..df9e9a5c22 100644 --- a/aio-ja/content/guide/browser-support.md +++ b/aio-ja/content/guide/browser-support.md @@ -122,7 +122,7 @@ Note that polyfills cannot magically transform an old, slow browser into a moder ## Enabling polyfills -[Angular CLI](https://github.com/angular/angular-cli/wiki) users enable polyfills through the `src/polyfills.ts` file that +[Angular CLI](cli) users enable polyfills through the `src/polyfills.ts` file that the CLI created with your project. This file incorporates the mandatory and many of the optional polyfills as JavaScript `import` statements. @@ -140,7 +140,7 @@ For example, [if you need the web animations polyfill](http://caniuse.com/#feat= Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example: - + /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation @@ -553,7 +553,7 @@ computed with the closure com If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this. - + <!-- pre-zone polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/web-animations-js/web-animations.min.js"></script> diff --git a/aio-ja/content/guide/build.md b/aio-ja/content/guide/build.md new file mode 100644 index 0000000000..7fad196614 --- /dev/null +++ b/aio-ja/content/guide/build.md @@ -0,0 +1,492 @@ +# Building and serving Angular apps + +This page discusses build-specific configuration options for Angular projects. + +{@a app-environments} + +## Configuring application environments + +You can define different named build configurations for your project, such as *stage* and *production*, with different defaults. + +Each named build configuration can have defaults for any of the options that apply to the various build targets, such as `build`, `serve`, and `test`. The [Angular CLI](cli) `build`, `serve`, and `test` commands can then replace files with appropriate versions for your intended target environment. + +The following figure shows how a project has multiple build targets, which can be executed using the named configurations that you define. + +

    + build configurations and targets +
    + +### Configure environment-specific defaults + +A project's `src/environments/` folder contains the base configuration file, `environment.ts`, which provides a default environment. +You can add override defaults for additional environments, such as production and staging, in target-specific configuration files. + +For example: + +``` +└──myProject/src/environments/ + └──environment.ts + └──environment.prod.ts + └──environment.stage.ts +``` + +The base file `environment.ts`, contains the default environment settings. For example: + + +export const environment = { + production: false +}; + + +The `build` command uses this as the build target when no environment is specified. +You can add further variables, either as additional properties on the environment object, or as separate objects. +For example, the following adds a default for a variable to the default environment: + +``` +export const environment = { + production: false, + apiUrl: 'http://my-api-url' +}; +``` + +You can add target-specific configuration files, such as `environment.prod.ts`. +The following sets content sets default values for the production build target: + +``` +export const environment = { + production: true + apiUrl: 'http://my-prod-url' +}; +``` + +### Using environment-specific variables in your app + +The following application structure configures build targets for production and staging environments: + +``` +└── src + └── app + ├── app.component.html + └── app.component.ts + └── environments + ├── environment.prod.ts + ├── environment.staging.ts + └── environment.ts +``` + +To use the environment configurations you have defined, your components must import the original environments file: + +``` +import { environment } from './../environments/environment'; +``` + +This ensures that the build and serve commands can find the configurations for specific build targets. + +The following code in the component file (`app.component.ts`) uses an environment variable defined in the configuration files. + +``` +import { Component } from '@angular/core'; +import { environment } from './../environments/environment'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + constructor() { + console.log(environment.production); // Logs false for default environment + } + title = 'app works!'; +} +``` +{@a file-replacement} + +## Configure target-specific file replacements + +The main CLI configuration file, `angular.json`, contains a `fileReplacements` section in the configuration for each build target, which allows you to replace any file with a target-specific version of that file. +This is useful for including target-specific code or variables in a build that targets a specific environment, such as production or staging. + +By default no files are replaced. +You can add file replacements for specific build targets. +For example: + +``` +"configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + ... +``` + +This means that when you build your production configuration (using `ng build --prod` or `ng build --configuration=production`), the `src/environments/environment.ts` file is replaced with the target-specific version of the file, `src/environments/environment.prod.ts`. + +You can add additional configurations as required. To add a staging environment, create a copy of `src/environments/environment.ts` called `src/environments/environment.staging.ts`, then add a `staging` configuration to `angular.json`: + +``` +"configurations": { + "production": { ... }, + "staging": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.staging.ts" + } + ] + } +} +``` + +You can add more configuration options to this target environment as well. +Any option that your build supports can be overridden in a build target configuration. + +To build using the staging configuration, run `ng build --configuration=staging`. + +You can also configure the `serve` command to use the targeted build configuration if you add it to the "serve:configurations" section of `angular.json`: + +``` +"serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "your-project-name:build" + }, + "configurations": { + "production": { + "browserTarget": "your-project-name:build:production" + }, + "staging": { + "browserTarget": "your-project-name:build:staging" + } + } +}, +``` + +{@a size-budgets} + +## Configure size budgets + +As applications grow in functionality, they also grow in size. +The CLI allows you to set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define. + +Define your size boundaries in the CLI configuration file, `angular.json`, in a `budgets` section for each [configured environment](#app-environments). + +``` +{ + ... + "configurations": { + "production": { + ... + budgets: [] + } + } +} +``` + +You can specify size budgets for the entire app, and for particular parts. +Each budget entry configures a budget of a given type. +Specify size values in the following formats: + +* 123 or 123b: Size in bytes + +* 123kb: Size in kilobytes + +* 123mb: Size in megabytes + +* 12%: Percentage of size relative to baseline. (Not valid for baseline values.) + +When you configure a budget, the build system warns or reports and error when a given part of the app reaches or exceeds a boundary size that you set. + +Each budget entry is a JSON object with the following properties: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    PropertyValue
    typeThe type of budget. One of: + + * bundle - The size of a specific bundle. + * initial - The initial size of the app. + * allScript - The size of all scripts. + * all - The size of the entire app. + * anyScript - The size of any one script. + * any - The size of any file. + +
    name + + The name of the bundle (for `type=bundle`). + +
    baselineAn absolute baseline size for percentage values.
    maximumWarningWarns when a size exceeds this threshold percentage of the baseline.
    maximumErrorReports an error when the size exceeds this threshold percentage of the baseline.
    minimumWarningWarns when the size reaches this threshold percentage of the baseline.
    minimumErrorReports an error when the size reaches this threshold percentage of the baseline.
    warningWarns when the size ??reaches or exceeds?? this threshold percentage of the baseline.
    errorReports an error when the size ??reaches or exceeds?? this threshold percentage of the baseline.
    + + +{@a browser-compat} + +## Configuring browser compatibility + +The CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure compatibility with different browser and browser versions. +You may find it necessary to target specific browsers or exclude certain browser versions from your build. + +Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/browserslist/browserslist) to figure out which browsers to support with prefixing. +Browserlist looks for configuration options in a `browserlist` property of the package configuration file, or in a configuration file named `.browserslistrc`. +Autoprefixer looks for the Browserlist configuration when it prefixes your CSS. + +* You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, `package.json`: +``` + "browserslist": [ + "> 1%", + "last 2 versions" + ] +``` + +* Alternatively, you can add a new file, `.browserslistrc`, to the project directory, that specifies browsers you want to support: +``` + ### Supported Browsers + > 1% + last 2 versions +``` + +See the [browserslist repo](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions. + +
    +Backward compatibility + +If you want to produce a progressive web app and are using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to grade the project, add the following browserslist entry to your `package.json` file, in order to eliminate the [old flexbox](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox) prefixes: + +``` +"browserslist": [ + "last 2 versions", + "not ie <= 10", + "not ie_mob <= 10" +] +``` + +
    + +{@a proxy} + +## Proxying to a backend server + +You can use the [proxying support](https://webpack.js.org/configuration/dev-server/#devserver-proxy) in the `webpack` dev server to divert certain URLs to a backend server, by passing a file to the `--proxy-config` build option. +For example, to divert all calls for `http://localhost:4200/api` to a server running on `http://localhost:3000/api`, take the following steps. + +1. Create a file `proxy.conf.json` in the projects `src/` folder, next to `package.json`. + +1. Add the following content to the new proxy file: + ``` + { + "/api": { + "target": "http://localhost:3000", + "secure": false + } + } + ``` + +1. In the CLI configuration file, `angular.json`, add the `proxyConfig` option to the `serve` target: + ``` + ... + "architect": { + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "your-application-name:build", + "proxyConfig": "src/proxy.conf.json" + }, + ... + ``` + +1. To run the dev server with this proxy configuration, call `ng serve`. + +You can edit the proxy configuration file to add configuration options; some examples are given below. +For a description of all options, see [webpack DevServer documentation](https://webpack.js.org/configuration/dev-server/#devserver-proxy). + +Note that if you edit the proxy configuration file, you must relaunch the `ng serve` process to make your changes effective. + +### Rewrite the URL path + +The `pathRewrite` proxy configuration option lets you rewrite the URL path at run time. +For example, you can specify the following `pathRewrite` value to the proxy configuration to remove "api" from the end of a path. + +``` +{ + "/api": { + "target": "http://localhost:3000", + "secure": false, + "pathRewrite": { + "^/api": "" + } + } +} +``` + +If you need to access a backend that is not on `localhost`, set the `changeOrigin` option as well. For example: + +``` +{ + "/api": { + "target": "http://npmjs.org", + "secure": false, + "pathRewrite": { + "^/api": "" + }, + "changeOrigin": true + } +} +``` + +To help determine whether your proxy is working as intended, set the `logLevel` option. For example: + +``` +{ + "/api": { + "target": "http://localhost:3000", + "secure": false, + "pathRewrite": { + "^/api": "" + }, + "logLevel": "debug" + } +} +``` + +Proxy log levels are `info` (the default), `debug`, `warn`, `error`, and `silent`. + +### Proxy multiple entries + +You can proxy multiple entries to the same target by defining the configuration in JavaScript. + +Set the proxy configuration file to `proxy.conf.js` (instead of `proxy.conf.json`), and specify configuration files as in the following example. + +``` +const PROXY_CONFIG = [ + { + context: [ + "/my", + "/many", + "/endpoints", + "/i", + "/need", + "/to", + "/proxy" + ], + target: "http://localhost:3000", + secure: false + } +] + +module.exports = PROXY_CONFIG; +``` + +In the CLI configuration file, `angular.json`, point to the JavaScript proxy configuration file: + +``` +... +"architect": { + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "your-application-name:build", + "proxyConfig": "src/proxy.conf.js" + }, +... +``` + +### Bypass the proxy + +If you need to optionally bypass the proxy, or dynamically change the request before it's sent, add the bypass option, as shown in this JavaScript example. + +``` +const PROXY_CONFIG = { + "/api/proxy": { + "target": "http://localhost:3000", + "secure": false, + "bypass": function (req, res, proxyOptions) { + if (req.headers.accept.indexOf("html") !== -1) { + console.log("Skipping proxy for browser request."); + return "/index.html"; + } + req.headers["X-Custom-Header"] = "yes"; + } + } +} + +module.exports = PROXY_CONFIG; +``` + +### Using corporate proxy + +If you work behind a corporate proxy, the cannot directly proxy calls to any URL outside your local network. +In this case, you can configure the backend proxy to redirect calls through your corporate proxy using an agent: + + +npm install --save-dev https-proxy-agent + + +When you define an environment variable `http_proxy` or `HTTP_PROXY`, an agent is automatically added to pass calls through your corporate proxy when running `npm start`. + +Use the following content in the JavaScript configuration file. + +``` +var HttpsProxyAgent = require('https-proxy-agent'); +var proxyConfig = [{ + context: '/api', + target: 'http://your-remote-server.com:3000', + secure: false +}]; + +function setupForCorporateProxy(proxyConfig) { + var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY; + if (proxyServer) { + var agent = new HttpsProxyAgent(proxyServer); + console.log('Using corporate proxy server: ' + proxyServer); + proxyConfig.forEach(function(entry) { + entry.agent = agent; + }); + } + return proxyConfig; +} + +module.exports = setupForCorporateProxy(proxyConfig); +``` + diff --git a/aio-ja/content/guide/complex-animation-sequences.md b/aio-ja/content/guide/complex-animation-sequences.md index 929030d432..54eaee3fd9 100644 --- a/aio-ja/content/guide/complex-animation-sequences.md +++ b/aio-ja/content/guide/complex-animation-sequences.md @@ -38,7 +38,7 @@ The following example demonstrates how to use `query()` and `stagger()` function * Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it. - + ## Parallel animation using group() function @@ -51,7 +51,7 @@ You've seen how to add a delay between each successive animation. But you may al In the following example, using groups on both `:enter` and `:leave` allow for two different timing configurations. They're applied to the same element in parallel, but run independently. - + ## Sequential vs. parallel animations @@ -70,11 +70,11 @@ The filter works in real time as you type. Elements leave the page as you type e The HTML template contains a trigger called `filterAnimation`. - + The component file contains three transitions. - + The animation does the following: diff --git a/aio-ja/content/guide/component-interaction.en.md b/aio-ja/content/guide/component-interaction.en.md index fd0ef1c53e..16ba17cdbd 100644 --- a/aio-ja/content/guide/component-interaction.en.md +++ b/aio-ja/content/guide/component-interaction.en.md @@ -28,7 +28,7 @@ in which two or more components share information. typically adorned with [@Input decorations](guide/template-syntax#inputs-outputs). - + @@ -41,7 +41,7 @@ binding its `master` string property to the child's `master` alias, and each iteration's `hero` instance to the child's `hero` property. - + @@ -61,7 +61,7 @@ The running application displays three heroes: E2E test that all children were instantiated and displayed as expected: - + @@ -79,7 +79,7 @@ The setter of the `name` input property in the child `NameChildComponent` trims the whitespace from a name and replaces an empty value with default text. - + @@ -88,7 +88,7 @@ trims the whitespace from a name and replaces an empty value with default text. Here's the `NameParentComponent` demonstrating name variations including a name with all spaces: - + @@ -105,7 +105,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name E2E tests of input property setter with empty and non-empty names: - + @@ -134,7 +134,7 @@ Learn about `ngOnChanges()` in the [LifeCycle Hooks](guide/lifecycle-hooks) chap This `VersionChildComponent` detects changes to the `major` and `minor` input properties and composes a log message reporting these changes: - + @@ -143,7 +143,7 @@ This `VersionChildComponent` detects changes to the `major` and `minor` input pr The `VersionParentComponent` supplies the `minor` and `major` values and binds buttons to methods that change them. - + @@ -164,7 +164,7 @@ Test that ***both*** input properties are set initially and that button clicks t the expected `ngOnChanges` calls and values: - + @@ -184,7 +184,7 @@ The child's `EventEmitter` property is an ***output property***, as seen in this `VoterComponent`: - + @@ -196,7 +196,7 @@ The parent `VoteTakerComponent` binds an event handler called `onVoted()` that r payload `$event` and updates a counter. - + @@ -217,7 +217,7 @@ and the method processes it: Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters: - + @@ -240,7 +240,7 @@ The following is a child `CountdownTimerComponent` that repeatedly counts down t It has `start` and `stop` methods that control the clock and it displays a countdown status message in its own template. - + @@ -249,7 +249,7 @@ countdown status message in its own template. The `CountdownLocalVarParentComponent` that hosts the timer component is as follows: - + @@ -284,7 +284,7 @@ match the seconds displayed in the child's status message. Test also that clicking the *Stop* button pauses the countdown timer: - + @@ -324,7 +324,7 @@ is solely for the purpose of demonstration. Here is the parent, `CountdownViewChildParentComponent`: - + @@ -374,7 +374,7 @@ Components outside this component subtree have no access to the service or their This `MissionService` connects the `MissionControlComponent` to multiple `AstronautComponent` children. - + @@ -384,7 +384,7 @@ The `MissionControlComponent` both provides the instance of the service that it (through the `providers` metadata array) and injects that instance into itself through its constructor: - + @@ -394,7 +394,7 @@ The `AstronautComponent` also injects the service in its constructor. Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance: - + @@ -433,7 +433,7 @@ Tests click buttons of both the parent `MissionControlComponent` and the `Astron and verify that the history meets expectations: - + diff --git a/aio-ja/content/guide/component-interaction.md b/aio-ja/content/guide/component-interaction.md index 0e2be453a7..123775be95 100644 --- a/aio-ja/content/guide/component-interaction.md +++ b/aio-ja/content/guide/component-interaction.md @@ -28,7 +28,7 @@ 一般的に [@Input デコレーション](guide/template-syntax#inputs-outputs) で装飾しています。 - + @@ -41,7 +41,7 @@ 個々の繰り返しの `hero` インスタンスを子の `hero` プロパティに渡します。 - + @@ -61,7 +61,7 @@ E2E は、予想とおりに、すべての子をインスタンス化と表示されることをテストします： - + @@ -79,7 +79,7 @@ E2E は、予想とおりに、すべての子をインスタンス化と表示 名前から空白を削除し、空の値をデフォルトのテキストに置き換えます。 - + @@ -88,7 +88,7 @@ E2E は、予想とおりに、すべての子をインスタンス化と表示 これは `NameParentComponent`があらゆる空白を含む名前のバリエーションのデモンストレーションです： - + @@ -105,7 +105,7 @@ E2E は、予想とおりに、すべての子をインスタンス化と表示 E2E は、空と空では無い名前を含む入力プロパティのセッターをテストします： - + @@ -134,7 +134,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ この `VersionChildComponent` は、`major` と `minor` 入力プロパティの変化を検出し、これらの変化を報告するログメッセージを構成します： - + @@ -143,7 +143,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ `VersionParentComponent` は `minor` と `major` の値を提供し、ボタンをそれらを変更するメソッドに結び付けます。 - + @@ -164,7 +164,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ ボタンのクリックが期待された `ngOnChanges` の呼び出しと値を引き起こすことをテストします。： - + @@ -184,7 +184,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ [@Output デコレーション](guide/template-syntax#inputs-outputs) で装飾されます： - + @@ -196,7 +196,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ `onVoted()` イベントハンドラーをバインドします。 - + @@ -217,7 +217,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ *Agree* と *Disagree* ボタンをクリックすることで適切にカウンターが更新されることをテストしましょう： - + @@ -240,7 +240,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ 時計を制御しカウントダウンの状況のメッセージをテンプレート内に表示する `start` と `stop` メソッドを持ちます。 - + @@ -249,7 +249,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ タイマーコンポーネントを提供する `CountdownLocalVarParentComponent` はこちらです： - + @@ -284,7 +284,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ カウントダウンタイマーが *Stop* ボタンのクリックによって一時停止することをテストしましょう： - + @@ -324,7 +324,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ ここに親の `CountdownViewChildParentComponent` があります： - + @@ -374,7 +374,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ この `MissionService` は、 `MissionControlComponent` を複数の子の `AstronautComponent` に接続します。 - + @@ -384,7 +384,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ そのインスタンスをそのコンストラクターを通じて自身に注入します。 - + @@ -394,7 +394,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ 個々の `AstronautComponent` は `MissionControlComponent` の子であるため、親のサービスインスタンスを受け取ります： - + @@ -433,7 +433,7 @@ E2E は、空と空では無い名前を含む入力プロパティのセッタ 履歴が期待とおりのものであることを確認します。 - + diff --git a/aio-ja/content/guide/component-styles.en.md b/aio-ja/content/guide/component-styles.en.md index a5ae119cba..6075b05577 100644 --- a/aio-ja/content/guide/component-styles.en.md +++ b/aio-ja/content/guide/component-styles.en.md @@ -21,7 +21,7 @@ One way to do this is to set the `styles` property in the component metadata. The `styles` property takes an array of strings that contain CSS code. Usually you give it one string, as in the following example: - + ## Style scope @@ -71,7 +71,7 @@ Use the `:host` pseudo-class selector to target styles in the element that *host targeting elements *inside* the component's template). - + The `:host` selector is the only way to target the host element. You can't reach @@ -83,7 +83,7 @@ including another selector inside parentheses after `:host`. The next example targets the host element again, but only when it also has the `active` CSS class. - + ### :host-context @@ -99,7 +99,7 @@ up to the document root. The `:host-context()` selector is useful when combined The following example applies a `background-color` style to all `

    ` elements *inside* the component, only if some ancestor element has the CSS class `theme-light`. - + ### (deprecated) `/deep/`, `>>>`, and `::ng-deep` @@ -114,7 +114,7 @@ children and content children of the component. The following example targets all `

    ` elements, from the host element down through this component to all of its child elements in the DOM. - + @@ -154,7 +154,7 @@ You can add a `styles` array property to the `@Component` decorator. Each string in the array defines some CSS for this component. - +
    @@ -164,7 +164,7 @@ They are _not inherited_ by any components nested within the template nor by any
    -The CLI defines an empty `styles` array when you create the component with the `--inline-style` flag. +The Angular CLI command [`ng generate component`](cli/generate) defines an empty `styles` array when you create the component with the `--inline-style` flag. ng generate component hero-app --inline-style @@ -176,8 +176,8 @@ You can load styles from external CSS files by adding a `styleUrls` property to a component's `@Component` decorator: - - + +
    @@ -193,7 +193,7 @@ They are _not inherited_ by any components nested within the template nor by any
    -The CLI creates an empty styles file for you by default and references that file in the component's generated `styleUrls`. +When you use the Angular CLI command [`ng generate component`](cli/generate) without the `--inline-style` flag, it creates an empty styles file for you and references that file in the component's generated `styleUrls`. ng generate component hero-app @@ -204,19 +204,20 @@ ng generate component hero-app You can embed CSS styles directly into the HTML template by putting them inside ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - File - - Purpose -
    - - `app/app.component.{ts,html,css,spec.ts}` - - - - Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test. - It is the **root** component of what will become a tree of nested components - as the application evolves. - -
    - - `app/app.module.ts` - - - - Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application. - Right now it declares only the `AppComponent`. - Soon there will be more components to declare. -
    +{@a project-file-review} - `assets/*` +## Final code review - +You can download an example of the app that you created in this Getting Started guide. - A folder where you can put images and anything else to be copied wholesale - when you build your application. -
    - - `environments/*` - - - - This folder contains one file for each of your destination environments, - each exporting simple configuration variables to use in your application. - The files are replaced on-the-fly when you build your app. - You might use a different API endpoint for development than you do for production - or maybe different analytics tokens. - You might even use some mock services. - Either way, the CLI has you covered. - -
    - - `browserslist` - - - - A configuration file to share [target browsers](https://github.com/browserslist/browserslist) between different front-end tools. - -
    - - `favicon.ico` - - - - Every site wants to look good on the bookmark bar. - Get started with your very own Angular icon. - -
    - - `index.html` - - - - The main HTML page that is served when someone visits your site. - Most of the time you'll never need to edit it. - The CLI automatically adds all `js` and `css` files when building your app so you - never need to add any `