C# Can'；t导入/引用Angular2中的第三方库

对不起，这个问题被问了这么多次。在过去的几天里，我尽了很大的努力来让这一切顺利进行，我觉得我错过了一些让这一切变得不可能的琐事

背景： 使用.NETCore作为Angular2前端的后端，使用Webpack2.2.1部署js/css。（顺便说一句，我正在使用以下模板）

我尝试将alertifyjs引用到一个typescript服务（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() {
    }

因此，我当前的问题是如何：

检查alertifyjs是否通过webpack正确呈现（我尝试通过开发人员工具的控制台调用alertify，但它不起作用）-这不是必要的，但很好的学习

通过网页获取alertify以正确工作

参考并使用Angular2中的alertify

提前感谢您的帮助，如果在StackOverflow上的某个地方回答了这个问题而我错过了它，我非常抱歉

另外，我的网页包配置如下：

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 } })
    ])
};

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=新的ExtractTextPlugin（'vendor.css'）；
module.exports={
决心：{
扩展名：[''，.js']
},
解析加载程序：{
是的，
},
模块：{
装载机：[
{测试：/\（png | woff | woff2 | eot | ttf | svg）（\？$）/，加载器：'url加载器？限制=100000'，
{test:/\.css（\？\$）/，加载程序：extractCSS.extract（['css']）}
]
},
条目：{
供应商：[
“@angular/common”，
“@angular/compiler”，
“@angular/core”，
“@angular/http”，
“@角度/平台浏览器”，
“@角度/平台浏览器动态”，
“@angular/router”，
“@angular/platform服务器”，
“angular2通用”，
“angular2通用多边形填充”，
“自举”，
'bootstrap/dist/css/bootstrap.css'，
“es6垫片”，
“es6承诺”，
“jquery”，
'zone.js'，
“alertifyjs”，
//"systemjs",，
'font-awesome/css/font-awesome.css'
]
},
输出：{
path:path.join（uu dirname，'wwwroot'，'dist'），
文件名：'[name].js'，
库：'[name]\[hash]'，
},
插件：[
提取CSS，
new webpack.ProvidePlugin（{$：'jquery'，jquery:'jquery'，alertify:'alertifyjs'}），//将这些标识符映射到jquery包（因为Bootstrap希望它是一个全局变量）
新建webpack.optimize.OccurenceOrderPlugin（），
新建webpack.DllPlugin({
path:path.join（uu dirname，'wwwroot'，'dist'，'[name]-manifest.json'），
名称：'[name]\[hash]'
})
].concat（isDevBuild？[]：[
新建webpack.optimize.UglifyJsPlugin（{compress:{warnings:false}}）
])
};

您评论的

导入

/

要求

与您的网页配置不同步。这可能是问题所在，也可能不是问题所在，但会带来麻烦

让我们看一看

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

然后我们看到这个

declare var alertify: any;

这意味着你想要一个全球的，一个非常不同的东西，因为你是依靠网页来提供它，这将不会工作，除非alertifyjs总是创建一个全球，这将是可怕的！ 幸运的是，除非没有可用的加载程序，否则它不会创建全局

然后我们看到这个

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

这很奇怪。首先，这与上面的

“alertifyjs”

语句中使用的模块说明符不一致。最后，在使用CommonJS样式导入TypeScript中的CommonJS依赖项时，不要使用

var

或

let

甚至

const

，请使用

import

。也就是说，应该避免这种风格

现在转到我们的网页包配置

我们在

条目下看到

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

同样的问题是包裹的名字是什么<代码>'alertify.js'或

'alterfyjs'

或

但从现在起，我们陷入了更大的麻烦 继续我们看到的网页包配置

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

那么我们叫它什么，它是模块还是全局的

我们必须作出决定

允许删除与alertify相关的所有网页包配置： 把它从

entry.vendor

把它从

webpack.ProvidePlugin({ ... })

现在让我们清理一下打字脚本

删除

declare var alertify: any;

加

为什么?？因为它将安装在该包名称下的node modules文件夹中，并且因为在名为AlertifyJS not 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;
    .....
}

---

哇，谢谢你的全面回答，我现在就来试试看。该死的，你是上帝派来的。你花了这么多功夫才让它工作起来，而且你完全击中了它的头部。很高兴能提供帮助：）

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