Asp Core +Angular 4 +VS 2017，从 webpack 模板转移到别的东西答案

【问题标题】：Asp Core +Angular 4 +VS 2017,moving from webpack template to something elseAsp Core +Angular 4 +VS 2017，从 webpack 模板转移到别的东西
【发布时间】：2017-10-30 18:31:15
【问题描述】：

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

旧应用使用systemjs.config.js，新模板使用webpack，但使用新模板我遇到了很多问题：

jQuery 插件不能正常工作（以前工作）
在部署时，我在 Angular 库上遇到了新错误（以前可以正常工作）

我的问题是：

除了 webpack，我可以使用其他 Angular 4 与 Asp Core Web Api+ VS 2017 的集成吗？

【问题讨论】：

我个人不会将 jQuery 与 Angular 一起使用，因为 Angular4 可以完全取代它。但对我来说，这听起来你没有正确地将 jquery 嵌入到你的 webpack.config.vendor.js 中（也许发布它的相关部分？）。另请注意，默认模板启用服务器端呈现（Indes.cshtml 或 _Layout.cshtml 中的 asp-prerender-module="ClientApp/dist/app.module.server.ts"）。当您删除它时，该页面将不会在服务器上呈现。通常使用服务器端渲染，您无法访问会话存储或 window.document 或来自 window 对象的任何其他内容
当启用服务器端渲染并且大部分 jQuery 依赖它时，这会导致 angular/node/javascript 应用程序失败。另请参阅this issue上的 cmets
Hi.jQuery 不需要，但我想使用需要 jQuery 的插件。我为我的问题打开了帖子：stackoverflow.com/questions/47013168/… 或 stackoverflow.com/questions/46977802/… 或 stackoverflow.com/questions/47020549/… 谢谢
这正是我告诉你的。这是因为预渲染。在您的服务器上执行 javascript 代码时，没有 window 实例。它只存在，wenn 代码在浏览器中运行。如果你需要这样的代码，你必须disable preredndering
在此处查看并阅读我的 cmets（或链接问题中的答案）

标签： javascript angular webpack asp.net-core visual-studio-2017

【解决方案1】：

发生这种情况的原因是 webpack 将 jQuery（或任何库/脚本）包装在模块中的方式。这意味着像 window.$ 这样的东西在 Webpack 中默认是不可用的，因为 $ 变量的作用域是在一个特定的模块中。如果您在输出的代码中搜索 jQuery，您会看到这一点，它将被包裹在一些奇怪的东西中（即 commonjs 或 es6 模块等）。

要解决这个问题，您必须在 webpack（或 shim）中使用 script-loader，这将允许您在全局上下文中加载脚本。你不应该这样做，除非你真的需要。正如其他人所提到的，通常将 jQuery 与 Angular 一起使用是不明智的，因为您应该尽量避免使用 Angular 抓取 DOM（这就是为什么您可能会选择 Angular 作为开始的库的原因）。如果通过 DOM 引用项目，对 Angular 的扩展（例如 AOT 编译）也可能会中断。

请看这里：https://webpack.js.org/guides/shimming/#other-utilities 在这里：https://github.com/webpack-contrib/script-loader

【讨论】：