Visual Studio 2017 + Core 2 + Angular项目-加载和使用第3方库 [英] Visual Studio 2017 + Core 2 + Angular project - loading and USING 3rd party libraries
问题描述
我正在使用Visual Studio 2017的Core 2.0 + Angular 4模板.我已经基本程序启动并足够容易地运行，但是我很难将第三方库集成到应用程序中.我从时刻js开始.首先，我做到了npm install-节省时间在node_modules中哪个加载的时刻然后，我打开webpack.config.vendor.js，并在非摇树中添加了力矩，如下所示:
I'm working with the Core 2.0 + Angular 4 template for Visual Studio 2017. I have the basic program up and running easily enough, but I am having a heck of a time getting third party libraries integrated into the application. I'm starting with moment js. First, I did npm install --save moment Which loaded moment in node_modules Then I opened webpack.config.vendor.js and added moment to the non tree shaking, like this:
const nonTreeShakableModules = [
...
'jquery',
'moment/moment'
];
(请注意，我也只尝试了'moment'，尽管最终在我运行webpack时都起作用了，但最终还是没有用.我选择了'moment/moment'，因为存在node_module/moment/moment.js)
(note i also tried just 'moment' and that didn't work either in the end though both worked when i ran webpack. I choose 'moment/moment' because node_module/moment/moment.js exists)
然后，我跑了
webpack --config webpack.config.vendor.js
而且工作正常，没有错误.
and that worked without errors.
注意:当我打开生成的vendor.js文件时，我现在将其视为文件的一部分:
Note: When I open up the vendor.js file that is generated, I see this as part of the file now:
**-/* 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至少可以找到该文件.
So I'm confident webpack is at least finding the file.
但是，现在出现了一个问题，即我将其捆绑在vendor.js中，现在该如何实际使用.在这一点上，我对如何实际使用js时刻感到茫然.
But THEN came the question of how I actually USE moment now that its bundled in vendor.js. At this point, I'm at a loss as to how to actually USE moment js.
我尝试过:
import * as moment from 'moment/moment' (or 'moment' when i tried that)
然后:
declare var moment: any
然后，这也直到运行时才失败:
Then this, which also didn't fail until runtime:
import { Moment } from 'moment/moment'
constructor(private moment: Moment) {}
我知道它已经达到了，但是我不得不尝试
which was reaching, I know, but I had to try it
但是每次使用矩的尝试都会告诉我矩是不确定的.
But every time, any attempt to use moment tells me moment is undefined.
有人可以告诉我如何在此应用程序中添加momentjs以及如何在Angular组件中实际使用它吗?
Could someone please show me how to add momentjs to this application and how to actually USE it within my an Angular component?
BONUS POINTS:我看到默认情况下添加了JQuery.在给定el:ElementRef的情况下，如何在Typescript中使用它?我假设它与之相似，但我不确定(我知道我应该避免使用jQuery，但我正在迁移的旧站点中只包含一些jquery，而我现在还没有时间来替换它)
BONUS POINTS: I see JQuery is added by default. How do I use that in Typescript given an el: ElementRef to execute against? I'm assuming its similar, but I'm not sure (and I know I should avoid jQuery but I'm migrating a legacy site that has just a bit of jquery that I don't have time to replace just yet)
推荐答案
您无需手动添加moment.js.只需使用angular2-moment软件包:
You don't need to include moment.js manually. Just use angular2-moment package:
npm install --save angular2-moment
然后将其导入:
import * as moment from 'moment';
更新要使用另一个没有角度包装器的外部库，您将:
Update To use another external library that doesn't have an angular wrapper you would:
- 使用
npm install --save libName安装 -
将其包含在脚本下的angular-cli.json中.例如:
- Install it with
npm install --save libName Include it in your angular-cli.json under scripts. For example:
脚本":["../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"]
"scripts": [ "../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" ]
将其声明为组件中的全局变量(就像您所做的一样)
Declare it as a global variable in your component (like you were doing)
声明var时刻:任意
这篇关于Visual Studio 2017 + Core 2 + Angular项目-加载和使用第3方库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
