Issue with displaying Angular index.html page post-build

My Angular application runs smoothly on ng serve, but after building and uploading with ng build --prod, the index.html file fails to open.

I've tried using various base href configurations like 

<base href="#">, <base href="/">, <base href="#">
, but none of them seem to work for me.

I've attempted adjusting the href dist path, but I keep encountering an error in the console stating "Unhandled Navigation Error."

Here is a snippet from angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": "a59a14d2-db6f-4410-ae85-9d54453c06b9"
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Acres": {
      "projectType": "application",
      ...
    }
  },
  "defaultProject": "Acres"
}

The loader of my app shows up, but no pages are displayed afterwards.

angulartypescript

Answer №1

Give these a shot:

<base href="./"> added to your index.html file

Alternatively,

<base href=""> inserted in your index.html page

Or

ng build --base-href ./

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to dynamically generate a form using ngFor in Angular 4?

I'm attempting to generate an editable form dynamically using ngFor. Essentially, it's a data grid and I might use some other systems for this task--perhaps that's the route I should take, but I wanted to give this approach a try initially. ...

angularangular2-forms

Issue with TagCloud functionality when deployed on Vercel platform

Everything functions perfectly on my local machine, but once deployed to Vercel, the display disappears. I've double-checked the text, container, and TagCloud - all showing the correct responses. I even tried uninstalling and reinstalling TagCloud wit ...

typescriptnext.jsverceltag-cloud

Error encountered when attempting to export a TypeScript class from an AngularJS module

In my application using Angular and TypeScript, I have encountered a scenario where I want to inherit a class from one module into another file: generics.ts: module app.generics{ export class BaseClass{ someMethod(): void{ alert(" ...

javascriptangularjstypescript

Tips for making a dynamic link button using Angular

I am currently working on creating responsive buttons that will navigate to specific pages using Angular routing. Here is my routing configuration: const routes: Routes = [ { path: 'home', component: HomeComponent}, { path: ' ...

angularbuttonroutes

Navigating to a child route from a parent component in Angular using the navigate method: A step-by-step guide

Here is the code snippet for my HTML routerLink: <a [routerLink]="['create']">Create</a> - it's working just fine. When I try to call the same on a button click, it doesn't work.. navigateTo(page) { this.router.na ...

angularangular-routerangular8

Angular 6 implement a waiting function using the subscribe method

I need to make multiple calls to a service using forEach, where each call depends on the completion of the previous one. The code is as follows: itemDefaultConfiguration.command = (onclick) => { this.createConfiguration(configuration.components); ...

javascriptangulartypescripthttpasynchronous

What is the best way to update the image source in Angular 2?

Learn How to Get a Directive's Reference in Angular 2 Looking to swap image src on hover? Check out this helpful link for guidance:-- ...

angulartypescript

Unexpected Behavior in Angular 12 Subscriptions

Having developed a ShoppingCart Service in Angular 12 with Firestore as the backend, my objective is to maintain the shopping functionality throughout the application. Upon page load, a method is triggered to check the presence of a "cartId" field in the l ...

angulargoogle-cloud-firestoreservicenullsubscription

Angular - Ensuring the Quality of Your Code

After creating a new project in Angular using the command "ng new app" and running "npm test," I successfully completed 3 tests. How can I view these tests in Test Explorer in Visual Studio? Do I need to open the project differently since I usually use "Op ...

angularvisual-studiotesting

Is your current Angular 2 project in need of data retrieval from a SQL server?

Currently, I am facing a challenge with my Angular 2 application as I am unable to connect and send queries to an existing SQL server. It has come to my attention that in order to achieve this, I need to create a RESTful API using 'express.js'. I ...

node.jsangularexpress

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result. https://i.sstatic.net/kRJOb.png Here is my HTML code: <section class="favorit ...

javascripthtmlcssangulartypescript

Tips for integrating angular signature functionality using fabricjs in the latest version of Angular (Angular 11)

After struggling to make paperjs and the angular-signature library work together, I was at my wit's end. But then, I stumbled upon a different solution that proved to be much better. I realized that posting the solution under the appropriate question ...

javascriptangularfabricjsimplementationsignature

Issue with Safe Navigation Operator in Angular 2 not functioning properly when used in template property binding

Ng: 13.3.11 TS: 4.6.4 When using the safe navigator in an Ng template, an error is encountered in IntelliJ Idea with the following expression: [innerHTML]="foo.bar.baz[v1].foobar[v2]?[v3]?[v4]?[v5]" error: Parser Error: Conditional expression. ...

angularexpressionsafe-navigation-operator

Can you explain the meaning of <T = MyType>?

While exploring a TypeScript file, I stumbled upon this interface declaration: interface SelectProps<T = SelectValue> extends AbstractSelectProps { /* ... */ } I've searched through the TypeScript handbook for <T = but couldn't find an ...

typescriptgenerics

What is the best way to divide data prior to uploading it?

I am currently working on updating a function that sends data to a server, and I need to modify it so that it can upload the data in chunks. The original implementation of the function is as follows: private async updateDatasource(variableName: strin ...

javascripttypescriptforeachpromiselodash

Enhancing Responses in NestJS with External API Data

I'm a beginner in NestJs, Graphql, and typescript. I am trying to make an external API call that is essentially a Graphql query itself. The goal is to modify the response, if necessary, and then return it for the original request or query, in this ca ...

node.jstypescriptgraphqlnestjstypeorm

Angular 7 and Express: No content returned in response body after making a POST request

I am encountering an issue with retrieving the response from a POST request in Angular 7. When I set the API to return "text," everything works as expected. However, when I change the response to JSON, the response body in Angular appears to be null. Test ...

node.jsangularexpressionic-framework

Ensuring that a date is within a certain format in TypeScript

Can someone help me verify the validity of different date formats? I attempted the following method: let newdate = new Date(myStringDate); Date.parse(myStringDate) result = `${newdate.getDate()}/${newdate.getMonth() + 1}/${newdate.getFullYear()}` The re ...

angulartypescript

Having trouble with Angular routing when attempting to directly access a specific URL path?

Seeking help with my routing setup in Angular. Using v12 of Angular. Encountering a 404 Not Found error when trying to access the direct URL for "register" at somesite.com/register. Uncertain if this is a server or Angular issue. Here is my router module ...

angulartypescriptangular-routing

Unable to showcase dropdown options in Angular 5

I am currently diving into Angular 5 and following a tutorial. I encountered an issue while attempting to display drop down values in a form. The component.html code provided below is not showing the drop down values. Here's what I have tried so far. ...

angular