“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 v7.
- APM–Final: The completed files. This code matches with the demos presented in the course. Updated to Angular v7.
npm install Issues
Problem: npm ERR! 404 Not Found: har-validator@5.1.2.
Solution: Delete the package-lock.json file and try ‘npm install’ again.
Please post to the Discussion tab for the course if you experience an issue not found in this post. Thanks!
shakeel — March 8, 2017 @ 12:43 pm
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
deborahk — March 27, 2017 @ 12:48 pm
You posted in comments for a course that is not yet published, so I don’t know what code you are referring to?
Did you mean to post in the “Angular 2: Getting Started” Problem Solver here: http://blogs.msmvps.com/deborahk/angular-2-getting-started-problem-solver/
Bala — March 21, 2017 @ 12:19 am
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?
deborahk — March 27, 2017 @ 12:50 pm
Where you able to resolve this issue? If not, please post to: https://github.com/DeborahK/Angular2-GettingStarted/issues
That makes it much easier to discuss your code and track any issues you may be having. Thanks!
Chinar — March 24, 2017 @ 12:56 pm
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
deborahk — March 27, 2017 @ 12:51 pm
Where you able to resolve this issue? If not, please post to: https://github.com/DeborahK/Angular2-GettingStarted/issues
That makes it much easier to discuss your code and track any issues you may be having. Thanks!
ALI — April 12, 2017 @ 12:10 pm
Hi,
I hope this new course will be as brilliant a your others.
A.
deborahk — April 13, 2017 @ 8:36 am
🙂
Vikram — April 13, 2017 @ 5:47 am
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
Thank you so much for the kind words about the course. I truly appreciate them!
nagenda — April 30, 2017 @ 2:17 pm
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
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.
Jahiron Rodriguez — May 2, 2017 @ 2:06 pm
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
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.
Naveen — May 5, 2017 @ 9:13 am
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.
deborahk — May 8, 2017 @ 2:29 pm
The route to your aspx page is *server-side* routing. Angular only manages *client-side* routing. See this link for more information: http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/
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.
Frederick Morrison — May 7, 2017 @ 2:37 pm
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
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.