错误错误:未捕获(承诺):错误:模板解析错误:'app-deals'不是已知元素

时间:2018-07-06 05:19:47

标签: angular angular-ui-router angular5 angular2-routing

我刚开始发球时就遇到了这个错误。我不知道在哪里添加。

enter image description here

app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.module.ts

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

const routes: Routes = [
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

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

pages.module.ts

import { NgModule } from '@angular/core';

import { PagesComponent } from './pages.component';
import { PagesRoutingModule } from './pages-routing.module';

import { HomeModule } from './home/home.module';
import {  DealsModule }from './home/deals/deals.module';

const PAGES_COMPONENTS = [
  PagesComponent,
];

@NgModule({
  imports: [
    PagesRoutingModule,
    HomeModule,
    DealsModule
  ],
  declarations: [
    ...PAGES_COMPONENTS,
  ],
})
export class PagesModule {
}

pages.routing.modul.ts

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

    import { PagesComponent } from './pages.component';
    import { HomeComponent } from './home/home.component';

    const routes: Routes =  [{
        path: '',
        component: PagesComponent,
        children: [{
          path: 'home',
          component: HomeComponent,
        }, {
          path: '',
          redirectTo: 'home',
          pathMatch: 'full',
        },{
          path:'deals',
          redirectTo: 'deals',
          loadChildren:'./home/deals/deals.module#DealsModule',
        }],
      }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule { }

home.module.ts

import { NgModule } from '@angular/core';

import { HomeComponent } from './home.component';

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

home.component.ts

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

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

home.component.html

<h1>haiiiiiiiiiii</h1>
<app-deals></app-deals>

deals.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

交易模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DealsComponent } from './deals.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [DealsComponent]
})
export class DealsModule { }

deals.html

<p>
  deals works!
</p>

实际上,我是角度的新手,我已经更新了代码。

今天我已经尝试过路由概念

1)在我的 app.routing 中,我具有链接页面模块 2)在页面模块中,我提到了我的交易模块,并且我在 pages.routing 中也很喜欢,并且还提到了Home模块作为默认模块,并且我已经链接了我的* *交易模块**那里我不知道该怎么做。

所以请告诉我这样做

0 个答案:

没有答案