Angular Error: Cannot match any routes. URL Segment: 'null'

Question

I've created a basic Angular page that takes an ID (a guid) from the URL and uses the ID to feed into an API call. I've done similar pages in the past that have worked with no issue. But for some reason this one doesn't seem to want to play ball when it comes to the You Tube video.

When I output the You Tube URL to the console it's displayed with no issue, however when I sanitise it and post the URL to the src property of the iframe embed it does not display. However (and this is where it gets weird) if I change the description from the API from {{session?.SessionDescription}} to {{session.SessionDescription}}, the video is displayed.

The description text loads no matter which of those I use. But if I don't include the question mark I get a console error that the description can't be loaded even though it's on the screen.

I just want both to load with no console errors if possible.

HTML:

<nav class="pure-drawer" data-position="left">
    <h1>What is 3D Printing?</h1>
    <p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>
</nav>   

<div class="pure-pusher-container">
    <div class="pure-pusher">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" [src]="vidUrl" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Typescript:

getCurrentSession(){
    this.sub = this.route.params.subscribe(params => {
      this.id = params['id']; 
      this._wmapi
      .getService("Session/" + this.id)
      .then((result) => {
        this.session = result;
        this.vidUrl = this.sanitizer.bypassSecurityTrustResourceUrl(result.SessionVideo);
        this.getSessionResources(this.id);
      })
      .catch(error => console.log(error));
    });
  }

Bünyamin Sarıgül Bünyamin Sarıgül · Accepted Answer · 2019-01-23T11:10:00

I guess that if you don't use question mark, it's stuck at

<p>{{session.SessionDescription}} {{session?.SessionGains}}</p>

Because the session is not defined at beginning, and it doesn't proceed to the iframe. When you got the session, it refresh the component and iframe gets a real resource url.

However, when you use question mark, it doesn't get error at this line:

<p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>

And it loads the iframe with undefined url since it is not defined yet (since you didn't get response from API yet). Then, somehow it fails to detect change and refresh iframe.

If my guess is correct, you may overcome this issue as:

<nav class="pure-drawer" data-position="left">
    <h1>What is 3D Printing?</h1>
    <p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>
</nav>   

<div class="pure-pusher-container">
    <div class="pure-pusher" *ngIf="vidUrl"> <!-- NGIF here or in iframe -->
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" [src]="vidUrl" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Please let me know if that works to update my answer. Good luck!

Angular Error: Cannot match any routes. URL Segment: 'null'

1 Answers