アンダースコアをAngular 2 CLIプロジェクトにインポート

Question

Angular CLIツールを使用して新しいプロジェクトを開始しました。その後、アンダースコアをインポートするにはthis official guideに従います。と言いますと、ちょうどです。ブラウザで

しかし、まだ私のプロジェクトがクラッシュし、私はエラーメッセージを表示して、私のapp.componentにアンダースコアを使用しよう：下線がDIST /ベンダーフォルダに追加され

ORIGINAL EXCEPTION: ReferenceError: _ is not defined

ので、私の推測では、ということでしょう問題はSystemjsの設定にあります。ここで

は私の角度-CLI-ビルドです：ここで

var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 

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

は私のシステム-configです：

"use strict"; 

// SystemJS configuration file, see links for more information 
// https://github.com/systemjs/systemjs 
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md 

/*********************************************************************************************** 
* User Configuration. 
**********************************************************************************************/ 
/** Map relative paths to URLs. */ 
const map: any = { 
    'underscore':     'vendor/underscore/', 
}; 

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

//////////////////////////////////////////////////////////////////////////////////////////////// 
/*********************************************************************************************** 
* Everything underneath this line is managed by the CLI. 
**********************************************************************************************/ 
const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 
    'rxjs', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    /** @cli-barrel */ 
]; 

const cliSystemConfigPackages: any = {}; 
barrels.forEach((barrelName: string) => { 
    cliSystemConfigPackages[barrelName] = { main: 'index' }; 
}); 

/** Type declaration for ambient System. */ 
declare var System: any; 

// Apply the CLI SystemJS configuration. 
System.config({ 
    map: { 
    '@angular': 'vendor/@angular', 
    'rxjs': 'vendor/rxjs', 
    'main': 'main.js' 
    }, 
    packages: cliSystemConfigPackages 
}); 

// Apply the user's configuration. 
System.config({ map, packages }); 

マイapp.component：

私は行くん

/// <reference path="../../typings/globals/underscore/index.d.ts" /> 

import { Component } from '@angular/core'; 

declare var _; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    template: `<h1>{{title}}</h1>` 
}) 
export class AppComponent { 
    title = _.version; 
} 

違う？

およびWHYはこれほど複雑ですか？単純なサードパーティのライブラリを追加するのは面倒です。

Answer 1

設定は基本的にunderscoreに設定されているので、必要なときにSystemJSがそれを見つけることができます。あなたはsystem-config.tsを変更した場合

、あなたはSystemJSに語った：誰もがunderscoreを要求した場合、それはvendor/underscore/フォルダで見つけることができるファイルunderscore.jsである - とそのモジュール形式はCommonJS（cjs）です。

angular-cli-build.jsでの変更は、それが選ぶとvendorフォルダに投げる必要がありますどのファイルの角度-cliを伝えるためのものです。 （あなたがSystemJSに語ったのであれば、これはそれが可能にするもので、そこに下線を見つけると思います。）

しかし、それだけではがインポートされません/アプリのグローバルスコープにアンダースコアを追加します。

.tsファイルごとにインポートする必要があります。そのため、SystemJSはそれをそのモジュールのトランジルド.jsに追加します。代わりに、この2行の

：

/// <reference path="../../typings/globals/underscore/index.d.ts" /> 
declare var _; 

は、あなたのファイルにこれを追加します。

import * as _ from 'underscore'; 

---

をあなたは問題がある場合は、で実行されているの.js生成されたソースを検査してみてくださいブラウザ。あなたのケースでは、underscoreをインポートする方法がないと考えられます（require()）。

Answer 2

第三者libを追加するドコは誤解を招きます。 私は1時間以上私の頭を叩いている！あなたが必要なもの

declare var _; // this won't work. 

は、私はすでにこれを試してみた

/// <reference path="../../../typings/globals/underscore/index.d.ts" /> 
import * as _ from 'underscore';