Come includere Underscore.js nel progetto angular2 creato utilizzando angular-cli

Question

Desidero includere underscore.js all'interno del progetto angular2 creato utilizzando angular-cli. Fino ad ora non riesco a farlo. Ho provato finora:

1- npm installare sottolineatura --save

2- TSD installare sottolineatura

3- script src = "/ node_modules sottolineatura/underscore.js", riferimento a index.html

4- all'interno del sistema-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- import * _ come da 'sottolineatura';

Ma undercore.js non viene copiato nella directory 'dist' durante l'esecuzione e il browser si lamenta di non trovare underscore.js. Penso che mi manchi qualcosa al punto # 4. Qualsiasi aiuto è molto apprezzato mentre sto iniziando ad apprendere angular2. Si ricorda che questo progetto è realizzato da angular-cli, e non da nessun altro progetto di seed. Oltre a Underscore.js, il progetto sta funzionando bene.

[EDIT] package.json ha "sottolineatura": "^ 1.8.3" in dipendenze

Answer 1

Hai in progetto un file chiamato Package.json? Se sì, si può provare ad aggiungere questa riga

"underscore": "^1.8.3", 

nelle dipendenze di questo file.

Modifiche nella 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" 
    } 
    }; 

e per fare un NPM installare dopo.

Answer 2

Penso che potresti aver saltato un passaggio? Ti sei ricordato di impostare il trattino basso nel file "angular-cli-build.js"? Questo passaggio indica a clingon di inserire il trattino basso nella cartella del venditore (/ dist/venditore).

Ecco come ho ottenuto il lavoro di sottolineatura.

1. Installare sottolineatura e tipizzazioni:

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

2. Impostazione di sottolineatura in "angolari-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. Poi sottolineano ottenere compilato nella cartella vendor (/ dist/venditore), e ora è possibile indicare questa posizione dal file 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' 
       } 
   }; 
   

Ricordarsi di utilizzare il percorso del foro compreso il.js Spero che questo aiuti :)

ho fatto lo stesso con momento, dalla documentazione: https://github.com/angular/angular-cli/wiki/3rd-party-libs

Answer 3

angolari 2 servizi igienici 3 frammenti di file

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 installare sottolineatura --save 2- TSD installare sottolineatura (se TSD si installa prima installazione che) 3) ora non NPM installare 4) poi npm Iniziamo

Answer 4

installare sottolineatura utilizzando NPM Vai a YourAppName/src/typings.d.ts e aggiungere questa linea declare module 'underscore'; quindi eseguire ng costruire

Answer 5

Sto usando angolare-cli, tutto quello che ho fatto è stato di aggiungere questa linea in package.json

"underscore": "^1.8.3", 

e poi corro:
1. npm install underscore --save
2. npm install

e ha funzionato ...

Answer 6

Utilizzando Angular CLI 1.0.0-rc.1, la soluzione consigliata è descritta qui:

Angular2 2.4 How to load external libraries sush as Underscore into 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 

Poi nella classe componente:

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

alternativa, v'è un altro modo di caricare script "statiche" a angolare-cli come descritto qui https://www.npmjs.com/package/angular-cli#global-library-installation:

In .angular-cli.json, aggiungilo all'array degli script:

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

Questo caricherà underscore.js, ma questo non è un buon modo per renderlo disponibile per l'uso nelle classi dattiloscritto.

Answer 7

installare sottolineatura:

npm i underscore --save 

in angolare cli.JSON:

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

dopo il comando run:

ng build 

nella componente:

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