Угловая маршрутизация не работает. Компонент выдачи ошибки не является частью модуля

Я создаю приложение Angular 4 и пытаюсь реализовать базовую маршрутизацию. Мое приложение компилируется нормально, но моя маршрутизация не работает

Я получаю сообщение об ошибке Компонент HomeComponent не является частью какого-либо NgModule или модуль не был импортирован в ваш модуль.

Мне еще предстоит настроить маршрутизаторы, но я предполагаю, что маршрутизация должна работать из запросов в браузере.

Когда я нажимаю на дом, содержимое home.component.html должно загружаться аналогично щелчку по редактированию, новому, фильму должно делать то же самое соответственно.

Может ли кто-нибудь сказать, если я ошибаюсь в своем импорте. Конкретно

с фильмом, домом, редактированием и новым

Вот структура моих папок

введите здесь описание изображения

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 { }

aprouting.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() {
  }

}

angular angular2-routing angular4-router
person Tom    schedule 07.11.2017    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Добавьте HomeModule в импорт в вашем app.module.ts.

imports: [
        BrowserModule,
        HttpModule,
        SharedModule,
        HomeModule,
        AppRoutingModule
      ],
person Sajeetharan    schedule 07.11.2017

arrow_upward
1
arrow_downward

Создайте первый 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 или другой модуль. Затем вы можете использовать селектор домашних компонентов для нескольких компонентов модуля.

person Sher Singh    schedule 26.12.2019

arrow_upward
0
arrow_downward

Вы должны добавить все "AlabalaModule" в импорт

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

также вам нужны пробелы, такие как tis -> {Alabala}, я уверен, что {Alabala} недопустимый синтаксис

person FilipYordanov    schedule 07.11.2017