Ionic 加载资源失败:服务器以404(未找到)状态响应-Angular

vc6uscn9  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(217)

我正在做离子PWA的Angular 。在加载应用程序时,我得到的错误信息在控制台如下所示。我认为有一些与页面,我得到相同的消息时,我打开任何其他页面以及。此外,它总是加载页面成功,但它需要相当长的时间来加载它。

我以为问题出在“app-routing.module.ts”中,但它看起来很好。AuthGuard工作正常,因为它将我重定向到正确的页面。
当我建造它的时候,我在终端上也遇到了同样的问题。

[2022-11-02T14:10:30.741Z]  "GET /admin" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36"
[2022-11-02T14:10:30.744Z]  "GET /admin" Error (404): "Not found"

我没有在本地主机上得到任何错误,但在本地主机上浏览器找不到服务工作者,无法使用PWA。
我不知道该复制什么,因为我不知道在哪里可以找到问题。有什么建议吗?
app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './guard/auth.guard';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'tabs',
    pathMatch: 'full'
  },
  {
    path: 'tabs',
    loadChildren: () => import('./pages/tabs/tabs.module').then( m => m.TabsPageModule),
    canLoad: [AuthGuard],
    data: {
      type: 'user',
    }
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'admin',
    loadChildren: () => import('./pages/admin/admin.module').then( m => m.AdminPageModule),
    canLoad: [AuthGuard],
    data: {
      type: 'admin'
    }
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我研究了很多,但我没有发现任何其他问题与这种类型的问题时,页面导致错误。我添加了PathLocationStrategy和LocationStrategy到'app.module.ts'

import { PathLocationStrategy, LocationStrategy } from '@angular/common';

...

  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ],

我用这个:

ionic build --prod && http-server www/

在下面找到“管理员路由.模块.ts”

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { DayPilotModule } from '@daypilot/daypilot-lite-angular';

import { AdminPage } from './admin.page';

const routes: Routes = [
  {
    path: '',
    component: AdminPage
  },
  {
    path: 'add-photo',
    loadChildren: () => import('./add-photo/add-photo.module').then( m => m.AddPhotoPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    FormsModule,
    DayPilotModule,
    HttpClientModule
  ],
  exports: [RouterModule],
})
export class AdminPageRoutingModule {}
Versions:

Angular CLI: 13.3.3
Node: 17.8.0 (Unsupported)
Package Manager: npm 8.19.2
OS: darwin arm64

Angular: 13.3.4
... core

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.1303.3
@angular-devkit/build-angular       13.3.9
@angular-devkit/core                13.3.3
@angular-devkit/schematics          13.3.3
@angular/animations                 7.2.16
@angular/cdk                        14.2.4
@angular/cli                        13.3.3
@angular/common                     13.3.3
@angular/compiler                   13.3.3
@angular/compiler-cli               13.3.3
@angular/fire                       7.3.0
@angular/forms                      13.3.3
@angular/language-service           13.3.3
@angular/material                   14.2.4
@angular/platform-browser           13.3.3
@angular/platform-browser-dynamic   13.3.3
@angular/router                     13.3.3
@angular/service-worker             13.3.3
@schematics/angular                 13.3.3
rxjs                                6.6.7
typescript                          4.4.4

Ionic:

   Ionic CLI                     : 6.20.3 
   Ionic Framework               : @ionic/angular 6.3.3
   @angular-devkit/build-angular : 13.3.9
   @angular-devkit/schematics    : 13.3.3
   @angular/cli                  : 13.3.3
   @ionic/angular-toolkit        : 6.1.0
zbq4xfa0

zbq4xfa01#

没有定义AdminPageModule(只有一个AdminPageRoutingModule不同),至少您的代码示例没有显示任何AdminPageModule,但是您在AppRoutingModule中引用了它。因此404-错误。换句话说,定义路由是不够的,您还需要确保路由所引用的组件或模块存在。

相关问题