> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/products_guide/migration/angular_migration.md).

# Angular からの移行

このページでは、[Monaca CLI](/products_guide/monaca_cli.md)を使用して、 プロジェクトを Monaca に移行するための手順を説明します。\
このガイドを終えたら、Monaca を使って プロジェクトからアプリを実行、テスト、デバッグ、ビルドすることができます！始めましょう！

## 前提条件

1. 移行を開始する前に、[キーポイント](/products_guide/migration/key_point.md)を一読ください。
2. Monaca CLI を npm でグローバルにインストールする。

   ```bash
   $ npm install -g monaca
   ```

## 移行手順

1.  Monaca CLIのインストール後、Monacaアカウントでログインしてください。 

```
$ monaca login
```

    2\. プロジェクトディレクトリに移動します。

```
$ cd <project dir>
```

&#x20;   3\.  次に、プロジェクトをMonacaのプロジェクト構造に変換するために `monaca init` を実行します。&#x20;

```
$ monaca init
$ ...
$ ? Are you sure you want to continue initializing this project? Yes
$ ? Is it a transpilable project? No
$ ? Which command do you use to serve the app? ng serve --base-href='.'
$ ? Which command do you use to build the app? ng build --base-href='.' --output-path='www'
$ ? Which command do you use to watch the changes from your app? ng build --base-href='.' --output-path='www' --watch
```

次のように **package.json** ファイルに3つの新しいコマンドを注入する必要があります：

```javascript
"scripts": {
    "monaca:preview": "ng serve --base-href='.' & ng build --base-href='.' --output-path='www' --watch",
    "monaca:transpile": "ng build --base-href='.' --output-path='www'",
    "monaca:debug": "ng build --base-href='.' --output-path='www' --watch"
}
```

## アプリをデバッグする

[Monaca デバッガー](/products_guide/debugger.md) は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。\
Monaca クラウド IDE で アプリを開発する場合、ファイルに加えられた変更は、保存後すぐに Monaca デバッガーに同期されます。

Monaca デバッガーの使い方は、以下になります。

1. Google Play または App Store から端末に Monaca デバッガーをインストールします。

[![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/App_Store.jpg) ](https://itunes.apple.com/us/app/monaca/id550941371?mt=8)[![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/Google_play.png)](https://play.google.com/store/apps/details?id=mobi.monaca.debugger\&hl=en)

{% hint style="info" %}
Android エミュレータに Monaca デバッガーをインストールする場合は、 [Android エミュレーター向け Monaca デバッガー ](/products_guide/debugger/installation/debugger_emulator.md)を参照してください。
{% endhint %}

&#x20;   2\. Monaca デバッガーを起動し、Monaca アカウントでサインインします。 Monaca クラウド IDE と同じアカウントを使用していることを確認してください。

![](/files/-MgYkZAmuoe2erWewuXu)

&#x20;   3\. デバッグを開始する前に、Monaca DebuggerとローカルPCをペアリングする必要があります。ペアリング前に次の点に注意してください。

* Monaca DebuggerとローカルPCは、同じネットワーク接続（LANまたはWi-Fi）に接続する必要があります。
* ローカルPCのファイアウォールを無効にする。

&#x20;   4\. 上の点を確認後、ペアリングを開始できます。ターミナルでプロジェクトディレクトリに移動し、 `monaca debug`と入力します。

```javascript
    $ cd <project dir>
    $ monaca debug
```

&#x20;   5\. 次に、デバッガとローカルPCをペアリングするよう促すポップアップメッセージがMonaca Debuggerの中に表示されます。

![](/files/-MgYkxrMaFRZsRMS0BP-)

&#x20;   6\. ペアリングが成功した場合、ローカルプロジェクト名がMonaca Debuggerの `Local Projects`に表示されます。 ペアリングに失敗した場合は、[Fail to Pair Monaca Debugger](/products_guide/debugger/troubleshooting.md)を参照してください。

![](/files/-MgYlE-q_J0ce2suixUB)

&#x20;  7\. プロジェクトを実行するには、Monaca Debuggerのプロジェクト名をタップします.

&#x20;  8\. プロジェクトがデバッガで実行されているはずです。プロジェクトのさまざまな操作を試してみてください！ その後、コードを変更して保存してみてください。次に、デバッガに反映された変更が表示されます。

{% hint style="info" %}
デバッグを停止し、デバッガのペアを解除するには、 `Ctrl + c` を押します。
{% endhint %}

## アプリをビルドする

#### CLI コマンドのみを使用 <a href="#cli-komandonomiwo" id="cli-komandonomiwo"></a>

1. プロジェクトディレクトリに移動します。

   ```
      $ cd <project dir>
   ```
2. Android Debug Buildを開始する

   ```
      $ monaca remote build android --build-type=debug
   ```

#### GUI での使用 <a href="#gui-deno" id="gui-deno"></a>

1. プロジェクトディレクトリに移動します。

   ```
      $ cd <project dir>
   ```
2. ビルドウィンドウを開いてビルドを開始します。

   ```
      $ monaca remote build --browser
   ```
3. デバッグビルドはデフォルトで選択されています。`Start Build`をクリックしてください。&#x20;

![](/files/-MgYlllLWIRnAo5VQnLM)

&#x20;   4\. ビルドが完了するまでに数分かかることがあります。ビルドが正常に完了すると、次の画面が表示されます。アプリをデバイスにインストールするさまざまな方法を選択できます。

![](/files/-MgYlsVRFaiW5LGNsiE_)