Setup Angular (CLI) Elements project and SPFX as two projects solution
In my previous post, I reviewed generally about SharePoint Framework and Angular. What the challenge was when it came to using SharePoint Framework with Angular. For those who want to read about it, read my previous post here.
In this post I will only go through how to manually set up SharePoint Framework webpart as 2 project solution. This is not something I would recommend anyone to do unless they have their own reasons for it. Since this is a time consuming process, it is much faster to just create SPFX projects with Angular elements using @pnp/spfx. And there is always some curl with dependencies versions ect. This is to understand the concept behind 2 project solution with SPFX and Angular Elements.
So you have to stick your tongue in your mouth when doing this.
What You Should Know
- SPFX Development (SharePoint Framework)
- It’s essential that you are familiar with Angular
- Office 365 subscription (Tenant level)
- You will need Visual Studio Code
- Browser version: Chrome, or Edge Chromium will be best for development and debugging.
Let’s get started
- First create a folder name: spfx_angularelements
- and then cd into the folder:
- Then run this command for creating the Angular project:
ng new SPFXAngularElements
- select “NO” for routing.
- select plain “CSS”
- Once project is created, cd.. into the project folder:
- Run command “explorer .”, this command will open up project folder in explorer window.
- Now open your project in VSC by running command:
code .
Note: You need to run the command when you are inside the angular project you just created.
So far, we only have pure Angular application without implementing anything related to @angular/elements yet.
First, let’s see that everything works properly.
- Run the command “ng build”, to build the project and distribution files.
dist folder:
- Now run the command “npm strart” witch runs “ng serve”.
Time to convert project to Angular-Cli Elements.
- Its very simple to implement @angular/elements, you simpli just say:
ng add @angular/elements
- One more change to do:
Find tsconfig.json file located in your project folder and change compiler option > from target: “es5” To target:”es2015". This is for targeting all new browsers.
- Next: We need to delete the default generated app component files:
NOTE: Remember not to delete the app.module.ts file.
- Add a new component name: helloSpfxWebPart
ng generate component helloSpfxWebPartThis command will create a new component:
- Now we have to do some changes in ouer app.module.ts file, we need to add code for register it as a custom element.
Note: Remember to delete all the refrences for component we just deleted app.component
As you can see, we added our component to the entryComponents array and then use createCustomElement function to create the element out of it. You’ll also note that we did not include the bootstrap array within our NgModule configuration.
Once we have the custom element, we add it to the custom elements registry by using the define method. We can then include the app on the page and instantiate the element by adding this to the DOM:
<app-hello-spfx-web-part></app-hello-spfx-web-part>And we need to put this line inside the main index.html file located under SPFXAngularElements/src:
NOTE: Remove the code related to component app.component.ts we deleted above “app-root” in body tag:
- Replace it with:
How to test Angular Component
Lets create a simple test to see that ouer component realy works and get rendered in a plain html. For this we need to use “lite-server”. Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found.
You can read more bout lite-server here.
npm install --save-dev lite-serverCreate a folder inside the root of your project and name it “plainHTML”, and create a file “index.html” inside the folder.
Paste the code below inside plainHTML/index.html file:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Custom Button Test Page</title><script src="bundle.js"></script></head><body><h1> SharePoint FrameWork - Lite Server TestPage </h1><app-hello-spfx-web-part displayText="First Value"></app-hello-spfx-web-part><script>var button = document.querySelector('app-hello-spfx-web-part');button.addEventListener('clicked', function (event) {alert(event.detail);});</script></body></html>
Then we need to create “bs-config.json” file in the root folder, witch contains the configuration for lite-server to run.
- Copy and paste the code below in “bs-config.json” file
{"port": 8000,"files": ["./src/**/*.{html,htm,css,js}"],"server": {"baseDir": "./plainHTML"}}
One more thing to do before we can start testing it, and that is to do some changes inside package.json file.
- Inside scripts section in package.json file, do these changes:
What we have done now is that we have added script command that will run script “plainHtml”: “lite server”.
npm run testHTMLNote: Remember to run command for bundeling the production file before running the test command above. So that we have bundle.js file witch containes all minified bundled code.
Run:
npm run bundleIf every thing is configured correctly as i explained then “lite-server” will render Angular Component as plain HTML:
This means that we are confident that our component will work properly in SharePoint Framework webpart!
SharePoint Framework
Now its time for creating SPFX web part witch will render our Angular Elements component we created above.
Create another folder, name it “SPFXAngularElementsWebPart” , and generate SPFX web part inside the folder by running the command, remember to “cd..” inside the folder before running the command.
yo @microsoft/sharepoint
This will create the SPFX project in the folder you just created.
And now open folder “spfx_angularelements” inside VSC
You will have both projects inside one folder “spfx_angularelements”, see picture above.
- Next: Navigate to the file in src folder in webpart project, and remove all code inside render() method.
- And then add this line inside render() method:
this.domElement.innerHTML = `<app-hello-spfx-web-part description="${ this.properties.description }"></app-hello-spfx-web-part>`;
IMPORTANT
- We have to reference the production bundle.js file, and we need to import it inside the webpart so that it can be rendered.
import './../../../../SPFXAngularElements/dist/SPFXAngularElements/bundle';Your webpart HelloSpfxWebPart.ts file should look like:
THATS IT…
Lets run the SharePoint Framework webpart and see if it works:
gulp buildgulp serve
Sharing is Caring :)
