web-dev-qa-db-fra.com

traitement de multiples applications avec cli angulaire

Je suis intéressé à pouvoir démarrer plusieurs applications avec le cli angulaire.

Grâce au wiki angular-cli, j'ai pu trouver un exemple https://github.com/angular/angular-cli/wiki/stories-multiple-apps

J'ai aussi trouvé https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

Je suis passé par le fichier angular-cli.json et ai couru 

    "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"
      }
    }
  ],

J'ai pu le faire fonctionner avec les commandes suivantes

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

Ma première question avec cette approche est de savoir comment le conserver dans le cas où nous listons plusieurs applications dans le angular-cli? Cela deviendra un peu difficile à surveiller et à suivre. 

En outre, avec cette approche, serait-il préférable de démarrer un module différent dans chaque fichier main.ts? 

La deuxième façon dont j'ai vu ceci était un exemple dans les commentaires.
https://github.com/Farata/angular2TypeScript/blob/master/Angular4/router-samples/.angular-cli.json .

Ceci est plus idéal, bien que je ne puisse pas répliquer et identifier comment toutes ces applications partagent les mêmes dossiers dist et tout le reste à part name. 

Avec la seconde approche consistant à tout partager, je me demande en quoi cela diffère de la création d’un grand nombre de modules et de leur chargement paresseux.

Je sais que cette question est très théorique, mais les ressources en ligne sont très limitées et j'aimerais savoir comment les autres développeurs s'attaquent à ce problème.

angularangular-cli
8
Winnemucca

Si j'avais plusieurs applications dans angular-cli je les nommerais comme:

"apps": [
    {
      "name": "app1",
      "main": "main1.ts",
      ...
    },
    {
      "name": "app2",
      "main": "main2.ts"
    }
]

Ensuite, pour démarrer app1, nous pouvons exécuter soit

ng serve --app 0

ou

ng serve --app app1

Je préfère une deuxième approche car il est plus facile de comprendre quelle application est en cours d'exécution. 

Comment les surveiller?

Tu dois savoir ce que tu fais :)

En outre, avec cette approche, seriez-vous mieux de booter un module différent dans chaque fichier main.ts?

Cela dépend de ce que fera votre application. Je préfère avoir différents modules d'amorçage, car cela me permet de réduire les excédents de certains logiciels.

Par exemple, j'ai besoin de deux applications avec presque la même logique, mais la deuxième application est une partie de la première avec ses propres fonctionnalités.

Donc, ma deuxième application peut démarrer SecondModule qui importera des modules partagés entre des modules d’application et ses propres modules de fonctions.

@NgModule({
  import: [
    SharedModule,
    SharedModule2,
    SecondFeature1,
    ...
  ]
})
export class SecondModule {}

De plus, pour de telles applications, je créerais les configurations TypeScript correspondantes pour protéger le compilateur ts (et spécialement le compilateur ngc ) des travaux redondants:

tsconfig.app1.json 

files: [
  "main1.ts",
  "path to some lazy loaded module"
]

tsconfig.app2.json 

files: [
  "main2.ts"
]

C’est plus idéal, bien que je ne sois pas en mesure de reproduire et d’identifier comment toutes ces applications partagent les mêmes dossiers dist et tout autre que le nom.

Je pense que c'est une erreur. Je voudrais sortir ces applications dans des dossiers différents.

Comme la question est basée sur la théorie, je dirais que si vous avez une application assez grosse, vous obtiendrez probablement une construction performante. Et avoir de nombreuses applications dans une application cli-angulaire peut devenir un cauchemar. C'est juste mon avis et mon expérience à ce sujet :)

9
yurzui

La version 6 de la CLI prend désormais en charge cette fonctionnalité avec de simples commandes d’échafaudage. Tout d'abord, vous créez un projet CLI normal à l'aide de ng new root-name. Ensuite, vous pouvez ajouter des projets en utilisant ng generate application sub-app-name. Voir leur page wiki ici .

7
Eric Simonton

Vous pouvez utiliser la commande ng generate application pour créer une application distincte. Cela crée le dossier 'Projects' avec l'environnement identique à celui de l'application de base. Mais il y aura des modules partagés. Comment allez-vous vous référer aux deux endroits? Une option consiste à utiliser un chemin relatif.

Cet article explique par exemple https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

J'ai aussi trouvé un problème avec cette approche. Vous devez charger paresseusement les sous-applications à partir de l'application principale. Pour cela, le chemin de la route doit être spécifié dans le fichier base app.routes.ts. Que faire si vous voulez construire uniquement une base sans sous-applications? Vous devez gérer deux versions du fichier app.routes.ts. 

0
Venugopal Reddy