いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。
「AngularでStandalone Componentsを使った実装をする方法を知りたい」とお考えではありませんか？
Angular開発でNgModuleの管理が煩雑になってきたと感じている方へ。
Standalone Componentsを使えば、NgModuleを書かずにコンポーネント単位でアプリを構成することが可能です。
いずみAngular19以降では標準の書き方になっているので、覚えておいて損はないです。
ということで、本記事ではAngularでStandalone Componentsを使った実装をする方法を解説します。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
 レバテックフリーランス  | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
 Midworks  | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
 ITプロパートナーズ  | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【Angular】Standalone Componentsを実装する方法
早速ですが、AngularでStandalone Componentsを実装する方法を解説します。
Standalone Componentsとは
Standalone Componentsは、NgModuleに登録しなくても単独で動作するコンポーネントです。
Angular14で導入され、Angular19以降はコンポーネント生成時のデフォルトになっています。
NgModuleを介さず、コンポーネント同士が依存関係を直接importし合う構成になります。
いずみNgModuleの記述量が減るので、コード量が目に見えて減ります。
事前準備
Angular CLIのバージョンが19以降であることを確認します。
ng version19より前のバージョンの場合は、コンポーネントのデコレータにstandalone: trueを明示的に指定する必要があります。
実装手順
ここからは、実際にStandalone Componentsを組み込む手順を説明します。
Angular CLIでコンポーネントを生成します。
ng generate component helloAngular19以降のCLIでは、追加のオプションなしでStandalone Componentsとして生成されます。
使用するモジュールやコンポーネントを、コンポーネントのデコレータ内でimportします。
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-hello',
imports: [CommonModule],
templateUrl: './hello.component.html',
})
export class HelloComponent {}NgModuleへの登録が不要になり、コンポーネント単体で依存関係が完結します。
エントリーポイントとなるmain.tsで、bootstrapApplication関数を使います。
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
bootstrapApplication(AppComponent, appConfig);AppModuleを経由せず、AppComponentを直接ブートストラップします。
いずみNgModuleベースのアプリでは見慣れたapp.module.tsが登場しません。
ルーティングは、app.config.tsでprovideRouter関数を使って設定します。
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes)],
};RouterModule.forRootを使う従来の書き方をせずに、ルーティングを構成できます。
いずみ実際に手を動かすと、NgModuleを意識せずに書けることが体感できるはずです。
loadComponentで遅延ロードする方法
ルート単位で、コンポーネントを遅延ロードすることも可能です。
export const routes: Routes = [
{
path: 'about',
loadComponent: () =>
import('./about/about.component').then((m) => m.AboutComponent),
},
];loadModuleではなくloadComponentを使うことで、コンポーネント単位で分割ロードが行えます。
初期バンドルサイズを抑えたいページで有効な手段です。
いずみページ数が多いアプリほど、初期表示速度への効果を実感しやすいです。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【厳選】フリーランスエンジニアにおすすめなエージェント3選
フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。
僕が実際に利用しているおすすめエージェントを紹介しますね。
いずみエージェントは必ず複数登録してください。
担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…
僕は実際に5つのエージェントを使い回していますよ。
フリーランスを始めるなら「レバテックフリーランス
」
| 案件数 | マージン率 | 単価 | |
| 約88,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 業界最大級の案件数。
- 業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
- 案件参画中のフォローの充実。
※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。
レバテックフリーランス
は業界最大手のフリーランスエージェントです。
とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！
いずみ僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス
です。
保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。
手厚い保障を重視したいなら「Midworks
」
| 案件数 | マージン率 | 単価 | |
| 約10,000件 | 非公開 | 中 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 手厚い保障で正社員並みの安心感。
- 還元率60％超え＆単価公開でクリアな契約。
- 給与保障制度（審査あり）。
Midworks
は手厚い保障が特徴のフリーランスエージェントです。
フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。
いずみ僕も何度か案件を紹介してもらいました。
自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。
週2〜3日の案件探しなら「ITプロパートナーズ
」
| 案件数 | マージン率 | 単価 | |
| 約5,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 経験者向け | 無料 |
- IT案件に特化したフリーランスエージェント。
- 週2〜3日の案件が豊富。
- リモート案件が多く、直エンドなので単価も高い。
※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。
ITプロパートナーズ
はIT案件に特化したフリーランスエージェントです。
週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。
いずみ週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。
とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！
よくある質問
NgModuleは今後使えなくなりますか？
NgModule自体は廃止されておらず、standalone: falseを指定すれば引き続き利用できます。
ただしAngularの公式ドキュメントとCLIのデフォルトは、Standalone Componentsを前提にした構成へ移行しています。
既存のNgModuleベースのプロジェクトを移行する方法はありますか？
ng generate @angular/core:standaloneというマイグレーションスキーマティクスを使うことで、既存コンポーネントを段階的にStandalone化できます。
大規模なプロジェクトでは、一括変換ではなく機能単位で段階的に移行するのが安全です。
standalone: trueは必ず明示的に書く必要がありますか？
Angular19以降のCLIで生成する場合は、standalone: trueの記述は不要です。
Angular18以前のバージョンを使っている場合のみ、コンポーネントのデコレータにstandalone: trueを明示的に指定します。
まとめ
今回は、AngularでStandalone Componentsを使った実装をする方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
