Question

我正在编写一个基本的Angular 2应用程序。我正在创建一个类User，其函数validPassword()使用bcrypt来验证密码：

import { compareSync, genSaltSync, hashSync } from 'bcrypt';
import { Document, Schema, model } from 'mongoose';

export class User {
  username: string;
  password: string;

  isValidPassword(password: string): boolean {
    return compareSync(password, this.password)
  }
}

let userSchema = new Schema({
  username: { required: true, type: String },
  password: { required: true, type: String }
}, { timestamps: true });

userSchema.pre('save', function (next) {
  this.password = hashSync(this.password, genSaltSync(8));
  next();
});

export interface UserDocument extends User, Document {}

export const Users = model<UserDocument>('User', userSchema);

如您所见，我使用的是bcrypt和mongoose npm套餐。

我的SystemJS配置如下：

(function (global) {
  System.config({
    map: {
      '@angular': 'node_modules/@angular',
      'bcrypt': 'node_modules/bcrypt',
      'bindings': 'node_modules/bindings',
      'mongoose': 'node_modules/mongoose',
      'rxjs': 'node_modules/rxjs'
    },
    paths: {
      'node_modules/@angular/*': 'node_modules/@angular/*/bundles'
    },
    meta: {
      '@angular/*': {'format': 'cjs'}
    },
    packages: {
      'src': {main: 'main', defaultExtension: 'js'},
      '@angular/core': {main: 'core.umd.min.js'},
      '@angular/common': {main: 'common.umd.min.js'},
      '@angular/compiler': {main: 'compiler.umd.min.js'},
      '@angular/forms': {main: 'forms.umd.min.js'},
      '@angular/http': {main: 'http.umd.min.js'},
      '@angular/platform-browser': {main: 'platform-browser.umd.min.js'},
      '@angular/platform-browser-dynamic': {main:'platform-browser-dynamic.umd.min.js'},
      'bcrypt': {main: 'bCrypt.js'},
      'mongoose': {main: 'index.js'},
      'rxjs': {defaultExtension: 'js'}
    }
  });
}(this));

我的打字依赖项是：

{
  "globalDependencies": {
    "bcrypt": "registry:dt/bcrypt#0.0.0+20160316155526",
    "core-js": "registry:dt/core-js#0.0.0+20160914114559",
    "jasmine": "registry:dt/jasmine#2.5.0+20161003201800",
    "mongodb": "registry:dt/mongodb#2.1.0+20160602142941",
    "mongoose": "registry:dt/mongoose#4.5.9+20161010180758",
    "node": "registry:dt/node#6.0.0+20161014191813"
  }
}

我的tsconfig如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

当我去运行项目时，控制台中会显示以下错误：

1274 GET http://localhost:8080/crypto 404 (Not Found)
http://localhost:8080/node_modules/mongoose/lib.js 404 (Not Found)
http://localhost:8080/node_modules/bindings/ 404 (Not Found)

我知道这是一个SystemJS问题。当我去添加时，比方说，

'bindings': 'node_modules/bindings'

到地图对象和

'bindings': {main: 'bindings.js'},

到SystemJS中的packages对象，我得到一组全新的错误（无法找到fs和路径）。

每次安装新软件包时，是否应该手动添加所有缺少的软件包路径？有更好的方法吗？

Answer 1

我最近在使用SystemJS将服务器端捆绑到一个文件时遇到了同样的问题。问题，至少与mongoose（我怀疑其他人）一样，是SystemJS不支持节点扩展格式，所以它并不理解在＆＃34; ./ lib＆＃34;中找到index.js。夹。即使你添加＆＃34; mongoose / lib＆＃34;对于你的System.config，mongoose依赖于大量的节点模块，这些模块需要在System.config.package.mongoose中进行大量的映射才能进行补偿。

我找到的解决方案是创建一个新的系统模块并将其设置为＆＃34;包＆＃34;您需要的，在您的System.config之上。

System.set('package', System.newModule({
  default: require('package') 
}));

不幸的是，如果您使用的是打字稿，那么您的导入语句需要您的＆＃34;包＆＃34;有一个类型。这些基本上只是一组接口和抽象类，因此您的整个打字稿项目可以理解＆＃34;包＆＃34;库有函数，类等...

但是某些包类型（如mongoose）没有默认导出。因此，如果你像上面那样设置mongoose模块并导入如下..

import mongoose from 'mongoose';

你肯定会得到转换器或IDE打字稿错误，因为如上所述，打字类型没有相应的默认导出。

要解决此问题，只需在tsconfig.json中将 allowSyntheticDefaultImports 选项设置为 true

希望这会有所帮助：）

Answer 2

我在一段时间内遇到了同样的问题，我正在使用Angular-cli，所以猜测没有涉及SystemJs。我试图加载'diff'节点模块，后面为我工作：

import * as JsDiff from 'diff';

来源：https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1

希望它有所帮助！

使用TypeScript，Angular 2和SystemJS导入节点模块

2 个答案: