我正在做离子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
1条答案
按热度按时间zbq4xfa01#
没有定义
AdminPageModule
(只有一个AdminPageRoutingModule
不同),至少您的代码示例没有显示任何AdminPageModule
,但是您在AppRoutingModule
中引用了它。因此404
-错误。换句话说,定义路由是不够的,您还需要确保路由所引用的组件或模块存在。