not sure what im doing wrong here, im fairly new to Angular and im fumbling along somewhat with regards to routing.
I'm running Angular 12.2.0 and have setup routes on localhost. I'm just navigating between two pages at the moment to see how it works, its working fine locally.
For example on localhost I can browse from the root http://localhost:4200/ to http://localhost:4200/locations which works fine.
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'locations', component: LocationsComponent}
];
When I run ng build to build the project, it runs fine and I can open the index.html fine
what I cannot do is navigate between the routes no more
Launching the build at dist/angular-app/index.html when I click on the locations link its wanting to link to dist/angular-app/index.html/locations which is blank even if I change the URL to dist/angular-app/locations that's also blank
Anyone point me in the right direction as to why its doing this?
Many thanks
Attaching my angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-app": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angular-app:build:production"
},
"development": {
"browserTarget": "angular-app:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "angular-app"
}
Most likely it is because your webserver is actually trying to find a page corresponding to the URL. However, since an Angular app is a SPA the elements are injected into a page dynamically based on the url in your browser, therefore, when requesting a route the server returns 404 HTTP error. This can be solved by using HashLocationStrategy from angular, which appends a # to your URL making it possible to navigate when the app is deployed.
Add this to your app.module.ts in the providers section.
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
Import:
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
Edit: Alternatively, If you are serving the application through Nginx or an Apache Server, you can add configuration entry in the config file to redirect all requests that have no matching file to /index.html. More on that you can see https://angular.io/guide/deployment#server-configuration