依存関係の直接インポート
モジュールではなくコンポーネントにインポートを追加します。
「依存関係の直接インポート」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
依存関係の直接インポート
Standaloneコンポーネントは、使用するものを独自の imports 配列に宣言します。これにより、NgModuleにおけるdeclarationsとimportsの分離が不要になります。
imports配列
@Componentデコレーターの imports 配列に、他のStandaloneコンポーネント、ディレクティブ、パイプを追加します。
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
imports: [ChildComponent],
template: '<app-child></app-child>'
})
export class ParentComponent {}他のコンポーネントのインポート
テンプレートに子コンポーネントを描画するには、そのクラスをインポートします。すると、そのセレクターを使用できるようになります。
ディレクティブのインポート
Standaloneディレクティブも同じ方法でインポートします。インポートすると、テンプレートに適用できます。
import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
selector: 'app-note',
imports: [HighlightDirective],
template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}パイプのインポート
Standaloneパイプもimportsに追加します。たとえば、カスタムパイプをインポートすると、補間で使用できるようになります。
Angularの一般的なディレクティブ
一部の組み込みヘルパーはパッケージから提供されます。たとえば RouterLink は @angular/router から提供され、使用するにはインポートが必要です。
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-nav',
imports: [RouterLink],
template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}FormsModuleなど
既存のNgModuleをStandaloneコンポーネントにインポートすることもできます。FormsModule をインポートすると、ngModelなどのテンプレート駆動フォーム機能が有効になります。
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-form',
imports: [FormsModule],
template: '<input [(ngModel)]="name">'
})
export class FormComponent {
name = '';
}組み込み制御フローにインポートは不要
組み込みの制御フローブロック（if、for、switch、defer）はテンプレート言語自体の一部であるため、インポートは不要です。これは、以前の構造ディレクティブとは異なります。
使用するものだけをインポート
インポートは最小限に保ち、テンプレートが実際に参照する依存関係だけを列挙してください。これにより、コンポーネントが軽量になり、ツリーシェイキングも行いやすくなります。
複数項目のインポート
imports配列には、多数の項目をまとめて指定できます。
imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]コンパイルエラーが案内してくれる
インポートしていないセレクターやパイプを使用すると、Angularはそのコンポーネントでは認識されていないことを示す明確なエラーを報告します。importsに追加すれば解決できます。
クイックチェック：インポート
Standaloneの依存関係はどこに指定しますか。
まとめ：直接インポート
Standaloneコンポーネントでは、他のコンポーネント、ディレクティブ、パイプ、さらにFormsModuleのようなNgModuleまで、依存関係をコンポーネントのimports配列に列挙します。組み込み制御フローにはインポートは不要です。インポートは最小限に保ってください。次は、Standaloneアプリをブートストラップします。
よくある質問
「依存関係の直接インポート」レッスンは無料ですか？
はい。「依存関係の直接インポート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「依存関係の直接インポート」で何を学びますか？
モジュールではなくコンポーネントにインポートを追加します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「依存関係の直接インポート」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。