web-dev-qa-db-fra.com

Comment inclure Underscore.js dans le projet angular2 construit avec angular-cli

Je veux inclure underscore.js dans le projet angular2 construit avec angular-cli . Jusqu'à présent, je suis incapable de le faire. J'ai essayé jusqu'à présent:

1- npm install underscore --save

2- tsd install underscore

3- script src = "node_modules/underscore/underscore.js", référence dans index.html

4- à l'intérieur de system-config.js

/** Map relative paths to URLs. */
var map = {
    'underscore': '../node_modules/underscore/underscore.js'
};
/** User packages configuration. */
var packages = {
    'underscore': '../node_modules/underscore/underscore.js'
};

5- importer * comme _ à partir de 'soulignement';

Mais underscore.js n'est pas copié dans le répertoire 'dist' lors de l'exécution, et le navigateur se plaint de ne pas avoir découvert underscore.js. Je pense que quelque chose me manque au point n ° 4 . Toute aide est très appréciée car je commence à apprendre angular2 . N'oubliez pas que ce projet est conçu par angular-cli et non par un autre projet pilote. Autre que Underscore.js, le projet fonctionne bien.

[EDIT] Package.json a "underscore": "^ 1.8.3" dans les dépendances

angular2-cli
9
raju

En utilisant Angular CLI 1.0.0-rc.1, la solution recommandée est décrite ici:

Angular2 2.4 Comment charger des bibliothèques externes sush comme Underscore dans angular2.

npm install underscore --save // save to dependencies: required to run
npm install @types/underscore --save-dev // save to dev dependencies: required in dev mode

Puis dans votre classe de composant:

import * as _ from 'underscore';
...
subtitle = _.head(['xyz'])

Sinon, il existe un autre moyen de charger des scripts "statiques" dans angular-cli comme décrit ici https://www.npmjs.com/package/angular-cli#global-library-installation :

Dans .angular-cli.json, ajoutez-le au tableau de scripts:

"scripts": ["../node_modules/underscore/underscore.js"]

Cela chargera underscore.js, mais ce n'est pas un bon moyen de le rendre disponible pour une utilisation dans vos classes TypeScript.

7
Leonya

installez le trait de soulignement à l’aide de npm Accédez à votre nomapp/src/typings.d.ts et ajoutez cette ligne declare module 'underscore'; puis exécutez ng build

4
Adam Winnipass

Extraits de fichiers angulaires 2 complets 3

package.json

    {
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "tsd": "^0.6.5",
    "underscore": "^1.8.3",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "TypeScript": "^2.0.2",
    "typings": "^1.3.2"
  }
}

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'underscore':                 'npm:underscore',

      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },


      rxjs: {
        defaultExtension: 'js'
      },
      'underscore':{
       main: './underscore.js', 
       defaultExtension: 'js'
       },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  },
  "ambientDependencies": {
    "underscore": "github:DefinitelyTyped/DefinitelyTyped/underscore/underscore.d.ts#f0990e288ac73d593e982995947567aa2643b828"
  }
}

1- npm installer underscore --save 2- tsd installer underscore (si tsd n'installe pas la première installation) 3) maintenant, installez npm 4) puis npm start

2
Hetal Sagar

installer un trait de soulignement:

npm i underscore --save

dans angular-cli.json:

"scripts": [
        "../node_modules/underscore/underscore-min.js",
         ...
      ],

après la commande d'exécution:

ng build

en composant:

declare var _: any;
@Component({...})
1
Emir Mamashov

J'utilise Angular-cli, tout ce que j'ai fait est d'ajouter cette ligne dans package.json

"underscore": "^1.8.3",

et puis je cours:
1. npm install underscore --save
2. npm install 

et ça a marché ...

0
HappyCoder

Je pense que vous avez peut-être manqué une étape? Vous êtes-vous souvenu de mettre en soulignement dans le fichier "angular-cli-build.js"? Cette étape indique à Clingon de mettre un trait de soulignement dans le dossier du fournisseur (/ dist/vendor).

Voici comment j'ai obtenu le trait de soulignement. 

  1. Installer des traits de soulignement et des dactylographies:

    npm install underscore --save
typings install underscore --save --ambient

  2. Mise en place du soulignement dans "angular-cli-build.js":

    module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'moment/moment.js',
      'underscore/underscore.js'
    ]
  });
};

  3. Ensuite, le soulignement est compilé dans le dossier du fournisseur (/ dist/vendor) et il est maintenant possible de pointer vers cet emplacement à partir du fichier system.config.ts:

    const map: any = {
  "underscore": "vendor/underscore/underscore.js",
  "moment": "vendor/moment/moments.js"
};

/** User packages configuration. */
const packages: any = {
  'underscore': {
    format: 'cjs'
  },
  'moment': {
    format: 'cjs'
  }
};

N'oubliez pas d'utiliser le chemin d'accès, y compris le fichier .js, j'espère que cela vous aidera :)

J'ai fait la même chose que pour l'instant, à partir de la documentation: https://github.com/angular/angular-cli/wiki/3rd-party-libs

0
DNRN

Avez-vous dans votre projet un fichier nommé Package.json? Si oui, vous pouvez essayer d'ajouter cette ligne 

"underscore": "^1.8.3",

dans les dépendances de ce fichier.

Modifications dans system-config.ts

var map = {

    "underscore": "node_modules/underscore",

  };

var packages = {
    'underscore':            { main: 'index.js', defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

var config = {
    map: map,
    packages: packages,
    paths: {
      "underscore": "/node_modules/underscore.js"
    }
  };

Et pour faire un npm installer après cela. 

0
Naella