Encountering a 404 error when trying to deploy an Angular application

After following the Angular documentation for deployment, I am deploying my angular application on github pages. The steps I have taken include:

1. Running "ng build --prod --output-path docs --base-href /<project_name>/".

2. Making a copy of docs/index.html and renaming it as docs/404.html after the build is complete.

3. Committing Changes and pushing them to GitHub.

4. Configuring the project page on GitHub to publish from the docs folder.

Despite following these steps correctly, when I access the deployed app, I only see a blank page with error messages in the browser console like:

"main-es2015.84e37fd7abe9e8bbec00.js" was blocked because of a disallowed MIME type ("text/html").

"polyfills-es2015.f332a089ad1600448873.js" was blocked because of a disallowed MIME type ("text/html").

"runtime-es2015.0dae8cbc97194c7caed4.js" was blocked because of a disallowed MIME type ("text/html").

As a beginner in Angular, I would appreciate any help or guidance on resolving this issue.

angulartypescriptangular-ui-router

Answer №1

Always double-check to ensure you have

<base href=".">

instead of this in your index.html document

<base href="/">

This configuration allows the web server to properly search for .js files in the current directory, rather than the root directory.

Answer №2

I encountered a similar issue where none of the referenced resources could be found.

After following Angular core guidelines without making any changes to angular.json or index.html

@angular-devkit/architect       0.1001.2 
@angular-devkit/build-angular   0.1001.2 
@angular-devkit/core            10.1.2
@angular-devkit/schematics      10.1.2
@schematics/angular             10.1.2
@schematics/update              0.1001.2
rxjs                            6.6.3
typescript                      4.0.2

The issue was resolved by executing the following command and then uploading the docs folder to the repository

ng build --prod --output-path="docs" --base-href="https://user.github.io/project/"

In github, select master as branch and docs as folder for deployment.

Answer №3

Figuring out the solution is quite straightforward and usually comes down to incorrect configurations within the projects. Within angular.json, there exists a node labeled outputPath that sometimes, even when untouched by me, defaults to dist/. In the original functional examples, this value was set correctly, but in the problematic cases, it was incorrectly set to dist/ (with the root cause being the wrong project name as explained in the previous post).

Therefore, the key to resolving this issue lies in ensuring that the “Publish directory” setting under “Deploy settings” on Netlify matches the outputPath specified in angular.json.

Additionally, remember to update ng build --prod (in package.json) to ng build --configuration production

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

What is the method to acquire the firestore reference type in TypeScript?

