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

The module "@clerk/nextjs/server" does not contain a member with the name "clerkMiddleware" available for export

Currently, I am working on Nextjs 14 with typescript and implementing authentication and authorization using Clerk. Following the instructions in the Clerk documentation, I included the code snippet below in my middleware.ts file: import { authMiddleware } ...

typescriptnext.jsclerk

What could be the reason for the 'tsc' command not functioning in the Git Bash terminal but working perfectly in the command prompt?

I recently installed TypeScript globally on my machine, but I am facing an issue while trying to use it in the git bash terminal. Whenever I run tsc -v, I encounter the following error: C:\Users\itupe\AppData\Roaming\npm/node: l ...

javascripttypescriptnpmterminalgit-bash

What is the best way to turn off template binding for a specific section of a template in Angular2?

Can someone help me figure out how to show the {{ name }} string in an Angular 2 template? Is there a way to turn off template binding for only a section of the template? Thanks in advance! ...

angularangular2-template

The object's value may be 'undefined' after utilizing a switch case to ensure it is not undefined

Before I encountered the error Object is possibly 'undefined'.ts(2532) at testObject["x"], I had used case "x" in testObject. Why did this happen? Should I create my own type guard for it? interface TestObject { a?: number; ...

typescript

Issue with Pagination functionality when using Material-UI component is causing unexpected behavior

My database retrieves data based on the page number and rows per page criteria: const { data: { customerData: recent = null } = {} } = useQuery< .... //removed to de-clutter >(CD_QUERY, { variables: { input: { page: page, perPag ...

javascriptreactjstypescriptmaterial-ui

Addressing the Angular Auth0 Error: State Validation Problem

Currently, I am in the process of integrating Auth0 into my Angular application (I am utilizing the .NET Core Angular project template within VS2022). .NET 6 Angular: 13.0.2 @auth0/auth0-angular: 1.8.0 To start off, I referred to https://auth0.com/docs/q ...

angularauth0

The type definition file for 'node' cannot be located

I've encountered some unusual errors after updating angular, webpack, and typescript. Any suggestions on what might be causing this? When I attempt to run the application with npm start, I'm seeing the following errors: [at-loader] Cannot find ...

node.jsangulartypescriptwebpack

The error message, "Property 'message' is not found on type 'ErrorRequestHandler<ParamsDictionary, any, any, ParsedQs, Record<string, any>>.ts(2339)", indicates that the requested property is not present in the specified type

Hello there! Recently, I implemented a custom error handling middleware in my Node.js TypeScript application. However, I encountered an issue where it is showing an error stating that 'message' does not exist on type 'ErrorRequestHandler&apo ...

node.jstypescriptexpress

What is the process for creating a clickable file upload in Angular?

Currently, I am utilizing the instructions found in this guide to implement a file upload feature in my project. The code provided works perfectly: <input type="file" class="file-input (change)="onFileSelected($event)" #fileUplo ...

javascripthtmlangulartypescript

Unable to assign value to a public variable in Angular

I am facing an issue where I am trying to retrieve a value from the localStorage and assign it to a variable. However, when I try to use that variable in functions, it is coming up as undefined. code export class DashboardService { public token: any; ...

javascriptangularionic-framework

Tips for troubleshooting Angular 4 unit testing using jasmine and karma with simulated HTTP post requests

I have a service that I need to unit test in Angular 4 using TypeScript and Jasmine. The problem is with the http where it needs to perform a post request and get an identity in return, but for some reason, no data is being sent through. My goal is to ac ...

angularunit-testingtypescriptjasminekarma-jasmine

Issue with Angular 2 NgFor Pattern Error Message Display Absence

I am attempting to incorporate inputs with a regex requirement within an ngFor loop, but I am not receiving the expected error message when entering something that does not match the required pattern. Even when I input an incorrect pattern, "Test" remains ...

javascriptregexhtmlangular

Stop ngOnChanges from being triggered after dispatching event (Angular 2+)

In Angular 2+, a custom two-way binding technique can be achieved by utilizing @Input and @Output parameters. For instance, if there is a need for a child component to communicate with an external plugin, the following approach can be taken: export class ...

javascriptangulartypescript

Guide on how to connect several Subjects within an object literal to their corresponding Observables in another object literal

I am currently developing a class using Angular and I need to share multiple states associated with that class. To accomplish this, I have created several instances of BehaviorSubject private subjects = { a : new BehaviorSubject<A>(this.a), b ...

angulartypescriptrxjsobservable

CreateAsyncModule using an import statement from a variable

When trying to load a component using defineAsyncComponent, the component name that should be rendered is retrieved from the backend. I have created a function specifically for loading the component. const defineAsyncComponentByName = (componentName: strin ...

javascripttypescriptvue.jsvuejs3vite

It appears there was a mistake with [object Object]

Hey there, I'm currently working with Angular 2 and trying to log a simple JSON object in the console. However, I keep encountering this issue https://i.stack.imgur.com/A5NWi.png UPDATE... Below is my error log for reference https://i.stack.imgur.c ...

jsonangulartypescript

Tips for incorporating a child's cleaning tasks into the parent component

I am working with a parent and a child component in my project. The parent component functions as a page, while the child component needs to perform some cleanup tasks related to the database. My expectation is that when I close the parent page/component, ...

typescriptangular

Why am I struggling to show the success message on my basic CRM Angular web application?

I'm facing an issue in my Basic Angular app where the success message is not being displayed even after writing the correct code. 1)app.component.html <h1 class="c1">{{title}}</h1> <div *ngIf="success_msg;" style=&q ...

angularangularjs-directiveangular-ng-if

Is there a way to showcase Images or Stars in a Material Angular Form?

I have a form where the rating is displayed using star images, but it is stored as a number in string format on the backend. While experimenting, I am trying to figure out the best way to achieve this. Currently, this is what I have: The input I am using ...

angularangular-material

Is it possible to inject a descendant component's ancestor of the same type using

When working with Angular's dependency injection, it is possible to inject any ancestor component. For example: @Component({ ... }) export class MyComponent { constructor(_parent: AppComponent) {} } However, in my particular scenario, I am tryin ...

angulartypescript