Der gesamte Prozess der Aktualisierung eines Angular-Einzelprojekts auf mehrere Projekte

Vorwort

Manchmal stellen Sie während des Entwicklungsprozesses fest, dass ein Angular-Projekt nicht ausreicht und zwei unabhängige Projekte nicht einfach wiederverwendet werden können. Beispielsweise benötigen wir derzeit ein neues H5-Projekt, das auf dem WeChat-Applet läuft, aber wir möchten Module wie Entity, Share, Serivce und MockApi im ursprünglichen WEB-Projekt im neuen H5-Projekt anwenden. An diesem Punkt müssen Sie einfach das ursprüngliche Angular-Projekt aktualisieren.

Szene:

1. Derzeit läuft ein Webprojekt im Browser.
2. Fügen Sie basierend auf dem aktuellen Projekt ein neues WeChat-Projekt hinzu.
3. Extrahieren Sie einige öffentliche Dinge aus dem Webprojekt, um eine öffentliche Bibliothek zu bilden
4. Sowohl das ursprüngliche Webprojekt als auch das neue WeChat-Projekt können ihre öffentliche Bibliothek aufrufen
   

Entwicklungsumgebung

Die Entwicklungsumgebung dieses Artikels ist wie folgt:

panjie@panjies-iMac web % ng --version

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

Angular-CLI: 12.1.4
Knoten: 14.16.0
Paketmanager: npm 6.14.11
Betriebssystem: Darwin x64

Winkel: 12.1.5
... Animationen, allgemein, Compiler, Compiler-CLI, Kern, Formulare
... Plattform-Browser, Plattform-Browser-dynamisch, Router

Paketversion
---------------------------------------------
@angular-devkit/architect 0.1201.4
@angular-devkit/build-angular 12.1.4
@angular-devkit/core 12.1.4
@angular-devkit/schematics 12.1.4
@angular/cli 12.1.4
@schematics/angular 12.1.4
rxjs 6.6.7
TypeScript 4.3.5

Neues Projekt erstellen

Wir gehen in den Stammordner des ursprünglichen Webprojekts und führen „ng generate application wechat“ aus.

panjie@panjies-iMac web % ng generieren Anwendung wechat
Möchten Sie Angular-Routing hinzufügen? Ja

Nachdem wir ausgewählt haben, ob Routing- und CSS-Stilkategorien verwendet werden sollen, generiert Angular CLI einen Projektordner für uns:

Projekte
└── WeChat
├── karma.conf.js
├── Quelle
│ ├── App
│ │ ├── app-routing.module.ts
│ │ ├── app.komponente.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── Vermögenswerte
│ ├── Umgebungen
│ │ ├── umwelt.prod.ts
│ │ └── Umgebung.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── Stile.scss
│ └── test.ts
├── tsconfig.app.json
└── tsconfig.spec.json

5 Verzeichnisse, 17 Dateien

Gleichzeitig wurde die Datei angular.json aktualisiert und die Konfigurationsinformationen des neuen WeChat-Projekts geschrieben.

An diesem Punkt können wir ng s wechat verwenden, um das Wechat-Projekt zu starten, ng t wechat verwenden, um das Wechat-Projekt zu testen, und ng build wechat verwenden, um das Wechat-Projekt zu erstellen.

Nachdem das WeChat-Projekt verfügbar ist, haben wir derzeit den folgenden Verzeichnisbaum:

panjie@panjies-iMac web % tree -L 1 -a
.
├── .browserslistrc ②
├── .editorconfig ①
├── .eslintrc.json ②
├── README.md ①
├── angular.json ①
├── Entfernung ①
├── karma.conf.js ②
├── Knotenmodule ①
├── Paket-Lock.json ①
├── Paket.json ①
├── Projekte ①
├── Quelle ②
├── tsconfig.app.json ②
├── tsconfig.json ②
└── tsconfig.spec.json ②

① Angular-Projektdateien, gültig sowohl für Web- als auch für WeChat-Projekte

② Exklusive Dateien für Webprojekte

Mobile Webprojekte

Für mehr Einheitlichkeit verschieben wir alle mit ② gekennzeichneten Dateien in den Projektordner. Erstellen Sie einen neuen Ordner mit dem Namen „Web“.

Nachdem das Projekt verschoben wurde, werden wir die Konfigurationsinformationen des Projekts entsprechend ändern.

angular.json

In dieser Datei werden die Konfigurationsinformationen des Angular-Projekts gespeichert. Eine falsche Konfiguration führt direkt dazu, dass Befehle wie ng s nicht normal gestartet werden können.
Wir haben es wie folgt korrigiert:

{
  "Projekte": {
    "Netz": {
- "Wurzel": "", 
+ "root": "Projekte/Web",
- "tsConfig": "tsconfig.app.json",
+ "tsConfig": "Projekte/Web/tsconfig.app.json",
- "tsConfig": "tsconfig.spec.json",
+ "tsConfig": "Projekte/Web/tsconfig.spec.json",
- "karmaConfig": "karma.conf.js",
+ "karmaConfig": "Projekte/Web/karma.conf.js",

Verwenden Sie dann globales Ersetzen, um "src" durch "projects/web/src" zu ersetzen.

Führen Sie nach Abschluss der Änderung ng s web oder ng t aus, um nach weiteren Syntaxfehlern zu suchen (hauptsächlich Referenzfehler, die während des Migrationsprozesses auftreten können). Wenn welche vorhanden sind, korrigieren Sie sie entsprechend den Eingabeaufforderungen.

An diesem Punkt ist die Migration historischer Projekte abgeschlossen.

Öffentliche Module

Als Nächstes können Sie in Projekten einen neuen gemeinsamen Ordner erstellen und alle gemeinsamen Entitäten, Dienste, Komponenten usw. dorthin verschieben. Diese kleinen Funktionsmodule können sowohl in Webprojekten als auch in WeChat verwendet werden, sodass wir nur ein einziges Rad bauen müssen.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Upgrade eines Angular-Einzelprojekts auf mehrere Projekte. Weitere relevante Inhalte zum Upgrade eines Angular-Einzelprojekts auf mehrere Projekte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!