Angular 2 : Can't find package after npm install

Question

我尝试通过 npm install 安装多个软件包。例如:

npm install ng2-storage

软件包已正确安装在node_modules目录中。

我尝试通过以下方式导入库:

import { StorageSettings } from 'ng2-storage';

但是当我启动 npm start 时出现此错误:

app/main.ts(3,33): error TS2307: Cannot find module 'ng2-storage'.

我对每个第三方软件包都有这个问题。

更新:将其添加到我的系统配置中:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'dist', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'ng2-storage':                'node_modules/ng2-storage'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ng2-storage':                { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

ma​​in.ts

import { StorageSettings } from 'ng2-storage';

同样的问题...

Answer 1

您需要将第三方包添加到您的 systemjs.config.js 文件中，您可以在其中告诉您的应用在哪里查找文件。例如，我几分钟前安装了 ng2-bootstrap，我必须添加以下内容:

var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'moment': 'node_modules/moment',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
};

var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' },
};

搜索您的 node_modules 文件夹以查看需要为库添加的内容。