How to show checkout price summary in shipping step Magento 2?

Below step need to follow:

Step 1: create require config js files under the

Vendor/ModuleName/view/frontend/requirejs-config.js

var config = { config: { mixins: { 'Magento_Checkout/js/view/summary/abstract-total': { 'Vendor_Modulename/js/view/summary/abstract-total-mixin': true }, 'Magento_Checkout/js/view/summary/shipping': { 'Vendor_Modulename/js/view/summary/shipping-mixin': true }, } }}; 

Step 2: Create an abstract total js for showing order summary in step 1 as below

Vendor/ModuleName/view/frontend/web/js/view/summary/abstract-total-mixin

define( [ 'Magento_Checkout/js/model/step-navigator', 'Magento_Checkout/js/model/quote', 'Magento_Checkout/js/model/cart/totals-processor/default' ], function (stepNavigator, quote, totalsDefaultProvider) { "use strict"; var estimateTotalsShipping = function () { totalsDefaultProvider.estimateTotals(quote.shippingAddress()); }; // this should be added to get correct totals quote.shippingMethod.subscribe(estimateTotalsShipping); return function (abstractTotal) { return abstractTotal.extend({ isFullMode: function() { if (!this.getTotals() || stepNavigator.getActiveItemIndex() === 1) { return false; } return true; //add this line to display forcefully summary in shipping step. } }); } }); 

Step 3: Create a file for showing shipping method in order summary total.

Vendor/ModuleName/view/frontend/web/js/view/summary/shipping-mixin

define([ 'jquery', 'Magento_Checkout/js/view/summary/abstract-total', 'Magento_Checkout/js/model/quote' ], function ($, Component, quote) { 'use strict'; return function (shipping) { return shipping.extend({ getValue: function () { var price; if (!this.isCalculated()) { return this.notCalculatedMessage; } //var price = this.totals().shipping_amount; //comment this line var shippingMethod = quote.shippingMethod(); //add these both line var price = shippingMethod.amount; // update data on change of the shipping method return this.getFormattedPrice(price); } }); }});