web-dev-qa-db-ja.com

angle-cliを使用して構築されたangular2プロジェクトにUnderscore.jsを含める方法

angular-cliを使用して構築されたangular2プロジェクト内にunderscore.jsを含めたい。今まで私はそうすることができません。私はこれまで試しました：

1-npmインストールアンダースコア--save

2-tsdインストールアンダースコア

3-スクリプトsrc = "node_modules/underscore/underscore.js"、index.htmlで参照

4-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-インポート* as _ from 'アンダースコア';

しかし、underscore.jsは実行時に「dist」ディレクトリにコピーされておらず、ブラウザはunderscore.jsが見つからないと文句を言います。ポイント4で何かが足りないと思います。私はangular2を学び始めているので、どんな助けでも大歓迎です。このプロジェクトはangular-cliによって作成されており、他のシードプロジェクトによって作成されていないことを忘れないでください。 Underscore.jsを除いて、プロジェクトは正常に機能しています。

[編集] package.jsonの依存関係に「アンダースコア」：「^ 1.8.3」があります

angular2-cli
10
raju

Angular CLI 1.0.0-rc.1を使用して、推奨される解決策を次に示します。

Angular2 2.4アンダースコアとして外部ライブラリsushを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

次に、コンポーネントクラスで：

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

または、ここで説明するように、angular-cliに「静的」スクリプトをロードする別の方法があります https://www.npmjs.com/package/angular-cli#global-library-installation ：

.angular-cli.jsonで、スクリプト配列に追加します。

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

これによりunderscore.jsが読み込まれますが、TypeScriptクラスで使用できるようにするための良い方法ではありません。

7
Leonya

npmを使用してアンダースコアをインストールしますyourappname/src /typings.d.tsに移動してこの行を追加しますdeclare module 'underscore';次にngbuildを実行します

4
Adam Winnipass

Angular2フル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
  }
}

types.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 install underscore --save 2- tsd install underscore（tsdが最初にインストールされない場合）3）npm installを実行します4）次にnpmstartを実行します

2
Hetal Sagar

アンダースコアをインストールします。

npm i underscore --save

angle-cli.jsonで：

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

コマンド実行後：

ng build

コンポーネント内：

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

私はAngular-cliを使用していますが、この行をpackage.jsonに追加するだけでした。

"underscore": "^1.8.3",

そして私は走ります：
1。 npm install underscore --save
2。 npm install

そしてそれはうまくいきました...

0
HappyCoder

あなたは一歩を逃したかもしれないと思いますか？ 「angular-cli-build.js」ファイルにアンダースコアを設定することを覚えていますか？この手順では、ベンダーフォルダ（/ dist/vendor）にアンダースコアを付けるようにclingonに指示します。

これが私がアンダースコアを機能させる方法です。

  1. アンダースコアと入力をインストールします。

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

  2. 「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. 次に、アンダースコアがベンダーフォルダー（/ dist/vendor）にコンパイルされ、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'
  }
};

.jsを含むホールパスを使用することを忘れないでくださいこれが役立つことを願っています:)

ドキュメントから、私は瞬間と同じことをしました： https://github.com/angular/angular-cli/wiki/3rd-party-libs

0
DNRN

プロジェクトにPackage.jsonというファイルがありますか？はいの場合、この行を追加してみてください

"underscore": "^1.8.3",

このファイルの依存関係で。

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

その後、npmインストールを実行します。

0
Naella