0

I've been struggling with this issue for the past day and a half and still have made no progress. Currently, I am attempting to load my angular app and have it default to a particular page when the application is bootstrapped. Unfortunately, it redirects to a different route.

I'm trying to go to: https://clwd0002278/ControlTower/NICK/UI/#/

When I initially load, though, it goes to https://clwd0002278/ControlTower/NICK/UI/#/ControlTower/NICK/UI/, which results in the 404 page being hit.

I'll also try to go to https://clwd0002278/ControlTower/NICK/UI/ with the same result as above.

Here's the code so someone can try to make sense of this:

const routes: Routes = [
    {path: '', redirectTo: 'patients', pathMatch: 'full'},
    {path: 'dashboard', component: DashboardComponent},
    {path: 'notifications', component: NotificationsComponent},
    {path: 'patients', component: PatientListComponent},
    {path: '404', component: NotFoundComponent},
    {path: '**', component: NotFoundComponent},
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {useHash: true})
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

Here's the base-href on the html page: 

<base href="#">

I have tried changing base-href and deploy-url in the build script, as well as omitting them entirely. I'm just not sure what I'm missing at this point.

Any help would be appreciated, and just ask if you need more information.

Edit:

The application exists at https://clwd0002278/ControlTower/NICK/UI/ and NOT at https://clwd0002278/.

Nick
  • 135
  • 2
  • 10
  • Everything after the # is never sent to the server... so the mentioned links all go to the same page – patrick Mar 07 '18 at 18:16
  • @patrick I know. But I'm expecting that when I load `https://clwd0002278/ControlTower/NICK/UI/` or `https://clwd0002278/ControlTower/NICK/UI/#/` it will bootstrap the app at that location instead of trying to do `https://clwd0002278/ControlTower/NICK/UI/#/ControlTower/NICK/UI/` – Nick Mar 07 '18 at 18:18
  • That sounds like a server config problem, not a programming problem. You might want to move this question to the appropriate part of stackoverflow (server fault) – patrick Mar 07 '18 at 18:22
  • There isn't a server that's serving this up. It's literally just the compiled files sitting in a directory and then I navigate to that directory in a browser to load it and this is how it loads. – Nick Mar 07 '18 at 18:23

3 Answers3

0

Add

<head>
  <base href="/ControlTower/NICK/UI">
  ...
</head>

to your index.html

or provide int in AppModule like

import { APP_BASE_HREF } from '@angular/common';
...

providers: [{APP_BASE_HREF, useValue: '/ControlTower/NICK/UI'}]

See also

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • If I try it as `/ControlTower/NICK/UI` in the base-href, it gives me this error for all files: `Loading failed for the – Nick Mar 07 '18 at 18:41
  • If `` causes conflicts with other HTML stuff, then use `APP_BASE_HREF`, that only affects the Angular router. – Günter Zöchbauer Mar 07 '18 at 18:43
  • I added it with base-href set to '#' and just adding in the provider, but it came back as this: `https://clwd0002278/ControlTower/NICK/UI/#/ControlTower/NICK/UI/ControlTower/NICK/UI/` – Nick Mar 07 '18 at 18:49
  • Why "with base-href set to '#'"? – Günter Zöchbauer Mar 07 '18 at 18:50
  • 1
    Sorry, I missed that you are using `useHash: true`. In this case you shouldn't need a base-href. – Günter Zöchbauer Mar 07 '18 at 18:52
  • If I set base-href to '/' else, I get this result: `http://localhost:4200/#/ControlTower/NICK/UI/patients`, which surprisingly is loading patients as the default like it's supposed to, but then the hash mark is in the incorrect location, although, I'm not certain if that's a bad thing yet... – Nick Mar 07 '18 at 18:54
  • You might need https://stackoverflow.com/questions/40397273/angular2-app-base-href-with-hashlocationstrategy – Günter Zöchbauer Mar 07 '18 at 18:55
  • I did try using the provider, and am still testing it. – Nick Mar 07 '18 at 18:55
  • Unfortunately, that stackoverflow didn't solve the issue. When I tried it, I kept getting `this._platformLocation is undefined`. I also tried what you had suggested and it just kept making the second half longer and longer. – Nick Mar 07 '18 at 19:13
0

Always your default route must be at the before the path "**".

 {path: '404', component: NotFoundComponent},
{path: '', redirectTo: 'patients', pathMatch: 'full'},
  {path: '**', component: NotFoundComponent},

Refer https://angular.io/guide/router

Darsan S Kumar
  • 281
  • 3
  • 6
  • I'm sure that's not true. What part in the linked document says that? – Günter Zöchbauer Mar 07 '18 at 18:27
  • Maybe not but in my case i gave the default just before the wildcare route. Also check if redirectTo:’/patients’ works .... also pathMatch:’full’ – Darsan S Kumar Mar 07 '18 at 18:32
  • It did not work for me. Having the base-ref set to '/' without any additional configuration means that it cannot find where the files are located (in directory ControlTower/NICK/UI). I also already have {path: ''} before everything else, including {path: '**'}. If I keep and no other build configurations, I can go to `https://clwd0002278/ControlTower/NICK/UI/#/` and it'll take me to /patients. BUT, if I go to that link from a new browser window, it'll immediately bootstrap and take me to `https://clwd0002278/ControlTower/NICK/UI/#/ControlTower/NICK/UI/` – Nick Mar 07 '18 at 18:34
  • @GünterZöchbauer **"The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first."** Check the **Configuration** section in this link https://angular.io/guide/router – Darsan S Kumar Mar 08 '18 at 04:07
  • @Darsandsk22 I didn't say anything else because that's the case, but the change you suggest, doesn't make a difference. It would make a difference without `pathMatch: 'full'` – Günter Zöchbauer Mar 08 '18 at 04:12
0

So, it turns out that there was some code from ngrx that was pulled in from our base project package that kept throwing the location.pathname onto the end of the url for the angular/ngrx routing packages. I'm so frustrated and yet so relieved to have finally resolved this issue.

I commented out the reducers and initial state related to this to solve my issue. So, be careful of how ngrx interacts with your url!

Nick
  • 135
  • 2
  • 10