Question

我正在使用Visual Studio 2017的Core 2.0 + Angular 4模板。我已经完成了基本程序并且运行起来非常容易，但我很快就将第三方库集成到应用程序中了。我从片刻j开始。首先，我做到了 npm install - 保存时刻 node_modules中的哪个加载时刻然后我打开webpack.config.vendor.js并添加片刻到非树摇晃，像这样：

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

（注意我也尝试过这一刻＆＃39;虽然我在运行webpack时都工作，但最终都没有工作。我选择＆＃39;时刻/时刻＆＃39;因为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中。在这一点上，我对如何实际使用时刻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。如果要执行el：ElementRef，我如何在Typescript中使用它？我假设它很相似，但我不确定（而且我知道我应该避免使用jQuery，但是我正在迁移一个遗留网站，这个网站只有一些我没有的jquery是时候更换了）

Answer 1

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

npm install --save angular2-moment

然后用以下内容导入：

import * as moment from 'moment';

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

使用npm install --save libName
将其包含在脚本下的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” ]
将其声明为组件中的全局变量（就像您正在做的那样）

声明var moment：any

Answer 2

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

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

然后在你的组件中：

import * as moment from 'moment';

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

2 个答案: