Fixing Errors with SPFx Services in Application Customizer During Debugging

Before you deploy your application, you usually want to debug or test it. During development, you need to add

?loadSPFX=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js

to the URL to test your solution. If you're working on an Application Customizer and the Solution isn't installed yet, you need to add a bit more to the URL:

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"yourAppIDFrom_manifest.json":{"location":"ClientSideExtension.ApplicationCustomizer"}}

Note: You should replace yourAppIDFrom_manifest.json in the URL with your own ID.

This method usually works well. However, if you use a service class in your Extension (this.context.serviceScope.consume(...)) and begin debugging as mentioned, you will see an error message in the console.

Error: Failed to create application customizer 'ClientSideExtension.ApplicationCustomizer.YOUR_APP_ID'

and the information:

Extension failed to load for componentId "YOUR_APP_ID"

How to fix this error

My colleague asked me if I could help him with the error. We found out that the code was not loaded, not even the constructor. Initially, I suspected a problem with how the service was set up. However, even after making a new, empty service class, the error persisted. Then, I decided to add the app to the app catalog and install it. That solved the problem!

I'm not sure why this happens. It's different from web parts, where services work fine during debugging without needing to install anything.

PS: Once the Application Customizer is installed, you don't need the long URL query with the customActions parameter anymore. Otherwise, it will load twice. After installation, this is all you need:

?loadSPFX=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js

Happy Coding ;)