Here is the code I am working with: import { DocumentReference } from '@firebase/firestore-types' export type Recipe = { author: string title: string ingredients: { quantity: number ingredient: DocumentReference["path"] ...

typescriptfirebasegoogle-cloud-firestorenext.js

Tips for delaying the rendering of a template in an angular ui router state until all dependencies are resolved

Is it possible to use the resolved data from a resolve block in the templateUrl function? How can this be accomplished, or is there a way to ensure that the resolution is completed before calling the templateUrl function? ...

angularjsangular-ui-router

NextJS: Build error - TypeScript package not detected

I'm facing an issue while setting up my NextJS application in TypeScript on my hosting server. On my local machine, everything works fine when I run next build. However, on the server, I'm encountering this error: > next build It seems that T ...

typescriptnext.js

Angular Material 2 with Customized Moment.js Formatting

Is there a way to display the year, month, day, hours, minutes, and seconds in the input field of my material datepicker? I have successfully customized the parse() and format() methods in my own DateAdapter using native JavaScript objects. Howe ...

javascriptangulartypescriptmomentjsangular-material2

What happens when arithmetic operators are applied to infinity values in JavaScript?

Why do Arithmetic Operators Behave Differently with Infinity in JavaScript? console.log(1.7976931348623157E+10308 + 1.7976931348623157E+10308)//Infinity console.log(1.7976931348623157E+10308 * 1.7976931348623157E+10308)//Infinity console.log(1.797693134 ...

javascripttypescripttypesecmascript-6operators

Testing Material-UI's autocomplete with React Testing Library: a step-by-step guide

I am currently using the material-ui autocomplete component and attempting to test it with react-testing-library. Component: /* eslint-disable no-use-before-define */ import TextField from '@material-ui/core/TextField'; import Autocomplete from ...

reactjstypescriptautocompletematerial-uireact-testing-library

Is it feasible to create a test case for code that is located within the constructor in Angular?

I have the following code snippet within my constructor: constructor( private ngxSpinner: NgxSpinnerService, private userSecurityService: UserSecurityService, private userInformationService: UserInformationService, private navigateService ...

angularunit-testing

Issue with Angular filtering when utilizing pipe and mapping the response

Code snippet from shop.service.ts getProducts(brandId?: number, typeId?: number) { let params = new HttpParams(); if (brandId){ params = params.append('brandId', brandId.toString()); } if (typeId){ params = params.append('typeId', ...

asp.netangulartypescript

Loop through a collection of elements of a certain kind and selectively transfer only certain items to a different collection of a different kind

When working with typescript, I am faced with the challenge of dealing with two arrays: interface IFirst{ name: string; age: number } interface ISecond { nickName: string; lastName: string; } myFirstArray: IFirst[]; mySecondArray: ISe ...

arraysangulartypescript

The user authentication service indicates that no user is currently logged in

Currently, I am working on implementing a route guard to distinguish between authenticated users and guests. In order to achieve this, I have created an auth-guard service along with an auth service. Although the user data is successfully stored in the loc ...

angulartypescriptasynchronous

Looping through each combination of elements in a Map

I have a Map containing Shape objects with unique IDs assigned as keys. My goal is to loop through every pair of Shapes in the Map, ensuring that each pair is only processed once. While I am aware of options like forEach or for..of for looping, I'm s ...

javascriptarraystypescriptobject

Exploring the power of Angular's ViewChildren to iterate through QueryList items

My ngFor loop includes child components: @ViewChildren(SingleMultiSelectionComponent) singleMultiSelections: QueryList<SingleMultiSelectionComponent>; I am attempting to iterate through this QueryList: console.log(this.singleMultiSelections); // 1 i ...

angular

Tips for targeting a specific element with providers in Ionic

By using the specified pattern, I am aiming to achieve a unique toolbar or header for only certain pages. Is there a way to accomplish this without injecting the provider and keeping the page as a standalone? My understanding of Ionic is still developing, ...

angularjstypescriptionic2

Tips for accurately defining the return type for querySelector(All) connections

I enjoy doing this particular task, ensuring the types are correct. const qs = document.querySelector.bind(document) as HTMLElementTagNameMap | null; const qsa = document.querySelectorAll.bind(document) as NodeListOf<any>; While hovering over query ...

typescriptbinddeclare

The name is not found when using attribute, but it is found when using extends

Lately, I've encountered difficulties with creating large TypeScript modules, and there's one thing that has been puzzling me. Specifically, the following scenario doesn't seem to work: // file A.ts export = class A { } // file main.ts imp ...

typescript

Error occurs when trying to open a modal popup within a component due to changes in expression

In my application, I am facing an issue where I have a parent component passing HTML content to a child common component using @ViewChild(). However, when the Child component loads up a popup, the console throws the following error: "ExpressionChangedAft ...

angularmodal-dialogbootstrap-modalviewchild

What is the best way to retrieve every single element stored in an Object?

On a particular page, users can view the detailed information of their loans. I have implemented a decorator that retrieves values using the get() method. Specifically, there is a section for partial repayments which displays individual payment items, as d ...

javascriptarraysreactjstypescriptdecorator

The Angular API request is continuously retrieving data every single second

I recently inherited some Angular/ng-bootstrap code that included a table with static data, which was functioning perfectly. However, the requirement now is to fetch the data from an API call. In an attempt to modify it accordingly, I referred to an answer ...

angularrxjsbootstrap-5angular-ui-bootstrap

Peer dependency conflict detected (while executing ng update @angular/core) - explanation provided

Currently, I am in the process of upgrading my Angular project to version 11.0.5 by executing the command provided below: ng update @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="066569746346373728362833">[email ...

angularnpm

Is there a way to incorporate timeouts when waiting for a response in Axios using Typescript?

Can someone assist me in adjusting my approach to waiting for an axios response? I'm currently sending a request to a WebService and need to wait for the response before capturing the return and calling another method. I attempted to utilize async/aw ...

javascriptnode.jstypescriptasynchronousaxios