Я использую angular9, я создаю панель навигации и ползунок навигации. Когда я запускаю свой шаблон, он показывает все элементы моей панели инструментов, но не может показать мне панель навигации и ползунок навигации, я проверяю свой код и проверьте мои ошибки в консоли, но ничего не отображается (ошибка) Я не знаю, как я могу это сделать. С моей точки зрения, я проверяю весь свой код, но я не уверен, где я делаю ошибки
nav.ts
import { INavData } from '@coreui/angular';
export const navItems: INavData[] = [
{
name: 'Login',
url: '/login',
icon: 'icon-speedometer',
badge: {
variant: 'info',
text: 'NEW'
}
},
{
title: true,
name: 'Theme'
},
{
name: 'Colors',
url: '/theme/colors',
icon: 'icon-drop'
},
{
name: 'Typography',
url: '/theme/typography',
icon: 'icon-pencil'
},
{
title: true,
name: 'Components'
},
{
name: 'Base',
url: '/base',
icon: 'icon-puzzle',
children: [
{
name: 'Cards',
url: '/base/cards',
icon: 'icon-puzzle'
},
{
name: 'Carousels',
url: '/base/carousels',
icon: 'icon-puzzle'
},
{
name: 'Collapses',
url: '/base/collapses',
icon: 'icon-puzzle'
},
{
name: 'Forms',
url: '/base/forms',
icon: 'icon-puzzle'
},
{
name: 'Navbars',
url: '/base/navbars',
icon: 'icon-puzzle'
},
{
name: 'Pagination',
url: '/base/paginations',
icon: 'icon-puzzle'
},
{
name: 'Popovers',
url: '/base/popovers',
icon: 'icon-puzzle'
},
{
name: 'Progress',
url: '/base/progress',
icon: 'icon-puzzle'
},
{
name: 'Switches',
url: '/base/switches',
icon: 'icon-puzzle'
},
{
name: 'Tables',
url: '/base/tables',
icon: 'icon-puzzle'
},
{
name: 'Tabs',
url: '/base/tabs',
icon: 'icon-puzzle'
},
{
name: 'Tooltips',
url: '/base/tooltips',
icon: 'icon-puzzle'
}
]
},
{
name: 'Buttons',
url: '/buttons',
icon: 'icon-cursor',
children: [
{
name: 'Buttons',
url: '/buttons/buttons',
icon: 'icon-cursor'
},
{
name: 'Dropdowns',
url: '/buttons/dropdowns',
icon: 'icon-cursor'
},
{
name: 'Brand Buttons',
url: '/buttons/brand-buttons',
icon: 'icon-cursor'
}
]
},
{
name: 'Charts',
url: '/charts',
icon: 'icon-pie-chart'
},
{
name: 'Icons',
url: '/icons',
icon: 'icon-star',
children: [
{
name: 'CoreUI Icons',
url: '/icons/coreui-icons',
icon: 'icon-star',
badge: {
variant: 'success',
text: 'NEW'
}
},
{
name: 'Flags',
url: '/icons/flags',
icon: 'icon-star'
},
{
name: 'Font Awesome',
url: '/icons/font-awesome',
icon: 'icon-star',
badge: {
variant: 'secondary',
text: '4.7'
}
},
{
name: 'Simple Line Icons',
url: '/icons/simple-line-icons',
icon: 'icon-star'
}
]
},
{
name: 'Notifications',
url: '/notifications',
icon: 'icon-bell',
children: [
{
name: 'Alerts',
url: '/notifications/alerts',
icon: 'icon-bell'
},
{
name: 'Badges',
url: '/notifications/badges',
icon: 'icon-bell'
},
{
name: 'Modals',
url: '/notifications/modals',
icon: 'icon-bell'
}
]
},
{
name: 'Widgets',
url: '/widgets',
icon: 'icon-calculator',
badge: {
variant: 'info',
text: 'NEW'
}
},
{
divider: true
},
{
title: true,
name: 'Extras',
},
{
name: 'Pages',
url: '/pages',
icon: 'icon-star',
children: [
{
name: 'Login',
url: '/login',
icon: 'icon-star'
},
{
name: 'Register',
url: '/register',
icon: 'icon-star'
},
{
name: 'Error 404',
url: '/404',
icon: 'icon-star'
},
{
name: 'Error 500',
url: '/500',
icon: 'icon-star'
}
]
},
{
name: 'Disabled',
url: '/dashboard',
icon: 'icon-ban',
badge: {
variant: 'secondary',
text: 'NEW'
},
attributes: { disabled: true },
},
{
name: 'Download CoreUI',
url: 'http://coreui.io/angular/',
icon: 'icon-cloud-download',
class: 'mt-auto',
variant: 'success',
attributes: { target: '_blank', rel: 'noopener' }
},
{
name: 'Try CoreUI PRO',
url: 'http://coreui.io/pro/angular/',
icon: 'icon-layers',
variant: 'danger',
attributes: { target: '_blank', rel: 'noopener' }
}
];
app.route.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// Import Containers
import { DefaultLayoutComponent } from './containers';
import { P404Component } from './views/error/404.component';
import { P500Component } from './views/error/500.component';
import { DashboardComponent } from './views/dashboard/dashboard.component';
import { RegisterComponent } from './views/register/register.component';
import { LoginComponent } from './views/login/login.component';
export const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full',
},
{
path: '404',
component: P404Component,
data: {
title: 'Page 404'
}
},
{
path: '500',
component: P500Component,
data: {
title: 'Page 500'
}
},
{
path: 'login',
component: LoginComponent,
data: {
title: 'Login Page'
}
},
{
path: 'dashboard',
component: DashboardComponent,
data: {
title: 'Dashboard Page'
}
},
{
path: 'register',
component: RegisterComponent,
data: {
title: 'Register Page'
}
},
{
path: '',
component: DefaultLayoutComponent,
data: {
title: 'Home'
},
children: [
{
path: 'base',
loadChildren: () => import('./views/base/base.module').then(m => m.BaseModule)
},
{
path: 'buttons',
loadChildren: () => import('./views/buttons/buttons.module').then(m => m.ButtonsModule)
},
{
path: 'charts',
loadChildren: () => import('./views/chartjs/chartjs.module').then(m => m.ChartJSModule)
},
{
path: 'dashboard',
loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule)
},
{
path: 'icons',
loadChildren: () => import('./views/icons/icons.module').then(m => m.IconsModule)
},
{
path: 'notifications',
loadChildren: () => import('./views/notifications/notifications.module').then(m => m.NotificationsModule)
},
{
path: 'theme',
loadChildren: () => import('./views/theme/theme.module').then(m => m.ThemeModule)
},
{
path: 'widgets',
loadChildren: () => import('./views/widgets/widgets.module').then(m => m.WidgetsModule)
}
]
},
{ path: '**', component:P404Component}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
import { AppComponent } from './app.component';
// Import containers
import { DefaultLayoutComponent } from './containers';
import { P404Component } from './views/error/404.component';
import { P500Component } from './views/error/500.component';
import { LoginComponent } from './views/login/login.component';
import { RegisterComponent } from './views/register/register.component';
const APP_CONTAINERS = [
DefaultLayoutComponent
];
import {
AppAsideModule,
AppBreadcrumbModule,
AppHeaderModule,
AppFooterModule,
AppSidebarModule,
} from '@coreui/angular';
// Import routing module
import { AppRoutingModule } from './app.routing';
// Import 3rd party components
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ChartsModule } from 'ng2-charts';
import { FormsModule } from '@angular/forms';
import { DashboardComponent } from './views/dashboard/dashboard.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
AppAsideModule,
AppBreadcrumbModule.forRoot(),
AppFooterModule,
AppHeaderModule,
AppSidebarModule,
PerfectScrollbarModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
FormsModule,
HttpClientModule,
ChartsModule
],
declarations: [
AppComponent,
...APP_CONTAINERS,
P404Component,
P500Component,
LoginComponent,
DashboardComponent,
RegisterComponent
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }
angular. json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ng": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets"
],
"styles": [
"node_modules/@coreui/icons/css/coreui-icons.css",
"node_modules/flag-icon-css/css/flag-icon.css",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/simple-line-icons/css/simple-line-icons.css",
"src/scss/style.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"./node_modules"
]
},
"scripts": [
"node_modules/chart.js/dist/Chart.min.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ng:build"
},
"configurations": {
"production": {
"browserTarget": "ng:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ng:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/chart.js/dist/Chart.min.js"
],
"styles": [
"node_modules/flag-icon-css/css/flag-icon.css",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/simple-line-icons/css/simple-line-icons.css",
"src/scss/style.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"./node_modules"
]
},
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ng-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "ng:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ng",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
},
"cli": {
"analytics": false
}
}