Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

March 31, 2017

“Angular Routing” Problem Solver

This blog post supports the sample code for the “Angular Routing” course on Pluralsight, identifying common issues along with their solutions.

The content of this post is based on Angular version >= 2.x unless explicitly stated otherwise.

The sample code can be found here: https://github.com/DeborahK/Angular-Routing. The folders in this repo include:

  • APM–Start: The starter files. Use this as a starting point to code along with the course. Updated to Angular v4.
  • APM–Final: The completed files. This code matches with the demos presented in the course. Updated to Angular v4.

Please post to the Discussion tab for the course if you experience an issue not found in this post. Thanks!

18 Comments

  1.   shakeel — March 8, 2017 @ 12:43 pm    Reply

    i have strange issue so for app start initially bootstrap working but bootstrap color not applying on classes and buttons…
    i have no idea what to do..
    Thanx

  2.   Bala — March 21, 2017 @ 12:19 am    Reply

    I get into a strange issue while learning routing from Angular 2 getting started course..

    EXCEPTION: Error in ./AppComponent class AppComponent – inline template:6:24 caused by: Failed to execute ‘setAttribute’ on ‘Element’: ‘]’ is not a valid attribute name.
    ErrorHandler.handleError @ node_modules/@angular/core/bundles/core.umd.js:3462

    Can you please help me to solve this issue?

  3.   Chinar — March 24, 2017 @ 12:56 pm    Reply

    Hello,

    I’m currently attending the Pluralsight course “Angular 2: Getting Started”, and just completed Services and DI module. I coded everything exactly like it was shown in the slides, yet Im getting an error: No provider for ProductService. I double checked that everything is in place, and that there are no spell mistakes or anything. When I add providers to the product-list.component.ts template, it works. So, basically the provider is not getting injected from app.component. Any ideas what I’m missing here?

    Thank you. Love the course very much. Would definitely recommend it to my friends. Your help would be very much appreciated.

    Chinar

  4.   ALI — April 12, 2017 @ 12:10 pm    Reply

    Hi,

    I hope this new course will be as brilliant a your others.

    A.

    •   deborahk — April 13, 2017 @ 8:36 am    Reply

      🙂

  5.   Vikram — April 13, 2017 @ 5:47 am    Reply

    This course was an absolute work of art. The concepts of routing were explained beautifully which made the overall daunting task of learning really easy.
    I have learned Angular through various f your courses and this one didn’t disappoint either.

    Excellent learning and brilliant coaching. Have recommended it to all my tech friends and my team members.

    •   deborahk — April 13, 2017 @ 8:37 am    Reply

      Thank you so much for the kind words about the course. I truly appreciate them!

  6.   nagenda — April 30, 2017 @ 2:17 pm    Reply

    Hi,

    After successful login, browser redirects to product list page. Now when I reload the product list page or opening the products list page in a new tab, page again redirects to login page.
    I haven’t changed your code. Please help me in solving this issue.

    Thanks,
    Nagenda

    •   deborahk — May 8, 2017 @ 1:57 pm    Reply

      Yes, that is how it works. I think I discuss this in the course: “From this point onward it is going to be more of a challenge to try out anything in our application. Every time the browser reloads, it will require that we log in.” Check out the module called “Route Guards” in the clip titled “Sharing Data with a Guard” at time code: 4:15.

      For a faster reply, please post to the Discussion tab for the course: https://app.pluralsight.com/library/courses/angular-routing/discussion I receive an email notification when people post to the discussion tab and can therefore be much quicker in responding.

  7.   Jahiron Rodriguez — May 2, 2017 @ 2:06 pm    Reply

    Hello,

    I finished Child Routes module and have an issue. ProductEditInfoComponent and ProductEditTagComponent bind the product object as expected. But when a product is edited don’t retain the value (obvious without refresh or save). The product edited isn’t recieved by the ProductEditComponent, so the product can’t be saved.

    •   deborahk — May 8, 2017 @ 1:59 pm    Reply

      The code as of the end of each module is provided in the Exercise Files tab for the course. You can download that and compare your code against mine to see if there is a syntax or typographical error somewhere in the file.

      For a faster reply, please post to the Discussion tab for the course: https://app.pluralsight.com/library/courses/angular-routing/discussion I receive an email notification when people post to the discussion tab and can therefore be much quicker in responding.

  8.   Naveen — May 5, 2017 @ 9:13 am    Reply

    Iam using angular2 routing.My problem is my server orignal url is http://www.example.com/offers/vehicle.aspx , i used hash routin and i expected url like http://www.example.com/offers/vechicle.aspx/#vehicle but output is http://www.example.com/offers/#vehicle.I dont want to change my original url, i want angular rout should append to it.

  9.   Frederick Morrison — May 7, 2017 @ 2:37 pm    Reply

    Do you have any suggestions on how to track down the following error, which points to line that contains nothing more than a novalidate?

    ERROR in ng:///C:/projects/APM-routed/src/app/products/product-edit.component.html (3,32): Supplied parameters do not match any signature of call target. The html is very simple (only the first few lines are listed):

    {{pageTitle}}

    The error is displayed when I do the following as part of Module 7 (Child Routes) of your course:

    ng build –verbose –progress –vendor-chunk –extract-css –prod

    If I remove the –prod switch, it builds (and runs) just fine, so I suspect that a production build is spotting something that the development build does not, but the exact nature of the problem escapes me.

    •   deborahk — May 8, 2017 @ 2:05 pm    Reply

      My course was finished before the Angular CLI was released, so it was not tested with the Angular CLI and its production build process.

      Try changing this: [disabled]=”!isValid()” to this: [disabled]=”!isValid(null)”

      It’s just a guess (since my code is not set up for the Angular CLI and I therefore cannot use ngBuild). But it sounds like it could be the issue. Let me know if that works. If not, I’ll look into it further.

      For a faster reply, please post to the Discussion tab for the course: https://app.pluralsight.com/library/courses/angular-routing/discussion I receive an email notification when people post to the discussion tab and can therefore be much quicker in responding.

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2018 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs