Angular アプリケーションに関する一般的な Q&A

Q: ngserveとng buildの違いは何ですか?

A: ng サーブと ng ビルドの違いは、ng サーブは開発サービスのサポートに使用されるのに対し、ng ビルドは完成したプロジェクトのデプロイに使用されることです。

Q: ngserveとnpm startの違いは何ですか?

A: ngserve と npm start の違いは、ngserve は組み込みサーバーを起動するのに対し、npm start はノードサーバーを起動することですが、ただし、package.json ファイルでスクリプトオブジェクトの起動コマンドを定義している場合に限ります。次のようになった場合:

「スクリプト」:{

"開始" : "NG サーブ"

}

npm start はngserveを実行します。

Q: デコレータ @Component は angular で正確に何をしますか。それについての詳細情報を教えていただけますか?

A: 公式の拡張として: https://angular.io/api/core/Component

公式ドキュメントから次のことがわかります。

クラスを Angular コンポーネントとしてマークし、実行時にコンポーネントがどのように処理、インスタンス化、使用されるかを決定する構成メタデータを提供するデコレータ。

以下に示されているのは上記との組み合わせであり、makeDecorator関数が核となる概念 (ディレクティブ、コンポーネント、NgModule など) を作成していると結論付けることができます。

makeDecorator 関数が @Component メタデータからパラメータを受け取ることがわかるように、@Component デコレータ関数はコンポーネントのメタデータであるため、メタデータを提供するのが主な役割です。

同様のものを再現したい場合の最も簡単な方法は、

Reflect-metadataをインストールします。
```
npm install --save reflect-metadata
```

デコレータ関数の作成1

import 'reflect-metadata';

interface MyComponentMetadata {
  template?: string;
  selector?: string;
}

function MyComponent(metadata: MyComponentMetadata) {
  return function(ctor: Function) {
    // add metadata to constructor
    Reflect.defineMetadata('annotations', metadata, ctor);
  }
}

これを使って

@MyComponent({
  selector: 'component',
  template: '<hello></hello>'
})
class HelloComponent {
}

メタデータを取得する必要がある場合は、次のようにします。
```
let metadata = Reflect.getMetadata('annotations', HelloComponent);
```

メタデータの目的は、Angular がクラスをどう処理するかを知るための情報を提供することです。したがって、デコレーターは単なるメタデータプロバイダー以上のものである必要はありません。Angular は、デコレータ関数ではなく、メタデータをどう扱うかを決定します。

Q: Angular の <app-root> の機能は何ですか?

A: セレクター <app-root> は、index.html ファイル内で見つかります。このセレクターは、ロード HTML テンプレートと CSS スタイルを使用するためのデフォルトのルートコンポーネントとみなされます。<app-root> セレクターが、対応する ts ファイルを作成すると、Angular が DOM 内で対応するノードを見つけることができないため、エラーが発生します。

Q: スタンドアロンコンポーネントについてはどう思いますか?

A: スタンドアロンコンポーネントは、Angular アプリケーションを構築する簡単な方法を提供します。スタンドアロンとしてマークされた Angular クラスは、NgModuleで宣言する必要はありません。たとえば、 PhotoGalleryComponentがスタンドアロンコンポーネントの場合、別のコンポーネント ImageGridComponent を直接インポートできます。

@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
    ... <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}

次に、コンポーネントがスタンドアロンの場合は、 @NgModule で宣言しないでください。宣言しないと、次のようなエラーが発生します。