КАК ИСПРАВИТЬ Uncaught Error: Ошибки разбора шаблона: 'nb-sidebar' не является известным элементом: - PullRequest
Новая
       38

КАК ИСПРАВИТЬ Uncaught Error: Ошибки разбора шаблона: 'nb-sidebar' не является известным элементом:

0 голосов
/ 24 мая 2019

Я - НОВЫЙ для туманности, есть какие-то другие документы, основанные на туманности, в деталях Я уже пробовал вставлять компонент в модуль Я СОЗДАЛ КОМПОНЕНТ SIDEBAR С МОДУЛЕМ SIDEBAR

App.module 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
// import { SideBarComponent } from './side-bar/side-bar.component';
import { SideBarModule } from './side-bar/side-bar.module';

@NgModule({
  declarations: [
    AppComponent,
    // SideBarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    SideBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html 

<nb-layout>

  <nb-layout-header fixed>
  <!-- Insert header here -->
  <a routerLink="/side-bar" routerLinkActive="active">SIDEBAR</a>

  </nb-layout-header>

  <nb-layout-column>

    <!--The content below is only a placeholder and can be replaced.-->


  </nb-layout-column>

  <nb-layout-footer fixed>
  <!-- Insert footer here -->
  </nb-layout-footer>

</nb-layout>

sidebar.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SideBarComponent } from './side-bar.component';
import { NbLayoutModule } from '@nebular/theme';
// import { SideBarService } from '../services/side-bar.service';



@NgModule({
  declarations: [SideBarComponent],
  imports: [
    CommonModule,
    NbLayoutModule,
  ]
})
export class SideBarModule { }

sidebar.comonent.ts 

import { Component, OnInit } from '@angular/core';
import {MatSidenavModule} from '@angular/material/sidenav';
import { NbSidebarService } from '@nebular/theme';

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.scss']
})
export class SideBarComponent implements OnInit {

  constructor(private sidebarService:NbSidebarService){}
ngOnInit(){

}
toggle() {
  this.sidebarService.toggle(true);
  return false;
}

  }

sidebar.html 

<nb-layout>

  <nb-layout-header subheader>
    <a href="#" (click)="toggle()"><i class="nb-menu"></i></a>
  </nb-layout-header>

  <nb-sidebar></nb-sidebar>

  <nb-layout-column>Layout Content</nb-layout-column>
</nb-layout>

сервис 

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

@Injectable({
  providedIn: 'root'
})
export class SideBarService {

  constructor() { }
}

я ожидаю запустить программу в качестве боковой панели

как исправить

Uncaught Error: Ошибки разбора шаблона: 'nb-sidebar' не является известным элементом: 1. Если 'nb-sidebar' является угловым компонентом, то убедитесь, что он является частью этого модуля. 2. Если 'nb-sidebar' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение. (»

[ОШИБКА ->]

Содержание макета "): ng: ///SideBarModule/SideBarComponent.html@6: 2

Ответы [ 3 ]

0 голосов
/ 24 мая 2019

попробуйте это 

// sidebar.module.
import { NbSidebarService } from '@nebular/theme';

// also import
  imports: [
    NbSidebarService 
  ]
})
0 голосов
/ 24 мая 2019

Вам также необходимо импортировать NbSidebarModule в свой AppModule и SideBarModule

app.module.ts 

import {NbSidebarModule} from '@nebular/theme'

@NgModule({
  //...
  imports: [
    //...
    SideBarModule,
    NbSidebarModule.forRoot() //<== add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

sidebar.module.ts 

import {NbSidebarModule} from '@nebular/theme'

@NgModule({
  //..
  imports: [
    NbSidebarModule //<== add this
  ]
})
export class SideBarModule { }
0 голосов
/ 24 мая 2019

Попробуйте импортировать SideBarModule в sidebar.module.ts вместо App.module

...