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

Question

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

Demandé el 9 de Août, 2016: Quand la question a-t-elle été
64303 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je ne sais pas comment inclure les fichiers JS (vendeurs) après avoir fait passer Angular Cli de SystemJs à Webpack.

Par exemple

Option A

J'ai quelques fichiers js qui ont été installés via npm. Ajouter des balises script à la balise head comme ceci ne fonctionne pas. Cela ne semble pas non plus être la meilleure solution.

<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 bundle de webpack. Cela semble être la façon dont il faudrait probablement procéder. Cependant, je ne suis pas sûr de savoir comment le faire car tout le code de webpack semble être caché derrière le paquet node angular-cli-webpack. Je pensais qu'il y avait peut-être une autre configuration de webpack à laquelle nous pourrions avoir accès. Mais je n'en suis pas sûr car je n'en ai pas vu lors de la création d'un nouveau projet angular-cli-webpack.

Plus d'informations :

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

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

Demandé el 9 de Août, 2016 par Kris Hollenbeck

0 votes

Il semblerait qu'ils soient passés à la version 2.0 de Typecript.

Commenté el 9 de Août, 2016 par Nathan Smith

0 votes

Jetez un coup d'œil à blogs.msdn.microsoft.com/typescript/2016/06/15/

Commenté el 9 de Août, 2016 par Nathan Smith

0 votes

Merci pour le lien, mais ce n'est pas ce que je recherche. C'est pour ajouter les fichiers de définition. J'essaie de comprendre quelle est la bonne façon d'inclure des bibliothèques JavaScript tierces dans mon projet.

Commenté el 9 de Août, 2016 par Kris Hollenbeck

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

97voto

Kris Hollenbeck Points 5132

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

Cela peut être accompli en utilisant scripts:[] sur angular.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
  }
}

Note : Comme la documentation suggère dans l'installation de la bibliothèque globale : si vous changez la valeur de votre styles (ou scripts !), alors :

Redémarrez ng serve si vous l'exécutez,

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

Note : Comme indiqué dans les commentaires ci-dessous. Les librairies JS qui prennent en charge les modules UMD par l'intermédiaire de importations es6 tels que jQuery peuvent également être importés dans vos fichiers typescript à l'aide de la syntaxe d'importation es6. Par exemple : import $ from 'jquery'; .

Répondu el 23 de Septembre, 2016 par Kris Hollenbeck (5132 Points )

4 votes

Comment puis-je référencer jquery dans Typescript une fois que j'ai ajouté le script à angular-cli.json ?

Commenté el 7 de Décembre, 2016 par Ibanez0

0 votes

@Ibanez0, Vous devez installer les fichiers de définition de jQuery. De @types . npmjs.com/~types Voici un billet connexe. stackoverflow.com/questions/35660498/

Commenté el 7 de Décembre, 2016 par Kris Hollenbeck

1 votes

BTW Si le fichier externe à ajouter est un polyfill, il existe un mécanisme dédié à cet effet, joliment décrit dans le document suivant src/polyfills.ts (à partir de beta.31)

Commenté el 16 de Février, 2017 par rmag

Afficher 10 autres commentaires

Answer 3

25voto

Christian Ulbrich Points 875

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

Donc si vous dépendez vraiment de quelque chose qui est chargé avant angulaire lui-même ( Option A ), vous devez alors le copier manuellement dans un dossier qui sera inclus dans la compilation d'angular et vous pouvez ensuite le charger manuellement avec une commande de type <script> sur <head> .

Ainsi, pour réaliser option a vous devez le faire :

créer un vendor dans le dossier src/
ajouter ce dossier en tant qu'actif à .angular-cli.json :

"assets": [ "assets", "favicon.ico", "vendor" ]
copier votre script vendeur node_modules/some_package/somejs.js à vendor
le charger manuellement dans index.html : <head> <script src="vendor/some_package/somejs.js"> </head>

Cependant, la plupart du temps, cette approche n'est nécessaire que pour les paquets qui doivent être disponibles dans le monde entier, avant tout le reste (c'est-à-dire certains polyfills). La réponse de Kris est valable pour Option B et vous bénéficiez des avantages de la construction de webpack (Minification, Hash, ...).

