App bridge error - LT.TitleBar.create is not a function

Highlighted
Shopify Partner
12 0 3

Hello,

 

I've managed to load my application (Angular 8, typescript - using .net core spa services) inside of Shopify Admin.

Works great.  But then I started to use AppBridge. 

First I neglected to pass in the API key etc.  but fixed that. 

Then I started to get the following error when setting breadcrumb or as below an even simpler version of setting title.

 

ERROR TypeError: LT.TitleBar.create is not a function

My code:

 

... component.... 

constructor(private router: Router, public appService: ShopifyOAuthAppService) {
}

ngOnInit() {

console.log("Breadcrumb OnInit");

if (this.appService.app === undefined) {
console.log("Breadcrumb init");
this.appService.appInit();
}

console.log("NG INIT - Update breadcrumbs");
this.updateBreadcrumbs();

}



private updateBreadcrumbs() {

// Get service reference

console.log(this.appService.app);

if (this.appService.app !== undefined) {
let titleBarOptions = {
title: 'My page title',
};

let myTitleBar = TitleBar.create(this.appService.app, titleBarOptions);
// Update the title

myTitleBar.set({
title: 'My new title',
});
}
}

NgInit fires.

It creates the app object.

The app object is subsequently good i.e. not undefined.

It then fails at calling LT.Button 

 

I can see two possibilities 

A. There is something about the minification of Angular when interacting with 'shopify/app-bridge/actions'

B. I've done something so silly no other user has done before - because i can't find this error on the internet.

C. Something to do with not being on the same domain (which I think is unlikely for this error because it's more about the LT reference more than any other error).

 

Any ideas would be most welcome.

 

Thanks,

Dan.

 

 

 

 

 

 

0 Likes
Shopify Partner
12 0 3

After investigating, I must highlight that this issue seems to be related to Angular build optimizer.

 

angular.json:

"buildOptimizer": false // changed from true and relates to AOT - so disabling AOT may resolve this also.

I'm not sure whether this is something that is in the ball court of Shopify i.e. incorrect exports / not imports not adhered to best/modern practices or angular/modular javascript or whether it is something that the angular team should investigate.

 

If anyone can suggest a combination of angular (or other) package versions that would allow buildOptimizers to be enabled with AppBridge I would be most grateful. 

 

Thanks,

Dan.

 

 

 

0 Likes