angular 9 module router 处理

傷城~ 2022-10-14 10:49 81阅读 0赞

at ZoneDelegate.invoke (zone.js:372) ERROR Error

关于上面问题的解决，能到这步的朋友相信都已经是半高手了。所以不作过多描述，直接上代码。

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbHNvbmtl_size_16_color_FFFFFF_t_70][]

我的环境如下:

\_                      \_                 \_\_\_\_ \_     \_\_\_  
    / \\   \_ \_\_   \_\_ \_ \_   \_| | \_\_ \_ \_ \_\_     / \_\_\_| |   |\_ \_|  
   / △ \\ | '\_ \\ / \_\` | | | | |/ \_\` | '\_\_|   | |   | |    | |  
  / \_\_\_ \\| | | | (\_| | |\_| | | (\_| | |      | |\_\_\_| |\_\_\_ | |  
 /\_/   \\\_\\\_| |\_|\\\_\_, |\\\_\_,\_|\_|\\\_\_,\_|\_|       \\\_\_\_\_|\_\_\_\_\_|\_\_\_|  
                |\_\_\_/

Angular CLI: 12.0.1  
Node: 12.19.0  
Package Manager: npm 6.14.13  
OS: win32 x64

Angular: 12.0.1  
... animations, cli, common, compiler, compiler-cli, core, forms  
... platform-browser, platform-browser-dynamic, router

Package                         Version  
\---------------------------------------------------------  
@angular-devkit/architect       0.1200.1  
@angular-devkit/build-angular   12.0.1  
@angular-devkit/core            12.0.1  
@angular-devkit/schematics      12.0.1  
@schematics/angular             12.0.1  
rxjs                            6.6.7  
typescript                      4.2.4

import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    
    
    
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { UserModule} from './user/user.module';
    import { ProductModule} from './product/product.module';
    import { ArticleModule} from './article/article.module';
    
    const routes: Routes = [
      {path:'user',loadChildren:() => UserModule},
      {path:'product',loadChildren:() => ProductModule},
      {path:'article',loadChildren:() => ArticleModule},
      {
        path:'**',redirectTo:'user'
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { ProfileComponent } from './profile/profile.component';
    import { UserComponent } from './user/user.component';
    
    const routes: Routes = [
      {path:"",component:UserComponent},
      {path:"profile",component:ProfileComponent}
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class UserRoutingModule { }

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { UserRoutingModule } from './user-routing.module';
    import { UserComponent } from './user/user.component';
    
    
    @NgModule({
      declarations: [
        UserComponent
      ],
      imports: [
        CommonModule,
        UserRoutingModule
      ]
    })
    export class UserModule { }

import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { ProductComponent } from './product/product.component';
    
    const routes: Routes = [
      {path:"",component: ProductComponent}
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class ProductRoutingModule { }

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { ProductRoutingModule } from './product-routing.module';
    import { ProductComponent } from './product/product.component';
    
    
    @NgModule({
      declarations: [
        ProductComponent
      ],
      imports: [
        CommonModule,
        ProductRoutingModule
      ]
    })
    export class ProductModule { }

import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { ArticleComponent } from './article/article.component';
    
    const routes: Routes = [
      {path:"",component: ArticleComponent}
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class ArticleRoutingModule { }

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { ArticleRoutingModule } from './article-routing.module';
    import { ArticleComponent } from './article/article.component';
    
    
    @NgModule({
      declarations: [
        ArticleComponent
      ],
      imports: [
        CommonModule,
        ArticleRoutingModule
      ]
    })
    export class ArticleModule { }

header{
    
      height: 44px;
      line-height: 44px;
      background-color: black;
    
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbHNvbmtl_size_16_color_FFFFFF_t_70]: /images/20221014/758d75ef012d4e8a90fe50e81478e399.png