Angular CLI Deploy to Github Pages issue: ERROR Error: Uncaught (in promise): Error: Cannot match any routes

Question

I'm trying to deploy my Angular SPA app to github pages using this https://github.com/angular/angular-cli/wiki/stories-github-pages .

I run this command ng build --prod --output-path docs --base-href learningangular

learningangular is the name of my github repo.

Here are the routes

const appRoutes: Routes = [
  { path: "", redirectTo: "/abc", pathMatch: "full" },

  { path: "abc", component: OtherComponent },
  { path: "lazy", loadChildren: "./lazymodule/lazy.module#LazyModule" },

  {
    path: "example",
    loadChildren: "./ExampleModule/example.module#ExampleModule"
  },
  {
    path: "projects",
    component: ProjectsComponent,
    children: [
      {
        path: "",
        component: ErrorPage
      },
      {
        path: ":id",
        component: ProjectDetailsComponent
      }
    ]
  }
];

when I open github.io/learningangular, it re-routes to github.io/learningangular/learningangular/ and gives the error

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'learningangular'
Error: Cannot match any routes. URL Segment: 'learningangular'

what am I doing wrong?

I'm using

 "@angular/core": "^5.0.0",
 "@angular/cli": "1.5.0",
 "@angular/compiler-cli": "^5.0.0",

Yulia Čech · Accepted Answer · 2018-01-26 12:55:53Z

2

You are running the command ng build with the wrong parameter for --base-href. It needs a parameter of the following form https://YOUR_GITHUB_USERNAME.github.io/PROJECT_NAME/.

It seems that the github wiki information is not exact in this case.

answered Jan 26, 2018 at 12:55

Yulia Čech

1415 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alamgir Qazi Over a year ago

Hi, I did this and now it doesn't even load the app. I get errors Failed to load resource: the server responded with a status of 404 () my new html base site is <base href="https://alamgirqazi.github.io/learningangular">

Yulia Čech Over a year ago

It loks like you forgot the / at the very end of your --base-href parameter. That is why the resources are not loaded and your app doesn't run. Set it to https://alamgirqazi.github.io/learningangular/

Alamgir Qazi Over a year ago

that was it. THANK YOU.

Collectives™ on Stack Overflow

Angular CLI Deploy to Github Pages issue: ERROR Error: Uncaught (in promise): Error: Cannot match any routes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related