Asp Core + Angular 4 + VS 2017，从Webpack模板移动到其他东西 [英] Asp Core +Angular 4 +VS 2017,moving from webpack template to something else

问题描述

我正在尝试将Angular 4 + ASP Web Api 5迁移到ASP Core.我已使用VS 2017 Angular 4模板并添加了其余代码.

I'm trying to migrate an Angular 4 + ASP Web Api 5 to ASP Core. I've used the VS 2017 Angular 4 template and added the rest of code.

较旧的应用程序使用 systemjs.config.js ，新模板使用webpack，但是在使用新模板时，我遇到了很多问题:

The older app uses systemjs.config.js, new template uses webpack but with new template I got lots of problems:

jQuery插件无法正常运行(以前可以正常运行)
部署后，我在角度库上遇到了新错误(以前可以正常使用)

jQuery plugins not working proprly (previously working)
On deploy I got new errors on angular libraries(previously working)

我的问题是:

除Webpack之外，我是否可以将其他Angular 4集成与Asp Core Web Api + VS 2017一起使用?

Can I use other Angular 4 integrations with Asp Core Web Api+ VS 2017 than webpack?

推荐答案

之所以发生这种情况，是因为webpack将jQuery(或任何库/脚本)包装在模块中的方式.这意味着默认情况下，Webpack将无法使用window.$之类的东西，因为$变量的作用域是在特定模块内.如果您在输出的代码中搜索jQuery，就会发现它被包裹在奇怪的东西中(例如commonjs或es6模块等).

The reason why this is happening for you is because of the way webpack will wrap jQuery (or any library / script) in a Module. This means that things like window.$ won't be available to you by default with Webpack, because the $ variable is scoped to be within a specific module. You can see this if you search for jQuery in the code that is outputted, that it will be wrapped in something odd (ie a commonjs or es6 module etc).

要解决此问题，您必须在webpack(或填充程序)中使用脚本加载器，这将允许您在全局上下文中加载脚本.除非确实需要，否则不应该这样做.正如其他人提到的那样，通常将jQuery与Angular一起使用是不明智的，因为您应避免使用Angular爬网DOM(这就是为什么您可能会选择Angular作为库的原因).另外，如果通过DOM引用项目，则对Angular的扩展(例如AOT编译)可能会中断.

To get around this you must use script-loader in webpack (or a shim) which will allow you to load scripts in the global context. You shouldn't do this unless you really need to. As others have mentioned it is unwise to use jQuery with Angular generally as you should try to avoid crawling the DOM with Angular (as that is why you would perhaps pick Angular as a library to begin with). Also extensions to Angular such as AOT compiling could break if referencing items by the DOM.

请参阅此处: https://webpack.js.org/guides/shimming/#other-utilities 此处: https://github.com/webpack-contrib/script-loader

这篇关于Asp Core + Angular 4 + VS 2017，从Webpack模板移动到其他东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！