Question

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

node_modules / angular2-token - some files
＆＃34; angular2-token＆＃34;：＆＃34; 0.0.3＆＃34; - 在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
        });
    }

我忘了添加什么？

已更新 的package.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);

我有这个部分：

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">   <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>  <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>  <body> <my-app>Loading...</my-app> </body> </html>

如何通过NPM添加新库？

1 个答案: