无法在Angular2中导入/引用第三方库

Question

对不起，这个问题已经被问了很多次。我已经尝试了很多努力，试图在过去的几天里得到这个工作，我觉得我已经错过了一些让这不可能的小事。

背景： 使用.NET Core作为Angular2前端的后端和webpack 2.2.1来部署js/css。 （我用下面的模板BTW，http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/）

我想用下面引用alertifyjs为打字稿服务（notifications.service.ts）：

import { Injectable } from '@angular/core'; 
//import * as alertify from 'alertifyjs'; 

declare var alertify: any; 
//var alertify = require('alertify.js'); 

@Injectable() 
export class NotificationService { 
    private _notifier: any = alertify; 
    constructor() { 
    } 

所以我现在的问题是，我该怎么办：

1. 检查alertifyjs实际上是被正确地呈现过的WebPack（我打过电话alertify通过对开发工具的控制台，它不工作） - 这是不是必需的，但其良好的学习

2. 获取alertify通过的WebPack正常工作

3. 参考，并Angular2使用alertify

感谢提前任何帮助，我超级超级抱歉，如果这已经在计算器上，我回答的地方错过了！

而且，我的WebPack配置如下：

var isDevBuild = process.argv.indexOf('--env.prod') < 0; 
var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var extractCSS = new ExtractTextPlugin('vendor.css'); 

module.exports = { 
    resolve: { 
     extensions: [ '', '.js' ] 
    }, 
    resolveLoader: { 
     debug: true, 
    }, 
    module: { 
     loaders: [ 
      { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, 
      { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) } 
     ] 
    }, 
    entry: { 
     vendor: [ 
      '@angular/common', 
      '@angular/compiler', 
      '@angular/core', 
      '@angular/http', 
      '@angular/platform-browser', 
      '@angular/platform-browser-dynamic', 
      '@angular/router', 
      '@angular/platform-server', 
      'angular2-universal', 
      'angular2-universal-polyfills', 
      'bootstrap', 
      'bootstrap/dist/css/bootstrap.css', 
      'es6-shim', 
      'es6-promise', 
      'jquery', 
      'zone.js', 
      'alertifyjs', 
      //'systemjs', 
      'font-awesome/css/font-awesome.css' 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot', 'dist'), 
     filename: '[name].js', 
     library: '[name]_[hash]', 
    }, 
    plugins: [ 
     extractCSS, 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', alertify: 'alertifyjs' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.DllPlugin({ 
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
      name: '[name]_[hash]' 
     }) 
    ].concat(isDevBuild ? [ ] : [ 
     new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 
    ]) 
}; 

Answer 1

您的评论import/require s为不同步您的WebPack配置的一两件事。这可能是也可能不是问题，但会造成麻烦。

让我们来看看

// fine if 'alertifyjs' is the name of the package 
import * as alertify from 'alertifyjs'; 

然后我们看到这个

declare var alertify: any; 

要在全球这说明，一个非常不同的事情，因为你是依靠的WebPack提供它，这不会工作，除非alertifyjs总是创建一个全球性的，这将是可怕的！ 幸运的是，我们看到它不会创建一个全局的，除非没有可用的装载程序https://github.com/MohammadYounes/AlertifyJS/blob/master/build/alertify.js#L3571

然后我们看到这个。

var alertify = require('alertify.js'); 

这很奇怪。首先，这与上面import声明中使用的模块说明符"alertifyjs"不一致。最后，当使用CommonJS风格在TypeScript中导入CommonJS依赖项时，请不要使用var或let，甚至不要使用const，请使用import。这就是说这种风格应该避免。

现在正在我们的WebPack配置

我们看到在entry

vendor: [ 
    ..... 
    'alertifyjs', 
    ..... 
] 

同样的问题是，什么是包的名称？ 'alertify.js'或'alterfyjs'或

但是从这里我们陷入更大的麻烦 用的WebPack配置继续我们看到

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', alertify: 'alertifyjs' }), 
// Maps these identifiers to the jQuery package 
// (because Bootstrap expects it to be a global variable) 

那么，我们调用它，并且它是一个模块或全球性的？

我们必须做出决定。

让我们删除所有相关的WebPack配置来alertify： 从

entry.vendor 

删除它

webpack.ProvidePlugin({ ... }) 

现在让我们来收拾打字稿

删除

删除

declare var alertify: any; 

添加

import * as AlertifyJS from 'alertifyjs'; 

为什么？因为它将被安装在根据该包名称的节点模块文件夹，因为这是很好的做法，名字被称为AlertifyJS不alertify

最后后库的进口，我们会解决这个问题

@Injectable() 
export class NotificationService { 
    private _notifier: any = alertify; 
    ..... 
} 

，因为它是错误代码，并与该

@Injectable() 
export class NotificationService { 
    // :any in an assignment context is perhaps the worst TypeScript code we could write. 
    notifier = AlertifyJS; 
    ..... 
}