Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

序文

開発プロセス中に、1 つの Angular プロジェクトでは不十分であり、2 つの独立したプロジェクトを再利用するのは簡単ではないことに気付くことがあります。たとえば、現在 WeChat アプレットで実行される新しい H5 プロジェクトが必要ですが、元の WEB プロジェクトの entity、Share、Serivce、MockApi などのモジュールを新しい H5 プロジェクトに適用したいと考えています。この時点では、元の Angular プロジェクトをアップグレードするだけです。

シーン：

1. 現在、ブラウザ上で Web プロジェクトが実行されています。
2. 現在のプロジェクトに基づいて新しい WeChat プロジェクトを追加します。
3. Webプロジェクトから公開されているものを抽出して、公開ライブラリを作成します。
4. 元のWebプロジェクトと新しいWeChatプロジェクトの両方で、パブリックライブラリを呼び出すことができます
   

開発環境

この記事の開発環境は以下の通りです。

panjie@panjies-iMac ウェブ % ng --version

     _ _ ____ _ ___
    / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
  / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
 /// \_\_| |_|\__、|\__、_|_|\__、_|_| \____|_____|___|
                |___/
    

Angular CLI: 12.1.4
ノード: 14.16.0
パッケージマネージャー: npm 6.14.11
OS: ダーウィンx64

角度: 12.1.5
... アニメーション、共通、コンパイラ、コンパイラ CLI、コア、フォーム
... プラットフォーム ブラウザ、プラットフォーム ブラウザ ダイナミック、ルーター

パッケージバージョン
---------------------------------------------------------
@angular-devkit/アーキテクト 0.1201.4
@angular-devkit/ビルド-angular 12.1.4
@angular-devkit/コア 12.1.4
@angular-devkit/schematics 12.1.4
@angular/cli 12.1.4
@schematics/角度 12.1.4
rxjs 6.6.7
タイプスクリプト 4.3.5

新しいプロジェクトを作成する

元の Web プロジェクトのルート フォルダーに入り、ng generate application wechat を実行します。

panjie@panjies-iMac web % ng アプリケーション wechat を生成
Angularルーティングを追加しますか? はい

ルーティングと CSS スタイル カテゴリを使用するかどうかを選択すると、Angular CLI によってプロジェクト フォルダーが生成されます。

プロジェクト
└── 微信
├── karma.conf.js
├── 出典
│ ├── アプリ
│ │ ├── app-routing.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── 資産
│ ├── 環境
│ │ ├── environment.prod.ts
│ │ └── 環境.ts
│ ├── favicon.ico
│ ├──index.html
│ ├── main.ts
│ ├── ポリフィル.ts
│ ├──styles.scss
│ └── test.ts
├── tsconfig.app.json
└── tsconfig.spec.json

5 つのディレクトリ、17 個のファイル

同時に、angular.json ファイルが更新され、新しい wechat プロジェクトの構成情報が書き込まれました。

この時点で、ng s wechat を使用して wechat プロジェクトを開始し、ng t wechat を使用して wechat プロジェクトをテストし、ng build wechat を使用して wechat プロジェクトをビルドできます。

WeChat プロジェクトが利用可能になると、現在次のディレクトリ ツリーが存在します。

panjie@panjies-iMac ウェブ % ツリー -L 1 -a
。
├── .browserslistrc ②
├── .editorconfig ①
├── .eslintrc.json ②
├── README.md ①
├── angular.json ①
├── ディス ①
├── karma.conf.js ②
├── ノードモジュール ①
├── package-lock.json ①
├── package.json ①
├── プロジェクト①
├── 出典 ②
├── tsconfig.app.json ②
├── tsconfig.json ②
└── tsconfig.spec.json ②

① Angularプロジェクトファイル（WebプロジェクトとWeChatプロジェクトの両方に有効）

②Webプロジェクト専用ファイル

モバイルウェブプロジェクト

統一性を高めるために、②でマークされたファイルはすべてプロジェクトフォルダに移動します。 web という名前の新しいフォルダーを作成します。

プロジェクトが移動された後、それに応じてプロジェクトの構成情報を変更します。

角度付きJSON

このファイルには、Angular プロジェクトの構成情報が保存されます。構成が正しくないと、ng s などのコマンドが正常に起動しなくなります。
以下のように修正しました。

{
  「プロジェクト」: {
    「ウェブ」：{
- "根"： ""、 
+ "ルート": "プロジェクト/ウェブ",
- "tsConfig": "tsconfig.app.json",
+ "tsConfig": "プロジェクト/web/tsconfig.app.json",
- "tsConfig": "tsconfig.spec.json",
+ "tsConfig": "プロジェクト/web/tsconfig.spec.json",
- "karmaConfig": "karma.conf.js",
+ "karmaConfig": "プロジェクト/web/karma.conf.js",

次に、グローバル置換を使用して「src」を「projects/web/src」に置き換えます。

変更が完了したら、 ng s web または ng t を実行して、他の構文エラー (主に移行プロセス中に発生する可能性のある参照エラー) がないか確認します。エラーがある場合は、プロンプトに従って修正します。

この時点で、履歴プロジェクトの移行は完了です。

パブリックモジュール

次に、プロジェクト内に新しい共通フォルダーを作成し、すべての共通エンティティ、サービス、コンポーネントなどをそこに移動します。これらの小さな機能モジュールは、Web プロジェクトでも WeChat でも使用できるため、同じホイールを 1 つ構築するだけで済みます。

要約する

Angular の単一プロジェクトを複数のプロジェクトにアップグレードする方法に関するこの記事はこれで終わりです。Angular の単一プロジェクトを複数のプロジェクトにアップグレードする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。