Angular context not matching

Question

My Angular server is not responding to http://localhost:8449/spreadsheet-upload, I have a base href='/spreadsheet-upload" and routes that begin with that. I would like to begin all references to my server with hostname:port/spreadsheet-upload. I had this in my index.html:

<!doctype html>
<html lang="en" style="height: 100%;">

<head>
  <base href="/spreadsheet-upload">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Costing Uploads</title>
  <link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-flash-1.5.1/b-html5-1.5.1/sc-1.4.4/sl-1.2.5/datatables.min.css" />
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
</head>

<body class="ds-has-sticky-footer">
  <app-root></app-root>
  <footer class="ds-sticky-footer ds-grid ds-bg-neutral-warm-2 ds-z-low ds-affix-bottom ds-text-neutral-warm-8"
    style="width: 100%; height: 50px;">
    <div class="ds-row">
      <div class="ds-offset-xs-1 ds-col-xs-10">
      </div>
    </div>
  </footer>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script type="text/javascript"
    src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-flash-1.5.1/b-html5-1.5.1/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
</body>

</html>

My app-routing.module.ts file is now:

const appRoutes: Routes = [
  {
    path: '', component: SpreadsheetComponent,
    children: [
      { path: 'spreadsheet-upload/', component: SpreadsheetComponent }
    ]
  },
  {
    path: 'about/', component: AboutComponent, children: [
      { path: 'spreadsheet-upload/about/', component: AboutComponent }
    ]
  },
  {
    path: 'error/auth', component: ErrorComponent, data: { forbidden: true }, children: [
      { path: 'spreadsheet-upload/error/auth', component: ErrorComponent }
    ]
  },
  {
    path: 'error/badgateway', component: ErrorComponent, data: { badgatesssway: true }, children: [
      { path: 'spreadsheet-upload/error/badgateway', component: ErrorComponent }
    ]
  }
];

I tried adding the child paths to get it to start with that context, but it still does not. My console error message is:

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'spreadsheet-upload'
Error: Cannot match any routes. URL Segment: 'spreadsheet-upload'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1385)
    at CatchSubscriber.selector (router.js:1365)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:100)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:106)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:106)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:106)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:108)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Separately, is there a way to pay someone a token of appreciation in say bitcoin for helpful answers?

$>ng -version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.2.3
Node: 12.13.0
OS: linux x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.8.3
@angular-devkit/core         0.8.3
@angular-devkit/schematics   0.8.3
@schematics/angular          0.8.3
@schematics/update           0.8.3
rxjs                         6.2.2
typescript                   2.9.2

You might also want to use `routerLink` instead of `href`. `href` reloads your page (and loses your state), while `routerLink` doesn't. [More detail here](https://stackoverflow.com/questions/58081360/anchor-href-vs-angular-routerlink) — Ruben Szekér, Feb 20 '21 at 07:32
@RubenSzekér Thank you will read your link in more depth. However, most of the details suggested the attribute applied to an anchor element and not the base element — Woodsman, Feb 20 '21 at 18:34

score 1 · Answer 1 · answered Feb 20 '21 at 07:25

You should be define "spreadsheet-upload" route first. After that, you set up the initial relative URL ('') redirect to "spreadsheet-upload".

const routes: Routes = [
  {
    path: "spreadsheet-upload",
    component: SpreadsheetComponent
  },
  {
    path: "about/",
    component: AboutComponent
  },
  {
    path: "",
    redirectTo: "/spreadsheet-upload",
    pathMatch: "full"
  }
];

Angular context not matching

1 Answers1