Angular创建模块并分配路由

Posted 2023-04-27

参考技术A 1、使用 ng g module npages --routing 创建一个带路由的模块。
2、在npages模块中创建组件 ng g c npages/onep 。
3、在npages模块的路由文件中引入模块并分配路由。

4、在 app-routing.module.ts 文件中的Routes数组中引入模块

Angular 2 路由应用程序路由模块声明错误

【中文标题】Angular 2 路由应用程序路由模块声明错误

【英文标题】：Angular 2 routing app-routing module declaration error

【发布时间】：2017-02-28 00:50:49

【问题描述】：

我正在向官方学习 Angular 2 教程https://angular.io/docs/ts/latest/tutorial/toh-pt5.html。而且我在路由方面遇到了一些问题。错误消息：类型 DashboardComponent 是 2 个模块声明的一部分：AppRoutingModule 和 AppModule！ 我不知道我的错误在哪里，我想我和教程中的一样。

错误信息：

我的代码：

应用模块

import  NgModule        from '@angular/core';
import  BrowserModule   from '@angular/platform-browser';
import  FormsModule     from '@angular/forms';

import  AppComponent          from './app.component';
import  DashboardComponent    from './dashboard.component';
import  HeroDetailComponent   from './hero-detail.component';
import  HeroesComponent       from './heroes.component';
import  HeroService           from './hero.service';

import  AppRoutingModule      from './app-routing.module';

@NgModule(
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,

  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
)
export class AppModule  

应用路由模块

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

import  DashboardComponent    from './dashboard.component';
import  HeroesComponent       from './heroes.component';
import  HeroDetailComponent   from './hero-detail.component';

const routes: Routes = [
   path: '', redirectTo: '/dashboard', pathMatch: 'full' ,
   path: 'dashboard',  component: DashboardComponent ,
   path: 'detail/:id', component: HeroDetailComponent ,
   path: 'heroes',     component: HeroesComponent 
];

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

应用组件

import Component from "@angular/core";
/**
 * Created by lukasfrajt on 13.10.16.
 */


@Component(
  selector: 'my-app',
  template: `
    <h1>title</h1>
    <nav>
        <a routerLink="/heroes">Heroes</a>
        <a routerLink="/dashboard">Dashboard</a>
    </nav>    
    <router-outlet></router-outlet>`
)
export class AppComponent 
    title = 'Tour of Heroes'

仪表板组件

import Component from "@angular/core";
import Hero from "./hero";
import HeroService from "./hero.service";
import Router from "@angular/router";


@Component(
  selector: 'my-dashboard',
  moduleId: module.id,
  templateUrl: `dashboard.component.html`
)
export class DashboardComponent 
    heroes: Hero[] = [];

  constructor(private heroService: HeroService , private  router: Router)
  

  
  ngOnInit(): void
    this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1, 5));

  
  gotoDetail(hero: Hero): void 
    let link = ['/detail', hero.id];
    this.router.navigate(link);
  

感谢您的帮助

【问题讨论】：

你会发布你的文件夹结构、index.html和systemjs.config

是的，当然github.com/coklin3107/Angular_Tutorial/tree/master/Fifth如果你能帮助我，我将非常感激@Bean0341

我能找到的只是一些小的语法细节，但我认为没有大到足以导致您的问题，我已将您的所有代码转移到 plunkr 中，它工作正常：/ 你的东西应该改变包括：在仪表板组件中，在调用选择器之前放置你的 module.id。在您的应用程序组件中，在您的选择器之前添加“moduleId：module.id”。同样在您的 index.html 中，将您的 base href 放在 ''

的开头

我照你说的做了，但还是没有：/。也许可以帮助你问题开始时我做了这部分教程重构路由到路由模块angular.io/docs/ts/latest/tutorial/toh-pt5.html，然后重构一切正常，所以也许同样的错误在这里，但我不知道..

老实说，我知道这不是您想听到的，但为什么要制作您的路线模块？只是作为一个组件离开哈哈，把这篇文章留给别人弄清楚:)

【参考方案1】：

我遇到了完全相同的问题，根本原因是代码和角度模块版本不匹配。我的角度模块是 RC5 版本，但我使用商业示例代码。所以我刚刚更新了angular版本，一切正常。

【讨论】：

非常感谢:)

您是如何找到正在使用的 Angular 版本的？我可以找到 npm 版本（4.2.0），但找不到 Angular（除非我对 npm 的含义有根本的误解，这当然是可能的 xD）

【参考方案2】：

在教程的“路由”部分进行到一半时，我遇到了一个类似的错误，最终是由于缺少括号，而不是导入 DashboardComponent 造成的。可能只是“我”的错误，尽管您从未被指示在教程中添加该导入语句，因此其他人也会遇到此问题并非不可想象。