如何通过 NPM 添加新库？

Question

我有 angularjs2 应用程序。 我想添加新库。我已经安装了库，所以现在我有了：

1. node_modules/angular2-token - 一些文件

2. "angular2-token": "0.0.3" - 在 package.json 中

如何添加 Angular2TokenService 来使用它？ 在 app.component.ts 我尝试添加：

import {Angular2TokenService} from 'node_modules/angular2-token/angular2-token.js';

或

import {Angular2TokenService} from 'angular2-token';

添加到组件提供者：[Angular2TokenService]

和构造函数

 constructor(private _tokenService: Angular2TokenService) {
        this._tokenService.init({
            apiPath: '',
            signInPath: 'auth/sign_in',
            signOutPath: 'auth/sign_out',
            validateTokenPath: 'auth/validate_token',
            updatePasswordPath: 'auth/password',
            userTypes: null
        });
    }

我忘了添加什么？

更新 包.json：

{
  "name": "aspnet",
  "version": "0.0.0",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "devDependencies": {
    "typings": "0.8.1",
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "tslint": "^3.7.4",
    "typescript": "^1.8.10"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.1",
    "angular2-in-memory-web-api": "0.0.9",
    "angular2-token": "0.0.3",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.0",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  },
  "repository": {}
}

systemjs.config.js（但我找不到包含它的位置）：

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

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

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

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }

  System.config(config);

})(this);    

在 index.html 我有这部分：

System.config({
    map:{
        'angular2-token': 'node_modules/angular2-token/angular2-token.js'
    },
    packages: {
        app: {
            defaultExtension: 'js'
        }
    }
});

错误：

http://localhost:56597/node_modules/angular2-token/src/angular2-token.service 404（未找到）

Answer 1

将 Angular2TokenService 导入你的组件

import { Angular2TokenService } from 'angular2-token';

将 Angular2TokenService 添加为组件的提供者

@Component({
    selector: 'app',
    providers: [Angular2TokenService],
    templateUrl: './app.html',
})

将 Angular2TokenService 注入你的组件并调用 .init()

constructor(private _tokenService: Angular2TokenService) {
    this._tokenService.init();
}

看看这是否有帮助。

---

编辑：

systemjs.config.js 文件的 map 和 packages 部分应如下所示-

  // map tells the System loader where to look for things
      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',
        'angular2-token':             'node_modules/angular2-token'
      };

      // 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' },
        'angular2-token':             { main: 'angular2-token.js', defaultExtension: 'js' }
      };

示例 index.html 供您参考-

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>