angular 9 module router 处理

最新推荐文章于 2024-03-22 11:01:02 发布

wilsonke

最新推荐文章于 2024-03-22 11:01:02 发布

阅读量966

点赞数

文章标签： web

本文链接：https://blog.youkuaiyun.com/wilsonke/article/details/117108670

版权

本文档展示了在Angular 12环境中遇到的路由错误及解决方案，包括设置子模块路由、主路由配置和模块导入。通过代码示例，解释了如何正确地将用户、产品和文章模块作为子路由加载，并确保默认重定向功能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

效果图

我的环境如下:

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

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>
   <a [routerLink]="['/user']" style="padding: 10px 50px;color: #fff;">用户</a>

   <a [routerLink]="['/product']" style="padding: 10px 50px;color: #fff;">产品</a>

   <a [routerLink]="['/article']" style="padding: 10px 50px;color: #fff;">文章</a>
</header>
<router-outlet></router-outlet>

header{

  height: 44px;
  line-height: 44px;
  background-color: black;


}