NavigationMixin LWC that wrapped inside Aura not working

Question

I have a Visualforce page where clicking on a button triggers a popup of an LWC.

To achieve this, I encapsulated my LWC within an Aura component and invoked this Aura component within the JavaScript function tied to the "onClick" event.

Up to this point, everything is functioning perfectly.

However, I am currently attempting to incorporate a new feature.

After saving specific records to the Salesforce database, I intend to navigate to another VF page in order to continue the process for the client.

Regrettably, I am encountering an issue where nothing happens upon attempting this navigation.

There are no error messages or redirects occurring – the process simply remains stagnant.

If you could provide assistance in rectifying this matter, I would greatly appreciate it.

this is my JS on my LWC:

import {LightningElement, track,api} from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class manage extends NavigationMixin(LightningElement) {
async saveBtn(){
        this.loaded=true;
        await this.saveToDB(JSON.stringify(ListOfRecordsToSave)); // this funcition does save and return a success.
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: '/apex/myVfPage'
            }
        });
    }
}

the saveBtn is onclick method in my html.

I also tried:

 this[NavigationMixin.GenerateUrl]({
            type: 'standard__webPage',
            attributes: {
                url: '/apex/myVfPage'
            }
        }).then(generatedUrl => {
            console.log("generatedUrl",generatedUrl);
            window.open(generatedUrl,'_blank');
        });

and :

 this[NavigationMixin.Navigate]({
        type: 'standard__webPage',
        attributes: {
            url: '/apex/myVfPage?id=' + this.recordId
        }
    }).then(generatedUrl => {
        window.open(generatedUrl);
    });

and also tried to add some to the implelemnt in my aura component - I thought maybe it related.

<aura:component description="descr" implements="flexipage:availableForAllPageTypes,force:hasRecordId,lightning:isUrlAddressable, force:appHostable">
    <c:manage recordId="{!v.recordId}"  />
</aura:component>

What am I missing here?

Many thanks.

Answer 1

When you add an Aura or LWC to a VF page, it uses lightning out to achieve this.

See Use Lightning Components in Visualforce Pages

Lightning Components for Visualforce is based on Lightning Out

As per the docs, navigation isn't supported in lightning out.

The lightning/navigation service is supported only in Lightning Experience, Experience Builder sites, and the Salesforce mobile app. It isn’t supported in other containers, such as Lightning Components for Visualforce, or Lightning Out. This is true even if you access these containers inside Lightning Experience or the Salesforce mobile app.

Given it's just a VF page you're trying to navigate to and you're in the classic UI, why not just call window.open without generating the URL via the NavigationMixin.

e.g.

window.open(`/apex/myVfPage?id=${this.recordId}`);