web-dev-qa-db-fra.com

Angular Cli Webpack, Comment ajouter ou regrouper des fichiers js externes?

Je ne sais pas comment inclure les fichiers JS (fournisseurs) après avoir basculé Angular Cli de SystemJs vers Webpack.

Par exemple

Option A

J'ai quelques fichiers js qui ont été installés via npm. L'ajout de balises de script à la balise principale comme celle-ci ne fonctionne pas. Cela ne semble pas non plus être le meilleur moyen. 

<head>
   <script src="node_modules/some_package/somejs.js">
</head>

//With systemJs I could do this

<head>
   <script src="vendor/some_package/somejs.js">
</head>

Option B

Incluez ces fichiers js dans le paquet Webpack. Cela semble être la façon dont cela devrait probablement être fait. Cependant, je ne sais pas comment faire, car tout le code de Webpack semble être caché derrière le paquet de nœuds angular-cli-webpack. Je pensais qu'il existe peut-être une autre configuration Webpack à laquelle nous pourrions avoir accès. Mais je ne suis pas sûr de ne pas en avoir vu lors de la création d'un nouveau projet angular-cli-webpack.

Plus d'infos:

Les fichiers js que j'essaie d'inclure doivent être inclus avant le projet Angular. Par exemple, jQuery et une bibliothèque js tierce qui n'est pas vraiment configurée pour le chargement de module ou TypeScript.

Références https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.mdhttps://github.com/angular/angular-cli/tree/webpack

javascriptangularangular-cli
75
Kris Hollenbeck

Dernier test effectué avec angular-cli 7.x.x avec Angular 7.x.x

Ceci peut être accompli en utilisant scripts:[] dans .angular-cli.json.

{
  "project": {
    "version": "1.0.0",
    "name": "my-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

Remarque: Comme la documentation le suggère dans l'installation de la bibliothèque globale: si vous modifiez la valeur de votre styles ( ou scripts!), puis:

Redémarrez si vous l’exécutez,

..pour voir les scripts exécutés dans un ** contexte global via le fichier scripts.bundle.js.

Remarque: Comme indiqué dans les commentaires ci-dessous. Les bibliothèques JS prenant en charge les modules UMD via importations ES6 , telles que jQuery, peuvent également être importées dans vos fichiers TypeScript à l'aide de la syntaxe d'importation ES6. Par exemple: import $ from 'jquery';.

84
Kris Hollenbeck

Il y a une différence subtile à utiliser scripts:[], puis à ajouter quelque chose au <head> avec <script>. Les scripts de scripts:[] sont ajoutés au scripts.bundle.js qui est toujours chargé dans la balise body et sera donc chargé APRÈS scripts dans <head>. Ainsi, si l’ordre de chargement des scripts est important (c’est-à-dire que vous devez charger un polyfill global), votre seule option est de copier manuellement les scripts dans un dossier (par exemple avec un script npm) et d’ajouter ce dossier en tant que actif sur .angular-cli.json.

Donc, si vous dépendez vraiment de quelque chose en cours de chargement avant angular lui-même ( Option A ), alors vous devez le copier manuellement dans un dossier qui sera inclus dans la construction angular, puis vous pourrez le charger manuellement avec un <script> dans <head>.

Ainsi, pour obtenir l'option a , vous devez:

  • créer un dossier vendor dans src/

  • ajouter ce dossier en tant qu'actif à .angular-cli.json: "assets": [ "assets", "favicon.ico", "vendor" ]

  • copiez votre script de vendeur node_modules/some_package/somejs.js dans vendor

  • chargez-le manuellement dans index.html: <head> <script src="vendor/some_package/somejs.js"> </head>

Cependant, la plupart du temps, vous n’avez besoin de cette approche que pour les paquetages, qui doivent être disponibles globalement, avant tout le reste (c’est-à-dire certains polyfill). La réponse de Kris est vraie pour l'option B et vous bénéficiez de la construction du webpack (Minification, Hash, ...).

Cependant, si vos scripts ne doivent pas nécessairement sont disponibles globalement et s'ils sont prêts pour le module, vous pouvez les importer dans src/polyfills.ts ou mieux encore, importez-les uniquement lorsque vous en avez besoin. dans vos composants spécifiques.

Rendre les scripts disponibles globalement via scripts:[] ou via leur chargement manuel pose ses propres problèmes et ne devrait en réalité être utilisé que lorsque cela est absolument nécessaire.

13
Christian Ulbrich

Vous devez ouvrir le fichier fichier .angular-cli.json et rechercher "scripts:" ou, si vous souhaitez ajouter un fichier CSS externe, vous devez rechercher le mot "styles": dans le même fichier.

à titre d'exemple, ci-dessous, vous verrez comment bootstrap Js (bootstrap.min.js) et bootstrap CSS (bootstrap.min.css) inclut dans .angular-cli.json:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Bien sûr, si vous avez votre propre fichier js, vous pouvez ajouter votre chemin de fichier ici dans .angular-cli.json au même endroit (dans "scripts":[]).

3
Prashant Barve

Vous voudrez peut-être consulter cette page: https://github.com/angular/angular-cli#global-library-installation

Il montre les bases pour inclure des fichiers .js et .css

Certaines bibliothèques javascript doivent être ajoutées à la portée globale et chargées comme si elles se trouvaient dans une balise de script. Nous pouvons le faire en utilisant les propriétés apps [0] .scripts et apps [0] .styles de angular-cli.json.

2
Svenn