Angularプロジェクトにおける npm start と ng serve の違い

2024-04-02

Angularプロジェクトにおける npm start と ng serve の違い

npm start は、package.json ファイルの scripts プロパティに指定されたコマンドを実行します。これは、Angularプロジェクトに限らず、Node.jsプロジェクト全般で使用できます。

例:

{
  "scripts": {
    "start": "ng serve"
  }
}

上記の例では、npm start を実行すると ng serve コマンドが実行されます。

ng serve は Angular CLI に付属するコマンドであり、開発用サーバーを起動し、自動リロード機能を提供します。

主な機能:

開発用サーバーの起動
ソースコード変更時の自動リロード
プロジェクトのビルド
エラーメッセージの表示

一般的には、開発中は ng serve を使用し、本番環境では npm start を使用するのがおすすめです。

理由:

ng serve は開発に特化した機能を提供するため、開発効率が向上します。
npm start は汎用的なコマンドなので、本番環境など、特定の環境に合わせた設定を記述できます。

まとめ

コマンド	役割	主な用途
`npm start`	汎用的なコマンド。`package.json` に指定されたコマンドを実行	本番環境
`ng serve`	Angular CLI コマンド。開発用サーバーの起動、自動リロード機能を提供	開発環境

補足:

ng serve は npm start のエイリアスとして設定することもできます。
npm start と ng serve の両方を実行できるように設定することもできます。

詳細は、Angular CLI の公式ドキュメントを参照してください。

package.json

{
  "name": "angular-project",
  "version": "1.0.0",
  "description": "Angular project",
  "main": "index.js",
  "scripts": {
    "start": "ng serve"
  },
  "dependencies": {
    "@angular/core": "^15.0.0",
    "@angular/cli": "^15.0.0"
  }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Project';
}

<h1>{{title}}</h1>
<p>Welcome to Angular!</p>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }