title: How to navigate to home page change screen size in Angular 4?
body: <p>I'm building a website with angular 4 and asp.net.</p>
  
  <p>When you enter the website, you can see the home page fit to mobile size (which is what I want).</p>
  
  <p><a href="https://i.stack.imgur.com/5MTuzm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5MTuzm.jpg" alt="home page"></a></p>
  
  <p>then when I navigate to the orders page, it looks like this:  </p>
  
  <p><a href="https://i.stack.imgur.com/iSjTQm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iSjTQm.jpg" alt="orders page"></a></p>
  
  <p>orders page  </p>
  
  <p><a href="https://i.stack.imgur.com/uquSsm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uquSsm.jpg" alt="menu: select orders page"></a></p>
  
  <p>but when I navigate back to the home page again from the orders page, it changes the screen and does not fit to mobile at all.  </p>
  
  <p><a href="https://i.stack.imgur.com/thIaEm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/thIaEm.jpg" alt="menu: select home page"></a></p>
  
  <p><a href="https://i.stack.imgur.com/54TuNm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/54TuNm.jpg" alt="home page doesn&#39;t fit to mobile screen any more"></a></p>
  
  <p><strong>Code:</strong></p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;app-nav_mobile&gt;&lt;/app-nav_mobile&gt;
  &lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-navbar&gt;&lt;/app-navbar&gt;
  &lt;router-outlet&gt; &lt;/router-outlet&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>nav_mobile.component.html</p>
  
  <pre><code>    &lt;div id="preloader" class="signature-dierk"&gt;
      &lt;div id="status"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- end : preloader --&gt;
  &lt;!-- mobile only navigation : starts --&gt;
  &lt;nav class="mobile-nav signature-dierk"&gt;
      &lt;ul class="slimmenu"&gt;
          &lt;li&gt;&lt;a [routerLink]="['/home']"&gt;Home page&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a [routerLink]="['/order']"&gt;orders&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="checkout.html"&gt;checout &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="products.html"&gt;producst&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="gallery.html"&gt;gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;about&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;!-- mobile only navigation : ends --&gt;
  </code></pre>
  
  <p>home.component.html</p>
  
  <pre><code>&lt;section class="mastwrap signature-dierk"&gt;
  &lt;div class="inner-wrap"&gt;
  
      &lt;section class="intro07 signature-dierk"&gt;
  
          &lt;div id="rev_slider_3_1_wrapper" class="rev_slider_wrapper fullscreen-container"&gt;
              &lt;!-- START REVOLUTION SLIDER 4.6.5 fullscreen mode --&gt;
              &lt;div id="rev_slider_3_1" class="rev_slider fullscreenbanner"&gt;
                  &lt;ul&gt;
                      &lt;!-- SLIDE  --&gt;
                      &lt;li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off"&gt;
                          &lt;!-- MAIN IMAGE --&gt;
                          &lt;img data-no-retina alt="" title="" src="/dist/assets/images/bg1.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"&gt;
                          &lt;!-- LAYERS --&gt;
                          &lt;!-- LAYER NR. 1 --&gt;
                          &lt;div class="tp-caption featured-caption-one font3bold black lft ltb tp-resizeme"
                               data-x="center" data-hoffset="0"
                               data-y="center" data-voffset="0"
                               data-speed="600"
                               data-start="600"
                               data-easing="easeInOutQuad"
                               data-splitin="none"
                               data-splitout="none"
                               data-elementdelay="0.1"
                               data-endelementdelay="0.1"
                               data-endspeed="800"
                               data-endeasing="easeInOutQuad"&gt;
                              &lt;span class="font3bold black"&gt;logo &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;!-- SLIDE  --&gt;
                      &lt;li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off"&gt;
                          &lt;!-- MAIN IMAGE --&gt;
                          &lt;img data-no-retina alt="" title="" src="/dist/assets/images/bg2.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"&gt;
                          &lt;!-- LAYERS --&gt;
                          &lt;!-- LAYER NR. 1 --&gt;
                          &lt;div class="tp-caption featured-caption-two font3light white lft ltb tp-resizeme"
                               data-x="center" data-hoffset="0"
                               data-y="center" data-voffset="0"
                               data-speed="600"
                               data-start="600"
                               data-easing="easeInOutQuad"
                               data-splitin="none"
                               data-splitout="none"
                               data-elementdelay="0.1"
                               data-endelementdelay="0.1"
                               data-endspeed="800"
                               data-endeasing="easeInOutQuad"&gt;
                              &lt;span class="font3light color-bg white"&gt;לחץ להזמנת תור&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;!-- SLIDE  --&gt;
                      &lt;li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off"&gt;
                          &lt;!-- MAIN IMAGE --&gt;
                          &lt;img data-no-retina alt="" title="" src="/dist/assets/images/bg3.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"&gt;
                          &lt;!-- LAYERS --&gt;
                          &lt;!-- LAYER NR. 1 --&gt;
                          &lt;div class="tp-caption featured-caption-three font3bold white lft ltb tp-resizeme text-center"
                               data-x="center" data-hoffset="0"
                               data-y="center" data-voffset="0"
                               data-speed="600"
                               data-start="600"
                               data-easing="easeInOutQuad"
                               data-splitin="none"
                               data-splitout="none"
                               data-elementdelay="0.1"
                               data-endelementdelay="0.1"
                               data-endspeed="800"
                               data-endeasing="easeInOutQuad"&gt;
                              הודעות ועדכונים&lt;span class="font3 color"&gt;המספרה סגורה בראשון הקרוב&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  &lt;/div&gt;
  &lt;!-- end : inner-wrap --&gt;
  &lt;!--footer--&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Part of my router module:</p>
  
  <pre><code>  RouterModule.forRoot([
          { path: '', redirectTo: 'home', pathMatch: 'full' },
          { path: 'home', component: HomeComponent },
          { path: 'order', component: OrderComponent },
          { path: '**', redirectTo: 'home' }
      ])
  </code></pre>
  
  <p>slider call in _layour.cshtml</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;@ViewData["Title"] - Baber_App&lt;/title&gt;
      &lt;base href="~/" /&gt;
      &lt;link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" /&gt;
  
      &lt;!-- design css files - start --&gt;
      &lt;link href="~/dist/assets/stylesheets/animatedheaders.css" rel="stylesheet" /&gt;
  
      &lt;!-- Favicon
      –––––––––––––––––––––––––––––––––––––––––––––––––– --&gt;
      &lt;link rel="icon" type="image/png" href="~/dist/assets/images/favicon.png"/&gt;
  
  
      &lt;!-- FONT
      –––––––––––––––––––––––––––––––––––––––––––––––––– --&gt;
      &lt;link href='//fonts.googleapis.com/css?family=Raleway:400,300,600%7CMontserrat:400,700%7COpen+Sans:400,300,700,800' rel='stylesheet' type='text/css'&gt;
  
      &lt;!-- ICON FONTS
      –––––––––––––––––––––––––––––––––––––––––––––––––– --&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/ionicons.min.css"&gt;        
      &lt;link rel="stylesheet" href="~/dist/assets/fonts/fonts.css"&gt;
  
      &lt;!-- CSS
      –––––––––––––––––––––––––––––––––––––––––––––––––– --&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/isotope.css"&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/venobox.css"&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/sinister.css"&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/animatedheaders.css"&gt;
      &lt;!-- SLIDER REVOLUTION 4.x CSS SETTINGS --&gt;
      &lt;link rel="stylesheet" type="text/css" href="~/dist/assets/rs-plugin/css/settings.css" media="screen" /&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/featured.css"&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/slimmenu.css"&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/main.css"&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/main-bg.css"&gt;
      &lt;link rel="stylesheet" href="~/dist/assets/stylesheets/main-responsive.css"&gt;
  
  
  
  
  
  
  
      &lt;!-- design css files - end --&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
      @RenderBody()
  
      @RenderSection("scripts", required: false)
  
      &lt;script src="~/dist/assets/javascripts/libs/common.js"&gt;&lt;/script&gt;
      &lt;script src="~/dist/assets/javascripts/libs/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/dist/assets/javascripts/libs/animatedheaders.js"&gt;&lt;/script&gt;
      &lt;script src="~/dist/assets/javascripts/custom/main.js"&gt;&lt;/script&gt;
      &lt;!-- SLIDER REVOLUTION 4.x SCRIPTS  --&gt;
      &lt;script type="text/javascript" src="~/dist/assets/rs-plugin/js/jquery.themepunch.tools.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/dist/assets/rs-plugin/js/jquery.themepunch.revolution.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
  
           /******************************************
             - PREPARE PLACEHOLDER FOR SLIDER  -
           ******************************************/
  
  
           jQuery(document).ready(function () {
               jQuery('#rev_slider_3_1').show().revolution(
                   {
                       dottedOverlay: "none",
                       delay: 9000,
                       startwidth: 1200,
                       startheight: 500,
                       hideThumbs: 0,
  
                       thumbWidth: 100,
                       thumbHeight: 50,
                       thumbAmount: 3,
  
  
                       simplifyAll: "off",
  
                       navigationType: "bullet",
                       navigationArrows: "none",
                       navigationStyle: "round",
  
                       touchenabled: "on",
                       onHoverStop: "on",
                       nextSlideOnWindowFocus: "off",
  
                       swipe_threshold: 75,
                       swipe_min_touches: 1,
                       drag_block_vertical: false,
  
  
  
                       keyboardNavigation: "off",
  
                       navigationHAlign: "right",
                       navigationVAlign: "center",
                       navigationHOffset: 20,
                       navigationVOffset: 0,
  
                       soloArrowLeftHalign: "left",
                       soloArrowLeftValign: "center",
                       soloArrowLeftHOffset: 20,
                       soloArrowLeftVOffset: 0,
  
                       soloArrowRightHalign: "right",
                       soloArrowRightValign: "center",
                       soloArrowRightHOffset: 20,
                       soloArrowRightVOffset: 0,
  
                       shadow: 0,
                       fullWidth: "off",
                       fullScreen: "on",
  
                       spinner: "spinner0",
  
                       stopLoop: "off",
                       stopAfterLoops: -1,
                       stopAtSlide: -1,
  
                       shuffle: "off",
  
  
                       forceFullWidth: "off",
                       fullScreenAlignForce: "off",
                       minFullScreenHeight: "",
                       hideTimerBar: "on",
                       hideThumbsOnMobile: "off",
                       hideNavDelayOnMobile: 1500,
                       hideBulletsOnMobile: "off",
                       hideArrowsOnMobile: "off",
                       hideThumbsUnderResolution: 0,
  
                       fullScreenOffsetContainer: "#pseudo-header",
                       fullScreenOffset: "",
                       hideSliderAtLimit: 0,
                       hideCaptionAtLimit: 0,
                       hideAllCaptionAtLilmit: 0,
                       startWithSlide: 0
                   });
           }); //ready
  
      &lt;/script&gt;          
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>