Question

我正在创建Angular 4应用程序并尝试实现基本路由。我的应用程序编译正常，但我的路由无法正常工作

我收到错误Component HomeComponent不是任何NgModule的一部分，或者模块尚未导入到您的模块中。

我还没有配置路由器链接，但是假设路由应该在浏览器中的请求中起作用。

当我点击主页时，home.component.html的内容应该加载类似点击编辑，新的，电影应分别做同样的

有人告诉我，我的进口是否出错。具体来说

电影，家庭，编辑＆amp;新

这是我文件夹的结构

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {FormsModule} from '@angular/forms';
    import {HttpModule} from '@angular/http'
    import { AppComponent } from './app.component';
    import { NavbarComponent } from './navbar/navbar.component';
    import { TopbarComponent } from './topbar/topbar.component';
    import { FooterbarComponent } from './footerbar/footerbar.component';
    import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
    import {AppRoutingModule} from './approuting.module';
    import {HomeModule} from './home/home.module';
    import {MovieModule} from './movie/movie.module';
    import { MRDBCommonService } from './shared/services/mrdb.common.service';
    import { NotFoundComponent } from './not-found/not-found.component';
    import { SharedModule } from './shared/shared.module';


    @NgModule({
      declarations: [
        AppComponent,
        FooterbarComponent,
        TopbarComponent,
        NavbarComponent,
        NotFoundComponent  
      ],
      imports: [
        BrowserModule,
        HttpModule,
        SharedModule,
        AppRoutingModule
      ],
      providers: [MRDBGlobalConstants,
                  MRDBCommonService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

approuting.module.ts

import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {MovieComponent} from './movie/movie.component';
import {HomeComponent}  from '../app/home/home.component';
import {NotFoundComponent} from './not-found/not-found.component';
import {NewmovieComponent} from './movie/new/newmovie.component';
import {EditmovieComponent} from './movie/edit/editmovie.component';

export const routes: Routes = [
{path : '', component : HomeComponent},
{path: 'movie', component : MovieComponent},
{path : 'new' , component : NewmovieComponent },
{path : 'edit' , component : EditmovieComponent },
{path: '**',component : NotFoundComponent}

];

@NgModule({
     imports: [RouterModule.forRoot(routes,{useHash: true})],
     exports: [RouterModule]

})

export class AppRoutingModule{}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

Home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

在app.module.ts中的导入中添加 HomeModule

imports: [
        BrowserModule,
        HttpModule,
        SharedModule,
        HomeModule,
        AppRoutingModule
      ],

Answer 2

创建第一个SharedHomeComponent.ts

import { HomeComponent } from './header/header.component';
import { NgModule,OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    @NgModule({
        imports: [
            CommonModule,RouterModule
        ],
        exports: [HomeComponent],
        declarations: [HomeComponent]
    })
    export class SharedHomeComponent implements OnInit {
        ngOnInit(): void {
            //throw new Error("Method not implemented.");
        }
      constructor() {
       }
    }

然后，只要您想使用HomeComponent，就可以将其导入与组件相关的模块，例如 app.module.ts 或其他模块。然后，您可以将主组件选择器用于多个模块组件。

Answer 3

你必须添加所有＆＃34; AlabalaModule＆＃34;进入进口

 imports: [
    BrowserModule,
    HttpModule,
    SharedModule,
    AppRoutingModule,
    AlabalaModule
  ],

你也需要像tis这样的空间 - ＆gt; {Alabala}，我很确定{Alabala}是无效的语法

角度路由无法正常工作。投掷错误组件不是模块的一部分

3 个答案: