Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: 'mdb-navbar' is not a known element

patricio.ortiz@daltum.mx free asked 4 years ago


Expected behavior modulo it is not recognized

Actual behavior 'mdb-navbar' is not a known element: 1. If 'mdb-navbar' is an Angular component, then verify that it is part of this module. 2. If 'mdb-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Resources (screenshots, code snippets etc.) angular.json

       {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "Logistics.Web": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "prefix": "app",
          "schematics": {},
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "progress": false,
                "extractCss": true,
                "outputPath": "dist",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [ "src/assets" ],
                "styles": [
                  "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
                  "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
                  "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
                  "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
                  "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
                  "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
                  "src/styles.css"
                ],
                "scripts": [
                  "node_modules/jquery/dist/jquery.min.js",
                  "node_modules/chart.js/dist/Chart.js",
                  "node_modules/easy-pie-chart/dist/easypiechart.js",
                  "node_modules/screenfull/dist/screenfull.js",
                  "node_modules/hammerjs/hammer.min.js"
                ]
              },
              "configurations": {
                "production": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "aot": true,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true
                }
              }
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                "browserTarget": "Logistics.Web:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "Logistics.Web:build:production"
                }
              }
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "Logistics.Web:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.spec.json",
                "karmaConfig": "src/karma.conf.js",
                "styles": ["src/styles.css"],
                "scripts": [],
                "assets": ["src/assets"]
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
                "exclude": ["**/node_modules/**"]
              }
            },
            "server": {
              "builder": "@angular-devkit/build-angular:server",
              "options": {
                "outputPath": "dist-server",
                "main": "src/main.ts",
                "tsConfig": "src/tsconfig.server.json"
              },
              "configurations": {
                "dev": {
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "namedChunks": false,
                  "extractLicenses": true,
                  "vendorChunk": true
                },
                "production": {
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "namedChunks": false,
                  "extractLicenses": true,
                  "vendorChunk": false
                }
              }
            }
          }
        },
        "Logistics.Web-e2e": {
          "root": "e2e/",
          "projectType": "application",
          "architect": {
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "Logistics.Web:serve"
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": "e2e/tsconfig.e2e.json",
                "exclude": ["**/node_modules/**"]
              }
            }
          }
        }
      },
      "defaultProject": "Logistics.Web"
    }

package.json
{
  "name": "logistics.web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run Logistics.Web:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.5",
    "@angular/cdk": "^9.1.1",
    "@angular/common": "~9.0.5",
    "@angular/compiler": "~9.0.5",
    "@angular/core": "~9.0.5",
    "@angular/forms": "~9.0.5",
    "@angular/platform-browser": "~9.0.5",
    "@angular/platform-browser-dynamic": "~9.0.5",
    "@angular/platform-server": "~9.0.5",
    "@angular/router": "~9.0.5",
    "@fortawesome/fontawesome-free": "^5.6.3",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.5.0",
    "core-js": "^3.3.3",
    "easy-pie-chart": "2.1.x",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-9.3.1.tgz",
    "oidc-client": "^1.9.1",
    "popper.js": "^1.16.0",
    "rxjs": "~6.5.4",
    "screenfull": "3.3.x",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.0",
    "@angular/cli": "^9.1.0",
    "@angular/compiler-cli": "~9.0.5",
    "@angular/language-service": "~9.0.5",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^7.0.0",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.1",
    "typescript": "~3.7.5"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { DropdownModule, MDBSpinningPreloader, MDBBootstrapModulesPro, ToastModule } from 'ng-uikit-pro-standard'

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ApiAuthorizationModule,
    DropdownModule.forRoot(),
    ToastModule.forRoot(),
    MDBBootstrapModulesPro.forRoot(),
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthorizeGuard] },
    ])
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }, MDBSpinningPreloader
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

enter image description here


Arkadiusz Idzikowski staff commented 4 years ago

Please try to reinstall your dependencies and make sure that the 'ng-uikit-pro-standard' is installed correctly and is available in the node_modules folder.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No