1

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.

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

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

My question is:

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

Dessus
  • 2,147
  • 1
  • 14
  • 24
mrapi
  • 5,831
  • 8
  • 37
  • 57
  • 1
    I personally wouldn't use jQuery with angular as Angular4 can replace it fully. But to me it sounds that you are not correctly embedding jquery inside your `webpack.config.vendor.js` (maybe post relevant parts of it?). Also please note that the default templates, enables server-side rendering (the `asp-prerender-module="ClientApp/dist/app.module.server.ts"` in your Indes.cshtml or _Layout.cshtml). When you remove it, the page won't be rendered on the server. Usually with server-sided rendering you can't access the session store or `window.document` or anything else from `window` object – Tseng Oct 30 '17 at 18:46
  • This among other things causes angular/node/javascript application to fail, when server-sided rendering is enabled and much of jQuery depends on it. Also see the comments on [this issue](https://github.com/aspnet/JavaScriptServices/issues/609#issuecomment-275483183) – Tseng Oct 30 '17 at 18:47
  • Hi.jQuery not needed,but I want to use a plugin that requires jQuery.I opened posts for my problems: https://stackoverflow.com/questions/47013168/webpack-adding-jquery-plugin-error-jquery-requires-a-window-with-a-document or https://stackoverflow.com/questions/46977802/not-able-to-use-a-jquery-plugin-with-angular-4-and-webpack or https://stackoverflow.com/questions/47020549/angular-4-ng2-bootstrap-modal-error-module-parse-failed-unexpected-token thanks – mrapi Oct 30 '17 at 19:57
  • It's exactly what I told you. It is because of prerendering. When the javascript code is executed on your server, there is no `window` instance. It only exists, wenn code runs **in the browser**. If you need such code, you must **disable** preredndering – Tseng Oct 30 '17 at 19:58
  • and how to do this?thanks – mrapi Oct 30 '17 at 19:59
  • 1
    See and **read** my comments here (or the answer in your linked question) – Tseng Oct 30 '17 at 20:01

1 Answers1

1

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).

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.

See here: https://webpack.js.org/guides/shimming/#other-utilities and here: https://github.com/webpack-contrib/script-loader

Dessus
  • 2,147
  • 1
  • 14
  • 24