title: Allowing Angular 4 routes to pass special characters in URL
body: <h2>What i am trying to do</h2>
  
  <p>I am trying to create a route in my application where i want to allow the admin to type in the url as </p>
  
  <pre><code>http://localhost:4200/#/start/referral_code=jk
  </code></pre>
  
  <p>And then get the value for <code>referral_code</code> i.e <code>jk</code> inside the component.</p>
  
  <p>In my routes i have defined the route as </p>
  
  <pre><code>{ path: 'start/:referral_code', component: StartPageComponent },    
  </code></pre>
  
  <p>What i am trying to achieve is that when the admin enters the above provided <code>URL</code> then the value for the variable <code>referral_code</code> should be received inside the specified component <code>StartPageComponent</code>.
  I have added the following inside <code>ngOnInit()</code> as follows</p>
  
  <pre><code>this.activatedRoute.params.subscribe((params: any) =&gt; {
        if (params) {
          let refCode = params.referral_code;
          console.log(refCode);
        }
      });
  </code></pre>
  
  <h2>What Happens Actually</h2>
  
  <p>As soon as i type in the above <code>URL</code> the part after <code>=</code> is removed along with the <code>=</code> and the resulting url is changed to </p>
  
  <pre><code>http://localhost:4200/#/start/referral_code
  </code></pre>
  
  <p>and inside the component the <code>console.log(refCode);</code> displays the string <code>referral_code</code> rather than the value for the <code>referral_code</code> i.e <code>jk</code>.</p>
  
  <h2>Limitation</h2>
  
  <p>I cannot use <code>QueryParams</code> like <code>http://localhost:4200/#/start?referral_code=jk</code> neither I can change the url <code>http://localhost:4200/#/start/referral_code=jk</code></p>
  
  <p>I appreciate any help.</p>