maliksahil / spfxangularcli Goto Github PK

A starter template for SPFx and Angular CLI

License: Apache License 2.0

TypeScript 72.73% JavaScript 22.90% HTML 3.74% CSS 0.63%

spfxangularcli's Introduction

SPFx Angular CLI WebPart

SharePoint Framework - is awesome! But don't we wish it worked with Angular? And in working with Angular, we mean - work with all of Angular. Not a half-cooked version.

Angular

Angular is awesome, but requires a lot of startup ceremony.

#Angular-CLI

Angular CLI pretty much removes all that ceremony. It gives you a well put together project for Angular that gives you tests, scss support, lazy loading, bundling, etc. etc. basically everything you'd expect out of Angular.

I'd be willing to bet that the vast majority of code written in Angular is being written using Angular CLI.

So ..

Wouldn't it be nice if we could use SPFx with Angular CLI? Yes - this project template lets you do exactly that.

What about Angular-Elements?

I love Angular Elements and I think it will add a lot of value. But here is a myth: You need Angular Elements for SPFx.

NO YOU DON'T!

Angular Elements WILL add a lot of value, but I'd be willing to bet it'll work very nicely with Angular CLI too.

Still, you don't NEED Angular Elements to make it work with SPFx.

Instructions

Make sure you have Angular CLI installed
Make sure your dev env is setup for SPFx (i.e. gulp, yeoman installed globally, and run gulp trust-dev-cert on an SPFx project first)
Then clone this repo, run npm install, and run either gulp serve or npm start.

Everything you'd expect from a SPFx project works here, gulp clean gulp --ship gulp package-solution --ship etc.

Hit me with any questions!

spfxangularcli's People

Contributors

Stargazers

Watchers

Forkers

sezarmbar mariantoader nobremateus shailesh-sangekar damogallagher zdong11 workcontrolgit jaydevops mekdiabebe aelkerdawy pnocera alexandrromanov decvs manusquall bardewa-group

spfxangularcli's Issues

Upgrade required

Is there possible to upgrade the template for Angular v7?

routing in multiuse weppart

thank you Sahil for a great job !!!

routing work great with one webpart.
But !

when i'm adding second webpart , only the first router-outlet view routing.
If i try to click the link in the second or third webpart first router-outlet take the event and change the rout.

how can i fix this
thanks

Error: Runtime compiler is not loaded - SharePoint app part using Angular 5.

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[X] Other... Please describe:

Current behavior

What kind of app this is: SharePoint Web Part that uses Angular 5. Project is a standard SharePoint framework web part with that uses Angular 5 for the UI of the part. This project was started and inspired from the project here.

Inspired From Project:
For instructions on project that inspired this one, click here.
Original Inspired GitHub Project Here

Expected behavior

Show new dynamic component with the updated HTML in the web part successfully without any errors.

Minimal reproduction of the problem with instructions

Download project from here.
run npm install to install all components.
run command gulp serve to spin up SharePoint web part server locally on a workbench page.
NOTE: Changing code live while server is running can be done to update the page.
To add part, follow steps below.

Hover mouse over center of workbench page to show pic below.
Click the + sign and choose the web part at the bottom of the list
The error in the developer tools console window will show

FULL ERROR TEXT BELOW

What is the motivation / use case behavior?

I have a piece of HTML from a server that I need to render. This HTML can be changed on the server side essentially letting the person change the looks of the web part as well as the data that gets pulled in. This HTML is used to dynamically create a component during run time and then showing this component in the web part.

Environment


Angular version: X.Y.Z


Browser:
- [X] Chrome (desktop) version 66.0.3359.139 64-bit
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version 59.0.3 64-bit
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [X] IE version 11.371.16299.0 
- [X] Edge version 41.16299.3710.0
 
For Tooling issues:
- Node version: 8.11.1
- Platform:  Windows 10 Pro (10.0, Build 16299) - 64-bit

Others:

IDE: Visual Studio Code v1.23.0
OS: Windows 10 Pro (10.0, Build 16299) - 64-bit
HTTP Server: Built in gulp server that comes with SharePoint web part.

Scaffold difference in SP Online only and SP 2016

Hello Malik,
first I'd like to thank you for providing a lot of information for SPFx in general and SPFx with Angular.
Since I'm pretty new in SharePoint development, I just have a raw idea about the difference when you scaffold a new webpart for SP Online only or for SP2016 onwards.
So my question is, is this solution for SP2016 onwards or just SP Online?
Dear regards

