【问题标题】:Ionic 4 lazy loaded route - module not foundIonic 4 延迟加载路由 - 找不到模块
【发布时间】:2019-04-28 16:04:00
【问题描述】:

Ionic 4 和延迟加载模块存在很多问题,由于某种原因,如果我编辑 route.module.ts 文件并保存有时它会找到它,它会不断报告找不到下面的登录模块。有人遇到过这个问题并知道如何解决吗?

error in app.module.ts Error: Uncaught (in promise): Error: Cannot find module './pages/auth/login/login.module'
Error: Cannot find module './pages/auth/login/login.module'

// 主应用模块

        import { ErrorHandler, NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        import { RouteReuseStrategy } from '@angular/router';

        import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
        // AoT requires an exported function for factories
        export function HttpLoaderFactory(http: HttpClient) {
            return new TranslateHttpLoader(http, 'assets/i18n/')
        }



        class MyErrorHandler implements ErrorHandler {
        handleError(error) {
            console.log("error in app.module.ts", error);
        }
        }


        @NgModule({
        declarations: [AppComponent],
        entryComponents: [],
        imports: [ 
            BrowserModule,
            IonicModule.forRoot(),
            AppRoutingModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient]
                }
            }),
            AngularFireModule.initializeApp({
            }),
            AngularFireDatabaseModule,
            // Put your custom imports below this line to make merges in Git easier   
            FormsModule,
            ReactiveFormsModule,
            ],   
        providers: [
                {provide: ErrorHandler, useClass: MyErrorHandler}, // had to add a custom error handler class here as IonicErrorHandler deprecated - 
                { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
        ],
        bootstrap: [AppComponent]
        })
        export class AppModule {}

//主Routes文件懒加载找不到的登录页面

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

        const routes: Routes = [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
        { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
        ];

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

//登录找不到的懒加载模块

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { FormsModule, ReactiveFormsModule } from '@angular/forms';
        import { Routes, RouterModule } from '@angular/router';
        import { TranslateModule} from "@ngx-translate/core"
        import { IonicModule } from '@ionic/angular';

        import { LoginPage } from './login.page';

        const routes: Routes = [
        {
            path: '',
            component: LoginPage
        }
        ];

        @NgModule({
        imports: [
            CommonModule,
            FormsModule,
            IonicModule,
            ReactiveFormsModule,    
            TranslateModule,
            RouterModule.forChild(routes)
        ],
        declarations: [LoginPage]
        })
        export class LoginPageModule {}

【问题讨论】:

    标签: angular ionic-framework lazy-loading ionic4


    【解决方案1】:

    您应该检查 Angular 的文件夹结构并检查该模块是否具有正确的路径,然后在您的路径惰性模块具有正确路径时尝试重新加载您的服务器。

    【讨论】:

    • 感谢您的帮助,但结构完全没问题
    • 尝试删除 { preloadingStrategy: PreloadAllModules } 重新启动服务器一秒钟进行测试,不要使用 aot。
    • 如何在 ionic 4 中禁用 AOT?
    • “激活”aot 的唯一方法是使用 ng serve --aot 如果您从不使用此命令,建议您检查所有应用程序错误时,可能此错误是另一个错误的结果。你能用 stackblitz 重现这个错误吗?并在这里分享?
    【解决方案2】:

    重新启动您的 CLI。

    运行ionic serve(我大部分时间使用ionic serve,其他人似乎使用ng serve)。

    我注意到 CLI 需要不时重新启动,尤其是在更改 app.module 文件时。

    我刚刚通过删除 import { AppRoutingModule } from './app-routing.module'; 重新创建了您的错误消息,然后让 CLI 重新编译(此时我得到了 ERROR Error: StaticInjectorError(AppModule)[IonRouterOutlet -> Router]:)。

    当我再次导入 AppRoutingModule 并让 CLI 编译(无需重新启动)时,我得到的消息完全相同;重新启动它,我的项目完美加载。

    现在,每当我遇到一些愚蠢的错误时,我都会重新启动 CLI,然后在我的头部侧面划出一个洞。

    【讨论】:

    • 每次都必须重新启动 CLI 并不是真正的解决方案。无论如何,每次我想编译我的代码时,我都需要重新启动和修改一个文件——当然有更好的方法
    • 这是否解决了您的问题?但我同意,应该有更好的方法,如果还没有可用的方法,我相信 IONIC 团队会研究它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-21
    • 1970-01-01
    • 2018-10-04
    相关资源
    最近更新 更多