SharePoint Framework and Angular–Introducing SPFX with Angular

GETTING STARTED

Getting started with Angular and the SharePoint is simple. First of all, close or fork the Github project. To clone the project and install all the necessary dependencies, execute the following commands in your environment :
git clone https://github.com/mananchoksi007/SPFX-Angular.git
npm install
gulp serve
The sample that you are running is very basic. It allows to render all the items (Id and Tile) of a specified list (by its name). I works on a local Workbench using mocked data and it works on the hosted Workbench using real data.

RUNNING THE SAMPLE

Once you have a browser running the local SharePoint Workbench, please add the "BasicAngular" webpart to your authoring canvas and see the result. You will see an Angular application running and you should be able to configure it through the editor panel by changing the title of the webpart and the list name. Once the list name is configured, you should see mocked results being rendered in your interface. At this point, to prove that the we can leverage multiple Angular webparts on the same page, you can add a second webpart and change its title. Both webpart will have a different configuration and will be completely isolated.

WHAT'S NEXT?

Isn't it cool? I find it amazing that we can finally run real code using Angular in the SharePoint Framework and that we can leverage the great features of Angular without compromises.
This is not the end of the Angular story in the SharePoint Framework. We absolutely need the community to test, contribute and use the concepts illustrated in this sample solution. Your feedback will impact this solution as we really want to support all the nice and shiny features that Angular add to the developer tool belt.
In the next post, we will cover the general concepts used to make this solution work and how it solves the challenges of the SharePoint Framework!
Oh! And (finally), happy Angular coding on the SharePoint Framework!

Setting up your first SharePoint On-Premises -SPFX client side web part to a SharePoint library

Setting up and Environment First

Enable auto provision for Microsoft SharePoint Foundation Subscription Settings Service

1. $appPool = Get-SPServiceApplicationPool "ServiceApps"

$serviceApp = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $appPool -name "App Management Service Application" -DatabaseName "Dev1_Subscription"

$serviceAppProxy = New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $serviceApp

1. $appPool = Get-SPServiceApplicationPool "ServiceApps"

$serviceApp = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $appPool -name "Subscription Settings Service Application" -DatabaseName "Dev1_Subscription"

$serviceAppProxy = New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $serviceApp

1. Manage Web Applications -> Manage Features -> Activate Apps that require accessible internet facing endpoints
2. Central Admin -> Apps -> Manage App Catalog – Set up site

1. Central Admin -> Apps -> URLs (change if needed)

URL: https://mc-google.blogspot.com(your sharepoint on-premises server)/sites/appcatalog/_layouts/15/start.aspx

Issues:

You may be trying to access this site from a secured browser on the server. Please enable scripts and reload this page.

Resolution: Internet options -> Security -> add to trusted sites

Build your First Hello World SPFX webpart

Step 1: Create Webpart

     Setting up NPM environment for SPFX

• npm install -g npm
• npm install -g yo
• npm install -g gulp
• npm install -g @microsoft/generator-sharepoint

      After install preliminary tools you can follow the below steps. 

• Create a new Webpart, I named here “spfx-firstwebpart”
• md spfx-firstwebpart
• cd spfx-firstwebpart
• Create new Webpart yo @microsoft/sharepoint

It will create a new Webpart refer below screenshot

Build the Webpart gulp serve

Step 2: Create SharePoint Library

• Create a SharePoint Library “Myspfxwebparts” and give read permission to all users.

Step 3: Open code Visual Studio Code

• Open the code in Visual code tool.
• Type in cmd : code .

Step 4: Update the CDN Path

• We need to configure the CDN path, i.e SharePoint Library what we created. https://mc-google.blogspot.com/sites/appcatalog/Myspfxwebparts
• we have to configure our CDN path in write-manifests.json file. This file can be found in the config folder.
• i.e

{
  “cdnBasePath”: “https://mc-google.blogspot.com/sites/appcatalog/Myspfxwebparts”
}

• Save the file.
• Switch to cmd prompt

Step 5: Package and Deploy the webpart

• Generate the files to deploy in the SharePoint Library
• gulp trust-dev-cert
• gulp bundle –ship
• Generated files can be found in spfx-firstwebpart\temp\deploy folder
• upload the files in the SharePoint Library
  • https://mc-google.blogspot.com/sites/appcatalog/Myspfxwebparts
• Create a .spapp file for this webpart to upload in App Catalog
  • gulp package-solution –ship
  • Generated spapp file can be found in spfx-firstwebpart\sharepoint folder
  • upload the spapp file in App catalog
  • SharePoint will show you a popup and ask you to trust the client-side solution to deploy.
  • Click Deploy

Step 6: Install the App

• Open your SharePoint Site
• Go to “Add an App”
• Click “From Your Organization”
• Select and Click you app to install it.

Syep 7: Add the Webpart in your Page

• After App installation
• Go to your Page
• Edit the Page
• Click Insert tab and click Webpart
• Select Custom folder –> you can see your webpart, refer below screenshot

• Now you can add your webpart
  • Select the your webpart and Click Add
  • It will add your webpart