まずはタスク毎に生成されるファイルの説明

指定したフォーム名.component.html

見える部分を書きます。g.tsにて設定されたコンポーネントをmg.getValue関数などで表示することができます。

指定したフォーム名.mg.controls.g.ts

Magicのフォームで指定したコンポーネントが羅列されています。

component.htmlファイルにて使用できます。

指定したフォーム名.component.ts

使用するhtmlファイルなどを指定します。

Magicでの操作による生成ファイルについて

「コントロールのアクセサを作成」の場合

フォーム名.mg.controls.g.ts

「フォームコンポーネントの作成」の場合

フォーム名.component.html

フォーム名.component.ts

フォーム名.mg.controls.g.ts

「Webアプリケーションの作成」の場合

プログラム全てのタスクの

フォーム名.component.html

フォーム名.component.ts

フォーム名.mg.controls.g.ts

を作成いたします。

つまりHTMLファイルを手作業にて変更後

「フォームコンポーネントの作成」

「Webアプリケーションの作成」

を行った場合、HTMLファイルが上書きされてしまいます。

そこで上書きされないように

「フォーム名.component.html」 を「フォーム名.component.bs.html」などのようにリネームしてリネームした方を変更、使用いたします。

ただし、その場合Angularは元の「フォーム名.component.html」を参照してしまいますので指定した「フォーム名.component.ts」の中の

templateUrl: './ 指定したフォーム名.component.html'

を

templateUrl: './ 指定したフォーム名.component.bs.html'

と変更することで「フォーム名.component.bs.html」ファイルを参照するようになります。

間違って「フォームコンポーネントの作成」「Webアプリケーションの作成」を行っても

フォーム名.component.tsの中を変更するだけで済みます。

コントロールをフォームに追加した場合は「コントロールのアクセサを作成」でmg.controls.g.tsファイルを再生成したのち

フォーム上で該当コントロールに対して右クリックを行うと「再帰的なＨＴＭＬの作成」を選択することでコピペするためのＨＴＭＬコードが表示されます。

こちらを先ほどの

「フォーム名.component.bs.htm」に貼り付ける訳です。

いかがでしょうか。

リネームする方法に追加して、まずはGitHubと連携を取って間違って消しても復旧する状況の作成から始めるのが良いと思います。