Written by

Jayakumar Balasubramaniam

Share

  

Category

see all categories

How to bundle Angular 4 html template files in SPFx?

SharePoint Framework uses gulp as the build process runner. SPFx enables us to integrate our custom gulp tasks to SPFx build pipeline. That’s the key for us to bundle the angular template files.

Normally gulp tasks are defined in gulpfile.js file. To see the available tasks in your SPFx project use the command

gulp --tasks

The custom tasks to be added in SPFx build pipeline should be defined before initializing the global gulp instance “build.initialize(gulp)”.

The custom tasks that can be run out of the SPFx build pipeline can be added any where and you can run it independently like running other gulp tasks (Ex; gulp {CustomTaskName})

Let’s jump into the core part of this blog to bundle angular template files, normally in angular we will give the template url’s in the component like below,

code.png

SPFx doesn’t recognize the base url of this template file (“app.component.html”) while executing your app and we will receive file not found error.

We have to add custom gulp task to build our component files by replacing the template url into an inline template at the time of execution to do so please add the below gulp task in your gulpfile.js file

Custom gulp task.png

Now we have added the subtask tsInlines in SPFx build pipeline, the executing order of this subtask matters we have to register this subtask after the SPFx typescript tasks are completed by using below code.

SPFx Typrescript.png

This will make sure that we don’t break any SPFx typescript tasks and we just replace the template url’s as inline template files.

The result of the above subtask will be,

Subtask.png

If you notice the destination of this subtask is pointing to lib folder from where SPFx refers the files while serving/bundling your typescript code.

Please refer the SPFx official documentation to learn more about integrating gulp tasks in SPFx build pipeline.

Jayakumar Balasubramaniam

Written by Jayakumar Balasubramaniam

When deliverables are under the gun, Jayakumar doesn't mind burning the candle at both ends to get the job done. He takes ownership of his tasks, delivers on time and inspires the rest of the team. He loves doing what he does and no wonder he volunteers to code on his laptop even on weekends. He is a Microsoft Certified Professional (MCP) and also actively contributes writing Technical articles to our blog.