[SalesForce] Invalid page in communities

FYI, We tried to navigate to VF page from lightning component in community using navigateToURL. Logged in user as System Administrator.
But navigation failed and showing "Invalid page" error.

Here we enabled the below things : Available for Lightning Experience,
Lightning Communities, and the mobile app Enabled Visualforce Page
Access

Here's my code. Any advice/suggestions will be greatly appreciated.

NavigateToVfPage.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >

    <lightning:button variant="brand" label="Navigate VF" onclick="{! c.navigateVF }" />
</aura:component>

NavigateToVfPageController.js

({
    navigateVF : function(cmp, event, helper) {
        $A.get("e.force:navigateToURL").setParams({ 
            "url": "/apex/NavigateUI" 
        }).fire();
    }
})

NaviagteUI.VF

<apex:page >
    <button type="button" onclick="navigateBack()">
        navigate back
    </button>
    <script type="text/javascript">
    function navigateBack() {
        console.log("navigate to previous");
    }

    </script>
</apex:page>

Best Answer

I tried opening a visualforce page from my lightning component and it works for me.Why don't you first try opening a visuaforce page in your community through your browser url to know it has required permission to be accessed in community.You can do it using following:

instanceurlofCommunity/namespace[if any]/apex/visualforce page.

Try removing '/s' if you are not able to open the visualforce page above

this is the url which I get when I try to open the visualforce page in my community from lightning component:

instanceurlofCommunity/s/sfdcpage/%2Fapex%2FMap

I used the following and it works fine:

 navigateToVf : function(component, event, helper) {
        $A.get("e.force:navigateToURL").setParams({ 
            "url": "/apex/Map" 
        }).fire();
    }