Cependant, si vos scripts pas besoin être disponibles au niveau mondial et si elles sont prêts pour les modules vous pouvez les importer dans src/polyfills.ts ou mieux encore, ne les importez que lorsque vous en avez besoin dans vos composants spécifiques.

Rendre scripts globalement disponibles via scripts:[] ou en les chargeant manuellement apporte son lot de problèmes et ne devrait vraiment être utilisé que lorsque c'est absolument nécessaire.

Répondu el 15 de Janvier, 2018 par Christian Ulbrich (875 Points )

0 votes

C'est génial parce que je peux créer un fichier de configuration js par environnement, le laisser là et le charger au moment de l'exécution au lieu d'utiliser des fichiers environment.ts et de devoir construire angular pour chaque environnement (terrible...).

Commenté el 25 de Septembre, 2019 par Erik Philips

0 votes

Avez-vous un exemple d'utilisation de polyfills ou de chargement de composants spécifiques ?

Commenté el 28 de Octobre, 2019 par Steve Lam

0 votes

@SteveLam Veuillez être plus précis ou poser une nouvelle question. Habituellement, les polyfills ne sont pas chargés dans un fichier spécifique mais à l'échelle mondiale à moins que vous ne vouliez que vos composants soient autonome mais même dans ce cas, il est préférable de définir l'environnement d'exécution que vous attendez et de laisser le consommateur du composant décider quand et comment charger un polyfill.

Commenté el 28 de Octobre, 2019 par Christian Ulbrich

Afficher 3 autres commentaires

Answer 4

4voto

Prashant Barve Points 1912

Vous devez ouvrir le fichier .angular-cli.json et doivent rechercher "scripts:" ou si vous voulez ajouter une css externe, vous devez trouver le mot "styles": dans le même fichier.

Dans l'exemple ci-dessous, vous verrez comment le Js bootstrap( bootstrap.min.js ) et CSS de type "bootstrap" ( bootstrap.min.css ) comprend 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 le chemin du fichier ici dans .angular-cli.json au même endroit (dans "scripts":[] ).

Répondu el 26 de Décembre, 2017 par Prashant Barve (1912 Points )

Answer 5

3voto

Svenn Points 19

Vous pouvez jeter un coup d'œil à cette page : https://github.com/angular/angular-cli#global-library-installation

Il montre les bases de l'inclusion des fichiers .js et .css.

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

Répondu el 14 de Septembre, 2016 par Svenn (19 Points )

7 votes

Les réponses sous forme de liens sont découragées. Veuillez citer les parties essentielles de la réponse à partir du ou des liens de référence, car la réponse peut devenir invalide si la ou les pages liées changent.

Commenté el 14 de Septembre, 2016 par Stuart Siegler

Answer 6

-1voto

zilj Points 505

Je n'ai pas encore utilisé angular-cli mais je travaille actuellement sur une construction Angular/Webpack. Afin de fournir à mon application jQuery et d'autres vendeurs, j'utilise le plugin de webpack, ProvidePlugin() . Il sera généralement placé dans votre webpack.config.js : Voici un exemple pour les bibliothèques jquery, lodash et moment. Voici un lien vers le documentation (ce qui est vague au mieux)

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'lodash',
    moment: 'moment',
  })
]

Incroyablement, il vous permet en fait de l'utiliser immédiatement, à condition que toutes les autres configurations de webpack aient été effectuées correctement et que vous ayez été installé avec npm .

Répondu el 9 de Août, 2016 par zilj (505 Points )

1 votes

La configuration webpack d'angular cli fait en fait partie du paquet node d'angular cli. Je ne peux donc malheureusement pas la modifier. Par exemple, dans le CLI, il y a des commandes prédéfinies pour construire. ng build Tout ceci est géré par le client. Mais je pensais qu'il y avait probablement un moyen d'ajouter des choses dans le cadre de la construction. Mais je n'ai pas vu d'exemple clair.

Commenté el 9 de Août, 2016 par Kris Hollenbeck

0 votes

Ah, mes excuses. J'avais filtré les questions sur Angular 2 mais celle-ci m'a échappé. Bonne chance.

Commenté el 9 de Août, 2016 par zilj

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: