无法在 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. 检查是否确实通过WebPack正确渲染了Alertifyjs（我尝试通过开发人员工具的控制台调用Alertify，但它不起作用） - 这不是必不可少的，但是它的良好学习

2. 通过WebPack

获得警报才能正确工作
3. 参考并在Angular2中使用Alertify

感谢提前的任何帮助，如果在Stackoverflow上回答了这一点，我非常抱歉，我错过了！

另外，我的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 始终创建一个全局，这将是可怕的呢幸运的是，我们看到它不会创建一个全局

然后我们看到了。

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

这很奇怪。首先，这与上面的import语句中使用的模块指定符不一致，即"alertifyjs"。最后，当使用commonjs样式在打字稿中导入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配置：将其从

中删除

entry.vendor

将其从

中删除

webpack.ProvidePlugin({ ... })

现在让我们清理打字稿

删除

declare var alertify: any;

add

import * as AlertifyJS from 'alertifyjs';

为什么？因为它将安装在该软件包名称下的节点模块文件夹中，并且因为在库之后命名导入是一个很好的做法>

最后，我们将修复此

@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;
    .....
}