Umgang mit mehreren Anwendungen mit angular cli

Ich bin Interessierte in der Lage, bootstrap, mehrere Anwendungen mit der eckigen cli.

Durch die Winkel-cli-wiki war ich in der Lage zu finden, ein Beispiel
https://github.com/angular/angular-cli/wiki/stories-multiple-apps

Fand ich auch
https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

Ich ging durch die Winkel-cli.json-Datei und lief

    "apps": [
    {
      "name": "app1",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "app2",
      "root": "src",
      "outDir": "dist2",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main2.ts",
      "polyfills": "polyfills2.ts",
      "test": "test2.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app2",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

War ich in der Lage, um dieses zu erhalten, führen Sie die folgenden Befehle

ng serve --app 0
ng serve --app 1

Meine erste Frage bei diesem Ansatz ist, wie würde sein pflegen diese in dem Fall, dass wir mehrere apps in der Winkel-cli? Diese erhalten ein wenig zu überwachen und zu verfolgen.

Auch mit diesem Ansatz wären Sie besser dran bootstraping ein anderes Modul in jedem main.ts-Datei?

Die zweite Möglichkeit sah ich dies getan wurde, in der ein Beispiel in den Kommentaren.

https://github.com/Farata/angular2typescript/blob/master/Angular4/router-samples/.angular-cli.json.

Dies ist mehr ideal, obwohl ich bin nicht in der Lage zu replizieren und zu identifizieren, wie alle diese Anwendungen verwenden die gleichen dist-Ordner und alles andere außer dem Namen.

Mit dem zweiten Ansatz, alles zu teilen ich Frage mich, wie dieser anders als das erstellen einer großen Anzahl von Modulen und faul, Sie zu laden?

Ich weiß, diese Frage ist sehr Theorie basiert, aber mit online-Ressourcen sind sehr begrenzt, und ich wäre daran interessiert zu wissen, wie andere Entwickler greifen dieses Problem.

InformationsquelleAutor Winnemucca | 2017-08-08

angular angular-cli

10

Wenn ich mehrere apps in angular-cli ich würde bei Namen wie:
```
"apps": [
    {
      "name": "app1",
      "main": "main1.ts",
      ...
    },
    {
      "name": "app2",
      "main": "main2.ts"
    }
]
```
Dann zu starten app1 können wir entweder
```
ng serve --app 0
```
oder
```
ng serve --app app1
```
Ich bevorzuge die zweite Methode, da es einfacher zu verstehen, welche Anwendung ausgeführt wird.

Wie um Sie zu überwachen?

Müssen Sie wissen, was Sie tun:)

Auch mit diesem Ansatz wären Sie besser dran, ein bootstraping
verschiedene Modul in jedem main.ts-Datei?

Es hängt davon ab, was Ihre Anwendung tun wird. Ich ziehe es vor, verschiedene bootstrap-Module, weil diese Art und Weise kann ich schneiden einige überschüssige Dinge von etwas, der Anwendung.

Beispielsweise brauche ich zwei Anwendung mit fast der gleichen Logik, aber die zweite app ist nur ein Teil des ersten mit seinen eigenen Eigenschaften.

Also meine zweite Anwendung kann bootstrap SecondModule wird, importieren Sie einige gemeinsame zwischen Anwendungen Module und Ihre eigenen feature-Module.
```
@NgModule({
  import: [
    SharedModule,
    SharedModule2,
    SecondFeature1,
    ...
  ]
})
export class SecondModule {}
```
Außerdem für solche Anwendungen würde ich entsprechend anlegen Typoskript configs zu schützen, ts-compiler (und besonders ngc compiler) zu tun, einige redundante Arbeit:

tsconfig.app1.json
```
files: [
  "main1.ts",
  "path to some lazy loaded module"
]
```
tsconfig.app2.json
```
files: [
  "main2.ts"
]
```
Dies ist mehr ideal, obwohl ich bin nicht in der Lage zu replizieren und zu identifizieren, wie
alle diese Anwendungen verwenden die gleichen dist-Ordner und alles
anderes neben dem Namen.

Ich denke, es ist Fehler. Ich würde diese Ausgabe von Anwendungen in unterschiedlichen Ordnern.

Als Frage ist die Theorie basiert würde ich sagen, dass, wenn Sie haben eine ziemlich große Anwendung, die Sie wahrscheinlich stieß mit Leistung zu bauen. Und nachdem viele Anwendungen in einem Winkel-cli-Anwendung kann wurde zum Albtraum. Es ist nur meine Meinung und Erfahrung dazu 🙂
- Gibt es eine Möglichkeit, wie auch das testen der app getrennt von einander? Ich hab eine Frage stellen: Wie testen apps separat in einer multi-app-Projekt? in Bezug auf es, aber keine Antwort!
- Sie können angeben, an welchen port die Ausführung jeder app auf und führen Sie beide apps gleichzeitig?
InformationsquelleAutor yurzui
7

Die CLI-version 6 unterstützt nun das out of the box mit einfache scaffolding-Befehle. Erstellen Sie zunächst eine normale cli-Projekt mit ng new root-name. Dann können Sie Projekte innerhalb es mit ng generate application sub-app-name. Finden Sie Ihre wiki-Seite hier.

InformationsquelleAutor Eric Simonton
0

Können Sie ng erzeugen-Anwendung den Befehl zum erstellen von separate Anwendung. Das schafft
'Projekte' Ordner mit gleichen Umgebung wie die Basis-Anwendung. Aber es werden gemeinsame Module. Wie werden Sie finden Sie an beiden Orten? Eine Möglichkeit ist die Verwendung relativer Pfad.

Dieser Artikel erklärt, mit Beispiel
https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

Fand ich auch ein problem mit diesem Ansatz. Sie müssen lazy load sub-Anwendungen von Haupt-Anwendung. Für diese, route, Pfad müssen angegeben werden, in der Basis-app.Routen.ts-Datei. Was ist, wenn Sie bauen wollen, nur base ohne sub-Anwendungen? Sie müssen erhalten zwei Versionen der app.Routen.ts-Datei

InformationsquelleAutor Venugopal Reddy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.