CODEWITHSUNDEEP
node.jsangularexpressroutes
aless80
aless80

Reputation: 3342

Routes in Node/Express and deployed Angular not working

Routes on a deployed Angular app do not work when served by Node with Express. I know this has been asked before but there is something I am probably missing that is driving me crazy.

File structure in the "express" folder where Node runs is roughly the following:

express
├── controller.js
├── index.js
├── ngForm 
│   ...see below...
├── node_modules
│   ...
├── package.json
├── public
│   ├── file.json
│   └── rubric.html
├── router.js
├── ssl
    ├── cert.pem
    └── key.pem

and the Angular project is in ngForm:

ngForm 
├── angular.json
├── dist
│  └── rubric
│       ├── assets
│       ├── favicon.ico
│       ├── index.html
│       ├── main.js
│       ├── main.js.map
│       ├── polyfills.js
│       ├── polyfills.js.map
│       ├── runtime.js
│       ├── runtime.js.map
│       ├── styles.js
│       ├── styles.js.map
│       ├── vendor.js
│       └── vendor.js.map
├── e2e
├── node_modules
├── package.json
├── src
├── tsconfig.json
└── tslint.json

Some relevant Angular code:

app.module.ts: 

const appRoutes: Routes = [
  {path: '', redirectTo: '/rubric', pathMatch: 'full' }, 
  {path: 'rubric', component: RubricComponent},
  {path: 'rubricbuilder', component: RubricbuilderComponent},
  {path: '**', component: PageNotFoundComponent}
]

app.component.ts: 

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.scss'],
  template: `<router-outlet></router-outlet>`
})

The relevant Node.js code:

server.js: 

app.use(express.static("ngForm/dist/rubric"));
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});

I did run ng build from the Angular project in ngForm, and the output is in ngForm/dist.

When running ng serve in the AngularProject I can navigate to https://localhost:4200/rubric and https://localhost:4200/rubricbuilder .

From Node I can only get to https://localhost:8000/ which redirects/changes the url to https://localhost:8000/rubric , but I cannot launch https://localhost:8000/rubric itself or https://localhost:8000/rubricbuilder. By poking around with the angular routes and re-running the build, I can make express show rubricbuilder on the / route, which changes the url to https://localhost:8000/rubricbuilder. What am I missing?

Upvotes: 1

Views: 2975

Answers (1)

Timothy Lee
Timothy Lee

Reputation: 828

I'm not that familiar with angular but this question is related to VueRouter.

Because you did not define /rubric router in express middleware so you might get an error like 404 NOT FOUND.

When using SPA router in HTML5 history mode, you need extra configurations for your server,

for example, send your SPA at every route:

app.use(express.static("ngForm/dist/rubric"));
app.use((req, res) => {
  res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});

This might not be the best practice for express, you can search for other solutions, for example like VueRouter suggest using connect-history-api-fallback with express.

Upvotes: 4

Related Questions