wsaupload forbidden

I get the following error when running on production server workbench but works fine locally. Is this an issue with the workbench version? I don't have issue with other frameworks.

I'm using sharepoint on-premise btw, does this work with on-premise as well or is this just for sharepoint online?

***ERROR MESSAGE:
***Failed to load component "a884f6f5-e74c-4932-972f-0e1431147413" (AppWebPart).
Original error: ***Manifest not found for component id "7263c7d0-1d6a-45ec-8d85-d4d1d234171b" and version "1.4.1".

***CALLSTACK:
Error: ***Failed to load component "a884f6f5-e74c-4932-972f-0e1431147413" (AppWebPart).
Original error: ***Manifest not found for component id "7263c7d0-1d6a-45ec-8d85-d4d1d234171b" and version "1.4.1".
at /_layouts/15/next/spfx/sp-webpart-workbench-assembly_en-us.js?version=1:675:105711
at

Console says WsaUpload.ashx forbidden.

Bindings Don't work

I noticed in the webpart there is this line:

 platformBrowserDynamic().bootstrapModuleFactory(
        AppModuleNgFactory, { ngZone: 'noop' })
      .catch(
         err => console.log(err));

This cause the zones not to work and I have to call ChangeDetectorRef manually which is fine but none of the 2 way bindings work. I'm using PrimeNG controls and none of those bindings work? Is there a way to get the two way bindings to work?

Also, nothing inside of the angular-cli.json works? Whats' the point of using the CLI if none of it works besides using the command to create a couple of files ng g c ??? What's the point?

This almost seems like it's more trouble than it's worth. Seems all good for little test projects but I'm trying to use this for real project and it's really slowing me down and it's not even that complicated of a project, I think I could of finished by now using just typescript and no framework at all or have learned React in and completed in the amount of hrs and rabbit holes I've had to go done. Is Angular Elements going to be the same ordeal because if so I'm going to dump this for SharePoint spfx. Works great full page in a document library but I don't think this is any good for spfx.

Is there any way to get the bindings to work with zone's turned off?

ngModel and angular forms is not working.

I added the simple registration form in the cloned application. I want to add a simple form with some validations (with angular forms), but no message was displayed on the screen. I have added logs in the validation method and logs are displayed properly. I tried second option to show and hide the label on validation failed method still no luck.
Can you suggest any modification in solution for this?

PrimeNG library in SPFx

Hi Sir,

Recently, I started with SPFx development with angular 5. Your tutorials helped me a lot to understand SPFx. Thanks Sir. I am able to implement bootsrap, routing and angular CLI as well but I am facing issues while integrating PrimeNG controls wit SPFx. Could you please me integrate the PrimeNG module with SPFx.
Thanks in advance
Srini

How to include styles?

I want to include styles but regardless if i add them to the styles.css or app.component.css and include that one in the app.component.ts the styles wont be loaded. Any idea?

Use of Bootstrap

Bootstrap effects not showing up after I installed bootstrap, jquery, and popper via cli and declared the following in angular.cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Do i need to declare any thing else in other places?

Apply Routing Lazy loading fail

Hi maliksahil,

It's a awesome project and save my time a lot, I continue with your source code and try to make it can lazy load with routing but I have a problem when it's running on sharepoint online,

Could you help me a little bit.

Many Thanks,
Thang Trinh

On-premise not working

It works great on DEV environment when I use 1.4.1 version of SP framework, but for on-premise I must use 1.1.0 and it does not work with that version... It would not start DEV environment neither build. In console, there is an error like: 404 manifests.js not found... Do you have any solution for this?

Routing not working.

I added the Angular material dependent below module and routing starts not working. Please check.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

Update to Angular 6

This is a great template.
I tried updating it to use Angular 6 with no success. Is this something that you can provide for us?

Thanks
Damien

How to import polyfills.ts into the bundle

I have angular 5 and spfx working fine now with changed detection turned off, I did have to modify the 3rd party control source I'm using for it to work propertly by adding changeDetectorRef.detectChanges() and finally have a working webpart. Great

My next issue is how do I include the polyfills.ts file since my webpart won't render in IE. Do I need to import this somewhere or is there a way to get webpack to bundle this or do I just copy what I need from polyfills and paste the imports into the webpart?

external scss files

@maliksahil Do external scss still work the same? Can I include them in the angular-cli.json file? I see the compiled css file in the lib folder but the styles aren't working.

Also can I include external scripts as well in the angular-cli.json file or should I use the externals in the config.json?