Visual Studio 2017 + Core 2 + Angular 项目 - 加载和使用第 3 方库

Question

我正在使用 Visual Studio 2017 的 Core 2.0 + Angular 4 模板。我已经很容易地启动并运行了基本程序，但是我很想将第三方库集成到应用程序中。我从时刻 js 开始。首先，我做到了 npm install --保存时刻 node_modules 中的哪个加载时刻 然后我打开 webpack.config.vendor.js 并为非摇树添加了时刻，如下所示：

const nonTreeShakableModules = [
    ...
    'jquery',
    'moment/moment'
];

（请注意，我也尝试了“moment”，尽管在我运行 webpack 时两者都有效，但最终也没有用。我选择“moment/moment”，因为 node_module/moment/moment.js 存在）

然后，我跑了

webpack --config webpack.config.vendor.js

而且没有错误。

注意：当我打开生成的 vendor.js 文件时，我现在将其视为文件的一部分：

    **-/* WEBPACK VAR INJECTION */(function(module) {var require;//! moment.js
    -//! version : 2.19.1
    -//! authors : Tim Wood, Iskren Chernev, Moment.js contributors
    -//! license : MIT
    -//! momentjs.com**

;(function (global, factory) {....

所以我相信 webpack 至少可以找到文件。

但是问题是我现在如何实际使用时刻，因为它捆绑在 vendor.js 中。在这一点上，我对如何实际使用 moment js 感到茫然。

我试过了：

import * as moment from 'moment/moment' (or 'moment' when i tried that)

然后：

declare var moment: any

然后这个，直到运行时也没有失败：

import { Moment } from 'moment/moment'
constructor(private moment: Moment) {}

我知道，但我必须尝试一下

但每一次，任何使用时刻的尝试都会告诉我时刻是未定义的。

有人可以告诉我如何将 momentjs 添加到此应用程序以及如何在我的 Angular 组件中实际使用它吗？

奖励积分：我看到默认情况下添加了 JQuery。我如何在 Typescript 中使用它给定一个 el: ElementRef 来执行？我假设它相似，但我不确定（我知道我应该避免使用 jQuery，但我正在迁移一个遗留站点，它只有一点我没有时间替换的 jquery）

Answer 1

如果我理解这个问题，你可以在你的 webpack 配置中尝试这样的事情：

plugins: [
    new webpack.ProvidePlugin({
        moment: "moment"
    }),

然后在你的组件中：

import * as moment from 'moment';

Answer 2

您无需手动包含 moment.js。只需使用 angular2-moment 包：

npm install --save angular2-moment

然后将其导入：

import * as moment from 'moment';

更新 要使用另一个没有角度包装器的外部库，您可以：

1. 用npm install --save libName安装它

2. 将它包含在脚本下的 angular-cli.json 中。例如：

   “脚本”：[ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/tether/dist/js/tether.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js", “../node_modules/bootcards/dist/js/bootcards.min.js” ]

3. 在您的组件中将其声明为全局变量（就像您所做的那样）

   声明 var 时刻：任意