Dependencies prevent use with Angular

[ghost]

I see where there is support for Node.js by using npm install sharepointplus. However, this will only compile for Node.js server-side due to the dependencies on node-sp-auth and sp-request.

I thought, ok, no problem. I will just reference the single sharepointplus-5.2.min.js file in my angular.json. Again, that fails to compile because of the dependency on sp-request.

So, I have two questions.

1. Is there any way for this to work in an Angular 2+ project?
2. Have you considered converting this library to TypeScript or at least creating Type files for import into a TS project?

BTW, I don't know if you still work for Dell but I am doing a contract project for Dell at the moment and would like to use this library instead of SPServices plug-in for JQuery. Thanks!

[Aymkdn]

Hi,

It's explained at the bottom of the documentation:

I don't use Angular, but it's how I use it with my webpack projects!

Regarding TypeScript, no, I didn't consider to convert to TypeScript. I don't even know how to create Type files for import into a TS project. If you give me some direction, then I can evaluate how much work it will require.

And, yes, I still work there. There are only two Aymeric in France, and I'm not the Sales guy ;-)

[ghost]

I see. Sorry I missed that. Unfortunately, the Angular team has obfuscated away any direct control over Webpack starting around Angular 6. Lots of folks aren't happy about it because of issues exactly like the one I am facing. Here is an interesting SO post where people talk about how this could really hamper using Angular CLI as a production system. I dunno if I would go that far :) What it does do is force package developers to really think about how they divide up their libraries and what dependencies they decide to rely on.

https://stackoverflow.com/questions/39187556/angular-cli-where-is-webpack-config-js-file-new-angular6-does-not-support-ng-e

I will try the JQuery plug-in called SPServices since Sharepointplus is not explicitly compliant with Angular CLI. If that doesn't work I will circle back and see about hacking the Webpack configuration.

Have you thought about breaking the library into a client-only build and a client+node build? That would seem to be the "simple" solution (nothing's ever simple, though. Right? :)

[ghost]

Actually, it looks like there may be a way to customize webpack after all. I am going to try it:
https://netbasal.com/customize-webpack-configuration-in-your-angular-application-d09683f6bd22

[ghost]

The online documentation you refer to is not something that comes up here in the USA with a typical search. The github.com/Aymkdn/SharepointPlus page does not contain the webpack reference. However, I did find the info you referenced at the bottom of symkdn.github.io/SharepointPlus

I think it would help others if the font of Webpack were increased a little. You could also put something like "Webpack (used by Angular)..." so that the search engines would pick it up.

Cheers and thanks for the fast response!

[Aymkdn]

Have you thought about breaking the library into a client-only build and a client+node build? That would seem to be the "simple" solution (nothing's ever simple, though. Right? :)

Yes, I may look at this at some point. I'd also like to split the library in smaller parts, to leverage tree shaking with Webpack. I just need time to work on it...

The github.com/Aymkdn/SharepointPlus page does not contain the webpack reference

I can add a reference to Webpack on that page too and make it more clear that the README is only a very basic documentation.

I think it would help others if the font of Webpack were increased a little.

I use Bootstrap, and it's true, they use 13px for the font-size when I usually use (at least) 14px. I'll increase it for next release.

You could also put something like "Webpack (used by Angular)..."

Yeah, why not... But also VueJS (the one I use) and React I guess :-)

I'll keep that issue opened to treat the above points when I'll release a new version.

[ghost]

That's great feedback.

Okay, I was able to get Angular to build by installing a couple of things.

1. npm i -D @angular-builders/custom-webpack
2. npm i -D webpack-notifier
3. create a webpack.config.js file in the root of the Angular CLI application:

`const WebpackNotifierPlugin = require('webpack-notifier');
const webpack = require('webpack');

module.exports = {
plugins: [
new webpack.IgnorePlugin(/^sp-request$/),
new webpack.IgnorePlugin(/^xmldom$/)
]
};`

4. Make updates to the angular.json file
   "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig":{ "path": "./webpack.config.js" }, } } } ... "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "browserTarget": "bolt:build" },

To use the library in Angular:

1. npm i sharepointplus
2. add a script reference in angular.json
   "scripts" : [ "node_modules/sharepointplus/sharepointplus-5.2.min.js"]
3. reference the library at the top of your component(s)
   import * as $SP from 'sharepointplus';
4. add a declaration below the component imports so the compiler is happy
   declare var $SP:any;

I will say that after all of this, I did manage to get this library working.

Unfortunately, at this point I discovered that all of the results come back in a very heavy format with a TON of extra information, probably because SharePoint XML is returned from the native SP methods that are doing all of the heavy lifting.

I would so love a way to get back only JSON values when requesting data from a list. Otherwise, I will have to write a lot of map commands to translate every value with a getAttribute() call.

Maybe the use of the $SP().ajax or other raw command is the only answer.

Hope all of this is helpful. I'd love to hear your thoughts.

[Aymkdn]

SharepointPlus is based on SOAP Webservices that return XML. The reason is that the WebService is far more powerful than the Rest (at least to get items from a list), offering some cool stuff not available yet with Rest. Also the library was originally built for SP2007 and back then, Rest wasn't a thing.

The JSON returned by Rest is very noisy too, but certainly less. If you want something super simple, you can use Rest, but if you want to join several lists, play with calendars, use SQL syntax, and much more, SP will save you a lot of time.

[ghost]

Definitely. I've built a lot of things on SharePoint and I find the apps scale a lot better on that platform if you can offload the processing to the client computers and avoid having the farm do too much joining and data manipulation considering it isn't a relational platform. But for platform-specific things like calendars, metadata, the search services, and especially workflow manipulation, the web services are definitely the way to go.

Glad I got it all to work with Angular though. Hopefully this helps some people out.

[ghost]

Just FYI...I was able to get PnP/sp to work with Angular without the customizations to Webpack or any server-side dependencies. It also returns JSON with its method calls which is primarily what I wanted since I'm dealing with a large volume of list data. Thanks again for your help.

[Aymkdn]

In the coming SharepointPlus v6.0 the JSON option will be supported, and I changed the package.json which should make Webpack to ignore the server-side modules when building for the browser, without changing the configuration.