The Angular Progressive Web App functions properly in ng serve mode, but encounters issues when running with http-server

I'm developing a Progressive Web App (PWA) using Angular. Everything was functioning smoothly until out of nowhere, I started encountering a 404 Error whenever I tried to navigate to a new component while serving in dist/project with http-server. Surprisingly, I haven't made any changes to the code since deploying it on git

Despite trying various troubleshooting steps like reinstalling Visual Studio, rebooting my computer, updating the Service Worker in the Ctrl+Shift+i menu, and resetting in git, the issue persists.

Below is my Angular routing module:

const appRoutes: Routes=[
  {path: '', component: HomeComponent},
  {path: 'home', component: HomeComponent},
  {path: 'whoconebioassayphase1', component: WhoConeBioassayPhase1Component},
  {path: 'editwhoconebioassayphase1', component: Editwhoconebioassayphase1Component},
  {path: 'exphutintro', component: ExpHutIntroComponent},
  {path: 'exphut', component: ExpHutComponent},
  {path: 'editexphutintro', component: EditexphutintroComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    WhoConeBioassayPhase1Component,
    NavbarComponent,
    HomeComponent,
    Editwhoconebioassayphase1Component,
    ExpHutIntroComponent,
    ExpHutComponent,
    EditexphutintroComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule

  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Index.html

<head>
  <meta charset="utf-8">
  <title>FbIhi</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#1976d2">
  <link href = "https://fonts.googleapis.com/css?family=Monteserrat" rel="stylesheet">
</head>
<body>
  <app-root></app-root>

manifest.json

{
  "name": "fb-ihi",
  "short_name": "fb-ihi",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

and ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ],
        "urls":[
          "htts://fonts.googleapis.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }],
    "dataGroups": [
      {
        "name":"jokes-api",
        "urls": ["https://api.chucknorris.io/jokes/random"],
        "cacheConfig":{
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "90d",
          "timeout":"5s"

        }
      }

    ]
}

My expectation is to seamlessly navigate to the next component by clicking a button in the app. However, instead, an error stating "Not Found" keeps appearing.

angulartypescriptserviceprogressive-web-appsworker

Answer №1

Solved the problem! Realized that my computer was running out of storage space. Deleted a load of videos from my hard drive which solved the issue right away.

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

Tips for defining a key: reducerFunctions object within a Typescript interface

Exploring the given interface: interface TestState { a: number; b: string; } My goal is to create a generic type that enforces an object to: have the same keys as a specified interface (e.g. TestState) for each key, provide a value of a reducer funct ...

typescriptgenerics

Exploring advanced customization options in Angular 6+: Extending the default configuration beyond the environment settings

I am dealing with multiple Angular configurations and I'm trying to customize the default settings by using lodash merge: import { merge } from 'lodash' import { defaults } from './defaults' export const customConfig = merge(defa ...

angular

Decide on the Title based on a condition in Angular

To only set the title="" if a specific condition is true, and otherwise have no title at all, I need to ensure that the property.propertyKey === 'birthday' before assigning the value of birthday to the title. <div *ngFor="let ...

angularbindingtitle

User's information will only be updated once the page is refreshed

I am encountering an issue with displaying two ul elements based on user login status. When I log in, the first ul is shown immediately, but the second ul is only displayed after a page refresh. Initially, the value in "accountService.currentUser" is null ...

htmlangulartypescript

Angular 2 Form Arrays

I need to create a new FormArray, but currently there is only one member in the array. When I try to create a new FormBuilder, it looks like this: public myAccountForm: FormGroup; ngOnInit() { this.myAccountForm = this._fb.group({ FullName: [ ...

angularangular-reactive-forms

Troubleshooting problem with toggling Bootstrap accordion

Hello there! I'm currently using a bootstrap accordion within Angular, but I'm experiencing some issues with toggling. I've provided a reference to the stackblitz I created, but I can't seem to identify the cause of the toggling problem ...

angularbootstrap-5bootstrap-accordion

Using Typescript to define custom PopperComponent props in Material UI

I'm currently utilizing the Material UI autocomplete feature in my React and Typescript application. I'm looking to create a custom popper component to ensure that the popper is full-width. Here's how I can achieve this: const CustomPopper ...

reactjstypescriptmaterial-uireact-props

Tips for Resolving TypeScript Error 7053 when using the handleChange function in a React Form

Seeking assistance with creating a versatile handleChange function for a React form. The goal is for the handleChange function to update the state value whenever a form field is modified, while also accommodating nested values. Below is my attempt: const ...

reactjstypescript

The value of this.$refs.<refField> in Vue.js with TypeScript is not defined

During the process of converting my VueJs project to TypeScript, I encountered an error related to TypeScript. This issue arises from a component with a custom v-model implementation. In the HTML, there is an input field with a 'plate' ref that ...

javascripttypescriptvue.jsvuejs2vue-component

What is the process for defining a property type as a textual representation of a Type name in TypeScript?

Consider the following classes and interface: class Foo {} interface Bar {} I am looking to define a type that includes a property with a specified type: type DynamicPropertyName<T> = ... <-- ??? After defining the type, I want to use it like th ...

typescripttypescript-genericstemplate-literals

Having trouble accessing input value when using FormArrayName with FormBuilder?

When attempting to retrieve the value from the input field using formArrayName, I am encountering an issue where it returns null instead. The console shows that I can get the value for client name but not for secrets. What I need is for the returned value ...

angular

Sending HTML content to viewChild in Angular 5

I'm struggling to figure out how to pass HTML to a ViewChild in order for it to be added to its own component's HTML. I've been searching for a solution with no luck so far. As a newcomer to Angular, many of the explanations I find online ar ...

javascripthtmlangularbootstrap-4bootstrap-modal

Update your AngularJS to the most recent version of Angular

We are faced with the task of upgrading a legacy MVC website that currently utilizes AngularJs to the latest version of Angular. Surprisingly, our current website only scratches the surface of what Angular has to offer - mainly using it for databinding and ...

angularangularjsasp.net-mvc

Getter and setter methods in Angular Typescript are returning undefined values

I am facing a challenge in my Angular project where I need a property within a class to return specific fields in an object. Although I have implemented this successfully in .Net before, I am encountering an issue with getting an "Undefined" value returned ...

angulartypescriptclassproperties

A guide on incorporating ngFor with the flipping card feature in Angular

I am attempting to use ngfor to create some flip cards. However, the cards are not starting a new line and are overlapping in the first line. I have a total of 4 cards, but the 4th card is overlapping with the 1st card. I believe this issue is related to t ...

angular

Exporting modules in TypeScript using "module.exports"

While working on my Yeoman generator, I initially wrote it in JavaScript like this: "use strict"; var Generator = require("yeoman-generator"); var chalk = rquire("chalk"); module.exports = class extends Generator { initializing() { this.log( c ...

typescriptyeoman

Unable to showcase the content inside the input box

I am having trouble displaying a default value in an input field. Here is how I attempted to do it: <input matInput formControlName="name" value="Ray"> Unfortunately, the value is not appearing as expected. You can view my code o ...

angulartypescript

Eliminate the "Potential 'undefined' Object" error without resorting to non-null assertion or optional chaining

Below is the code snippet I am working with: export type ConditionalItemType = [ { condition: string }, { [key: string]: FormItemDataType } ]; export type ConditionalItemDataType = ConditionalItemType[]; export type FormItemDataType = { required: bo ...

typescript

Guide on updating a value in a Firestore document using Firebase

I am working on updating a specific portion of a document in my Firebase collections structure, specifically the phonebook(map) section. https://i.sstatic.net/UmHot.png When attempting to modify the document, I encountered an error saying Invalid documen ...

angulartypescriptfirebasegoogle-cloud-firestore

Utilizing React TypeScript: Leveraging useRef for Linking purposes

Implementing useRef to Handle Link Clicks import {Link} from 'react-router-dom'; const myLinkRef = useRef<HTMLAnchorElement>(null); ... myLinkRef.current.click() ... <Link to={{pathname: '/terms'}} id='myLink' ref= ...

reactjstypescript