web-dev-qa-db-fra.com

Comment ajouter une bibliothèque tierce lors de l'utilisation d'angular-cli?

Je voulais essayer de créer une application Angular 2 avec angular-cli ( https://github.com/angular/angular-cli ) puis utiliser ng2- matériel ( https://github.com/justindujardin/ng2-material ) pour les composants de l'interface utilisateur. Mais je ne comprends tout simplement pas comment/où je dois inclure la bibliothèque de matériaux ng2 afin d'utiliser il.

J'ai créé un projet avec ng new myproject Puis j'ai démarré le serveur avec ng serve Et ouvert la page Web qui a bien fonctionné. L'étape suivante, j'ai installé ng2-material avec npm install ng2-material --save. Ensuite, j'ai ajouté MATERIAL_PROVIDERS À angulaire bootstrap comme indiqué ici https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master /app/bootstrap.ts .

Il en résulte un message d'erreur GET http://localhost:4200/ng2-material/all 404 (Not Found) dans le navigateur Web, et je n'arrive pas à comprendre comment m'en débarrasser.

angular-cli semble faire quelque chose pour créer un dossier dist- dans lequel certains des modules de noeud utilisés dans index.html se retrouvent, mais je ne vois pas où ni comment cela est configuré.

angularangular-materialangular-cli
23
zabbarob

[EDIT 29/09/2016] Maintenant que angular-cli utilise webpack iso system.js, cette réponse n'a plus beaucoup de sens . Vérifiez les pages ' installation de la librairie 3D ' et ' installation de la lib globale ' sur le wiki angular-cli.

[EDIT 10/05/2016] Ceci est maintenant décrit en détail sur le angular cli wiki .

Cela a fonctionné pour moi:

Dans le ember-cli-build.js , vous ajoutez la dépendance aux vendorNpmFiles, par ex.

module.exports = function (defaults) {
  var app = new Angular2App(defaults, {
      vendorNpmFiles: [
          'a2-in-memory-web-api/web-api.js'
      ]
  });
  return app.toTree();
}

(où a2-en-mémoire-web-api/web-api.js est un fichier dans mon node_modules dossier)

Dans le index.html vous ajoutez la ligne suivante:

<script src="vendor/a2-in-memory-web-api/web-api.js"></script>

Enfin, vous redémarrez votre serveur.

Je ne l'ai pas testé avec du matériel angular mais vous avez l'idée.

13
David Bulté

Essayez de configurer SystemJS dans le index.html comme ça:

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        },
        'node_modules/ng2-material': {
            format: 'register',
            defaultExtension: 'js'
        }
    },
    paths: {
        'ng2-material/all': 'node_modules/ng2-material/all'
    }
});
2
Radoslav Stoyanov