Angular 4 Routing works for me, but not my team

Question

The problem - the routing works just fine for me. When I go to localhost/filecabinet, is goes to my filecabinet component. As it should. However, I've checked my code into source control. My team gets the code and goes to the same path and it takes them to the dashboard component. As if it can't find the route?

So I'm really at a loss. It's as if I haven't checked a file into source control that they need maybe? I really don't know. Any thoughts? Wish I had more to go on, but I'm confused?

Here's my app.routing.ts file:

import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './Dashboard/dashboard.component';
import { FileCabinetComponent } from './File-Cabinet/file- 
cabinet.component';
import { FileUploadComponent } from './File-Cabinet/file-upload.component';

export const routing = RouterModule.forRoot([
{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'filecabinet', component: FileCabinetComponent },
{ path: 'filecabinet/add', component: FileUploadComponent },
{ path: 'filecabinet/edit/:id', component: FileUploadComponent },
{ path: '**', component: DashboardComponent },
]);
//], { enableTracing: true });

Check [this](https://stackoverflow.com/questions/38991541/nginx-and-angular-2?noredirect=1&lq=1) out. This might be your problem. — Vala Khosravi, Apr 10 '18 at 14:33
Would suggest your team to do do `npm install` and then `ng serve` again. — penleychan, Apr 10 '18 at 14:50
1. Are you directly entering the route path in the address path or doing some activity (say a button click) on the dashboard and the Angular takes you to the route path? 2. do you have a packacge-lock.json or npm-shrinkwrap.json in your root folder? — Saptarshi Basu, Apr 10 '18 at 15:22
Is your team using a different server than you? or it is the same server? do you have a packacge-lock.json or npm-shrinkwrap.json in your root folder? — Saptarshi Basu, Apr 10 '18 at 15:25
It seems your team's server is not configured to treat this particular url as an Angular route. So basically, you need to forward the Angular routes to index.html at the server level. For e.g. app.get('*', (req, res) => { res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req }); }); Here all routes (*) is treated as Angular route — Saptarshi Basu, Apr 10 '18 at 15:30
@SaptarshiBasu That sounds correct. How is that done in IIS? — Mark, Apr 10 '18 at 15:33
Don't know about IIS. Have done in Java and Node only. But the idea is to forward any request comes to that URL to index.html — Saptarshi Basu, Apr 10 '18 at 15:37

score 0 · Answer 1 · answered Apr 10 '18 at 14:25

0

Try changing { path: '', component: DashboardComponent } to { path: '', component: DashboardComponent, pathMatch: 'full' }

answered Apr 10 '18 at 14:25

J. Pinxten

307
3
7

this didn't help – Mark Apr 10 '18 at 15:19

score 0 · Accepted Answer · answered Apr 10 '18 at 19:48

0

It appears the problem is cause it's case-sensitive and I did not know that?

I use the path http://localhost:56110/filecabinet They used the path http://localhost:56110/FileCabinet

answered Apr 10 '18 at 19:48

Mark

2,543
6
33
44

In advice use "dash separating" instead of "camel case" see [this](https://ux.stackexchange.com/questions/41595/what-is-the-casing-convention-for-url-routes) – Vala Khosravi Apr 11 '18 at 05:48

Angular 4 Routing works for me, but not my team

2 Answers2