CODEWITHSUNDEEP
javascriptangularwebpackasp.net-corevisual-studio-2017
mrapi
mrapi

Reputation: 6015

Asp Core +Angular 4 +VS 2017,moving from webpack template to something else

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?

Upvotes: 1

Views: 233

Answers (1)

Dessus
Dessus

Reputation: 2177

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

Upvotes: 1

Related Questions