Topic: Angular ASP.NET Core Pro Issues

ogrodski free asked 3 years ago


I've completed the installation instructions as per the ASP.NET CORE PRO tab on https://mdbootstrap.com/docs/angular/getting-started/net-core-integration/.

I have an existing .Net Core project so I started at Step 18. The installation appears to go okay, but I'm seeing strange behavior on my pages.

  1. On the home page, the Carousel displays on top of the Navbar.
  2. On other pages, the Navbar displays over the page text.
  3. The font awesome icons (social icons in Footer) don't display.

Before purchasing Pro, I successfully installed the free version into a copy of the same .Net Core project and everything worked. There are some minor differences in the install instructions between the free and Pro versions.

Any ideas on what would cause this behavior?

Thanks,

Al


Damian Gemza staff answered 3 years ago


Dear Al,

In your application, you have duplicated two MDB Angular products - Free and Pro.

Please decide, which you want to use, and use it consequently.

You shouldn't import Bootstrap from angular-bootstrap-md, if you're using ng-uikit-pro-standard. Please import the bootstrap styles from ng-uikit-pro-standard, or from 'bootstrap'.

If you're using the latest version of MDB Angular (you're using it), you have to use the Font Awesome 5 library (FA5 dependency is called @fortawesome/fontawesome-free).

Please remove the font-awesome and angular-font-awesome, and instead of it, just use the @fortawesome/fontawesome-free (remember to import it in angular.json how I showed you previously).

Best Regards,

Damian


ogrodski free answered 3 years ago


I cleaned up my project as directed an Font Awesome is working correctly.

I still had the issue with the Navbar showing behind the Carousal. I had the Navbar in a element which seemed to cause the issues. I removed the element and the Navbar is fine.

Thanks for all your help.

Al


ogrodski free answered 3 years ago


I followed the guide for MDB Pro for ASP.NET Core. I started on Step 18 because I had an existing project.

I did have Bootstrap previously installed, as well as, Angular Font Awesome. It doesn't look like MDB Pro for Angular uses the Angular version of Font Awesome. If that is true, would it be better to include Angular Font Awesome in your Angular version?

I don't have node_modules/@fortawesome/fontawesome-free.

I have either node_modules/font-awesome/scss or node_modules/angular-font-awesome.

Here is my app.module.ts file:

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { BlogComponent } from './blog/blog.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { DragDropComponent } from './dragdrop/dragdrop.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    FooterComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    BlogComponent,
    CounterComponent,
    FetchDataComponent,
    DragDropComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    DragDropModule,
    AngularFontAwesomeModule,
    MDBBootstrapModulesPro.forRoot(),
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'about', component: AboutComponent },
      { path: 'contact', component: ContactComponent },
      { path: 'blog', component: BlogComponent },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'dragdrop', component: DragDropComponent },
    ])
  ],
  providers: [
    Title,
    MDBSpinningPreloader
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my package.json file:

{
  "name": "X.Web.Spa",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run X.Web.Spa:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "7.2.5",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "7.2.5",
    "@angular/compiler": "7.2.5",
    "@angular/core": "7.2.5",
    "@angular/forms": "7.2.5",
    "@angular/http": "7.2.5",
    "@angular/platform-browser": "7.2.5",
    "@angular/platform-browser-dynamic": "7.2.5",
    "@angular/platform-server": "7.2.5",
    "@angular/router": "7.2.5",
    "@nguniversal/module-map-ngfactory-loader": "6.0.0",
    "@types/chart.js": "^2.7.46",
    "angular-bootstrap-md": "^7.4.2",
    "angular-font-awesome": "^3.1.2",
    "angular5-csv": "^0.2.11",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.7.3",
    "core-js": "^2.6.5",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "3.3.1",
    "ng-uikit-pro-standard": "git+https://oauth2:X@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "popper.js": "^1.14.7",
    "rxjs": "^6.4.0",
    "screenfull": "^3.3.3",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^7.3.5",
    "@angular/compiler-cli": "7.2.5",
    "@angular/language-service": "^7.2.8",
    "@types/jasmine": "^2.8.16",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "typescript": "~3.2.4"
  },
  "optionalDependencies": {
    "node-sass": "^4.9.3",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

Here are my styles:

    "styles": [
      "node_modules/font-awesome/scss/font-awesome.scss",
      "node_modules/bootstrap/scss/bootstrap.scss",
      "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
      "src/styles.scss"
    ],

I have also tried node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss in my Styles instead of node_modules/bootstrap/scss/bootstrap.scss.

Thanks,

Al


Damian Gemza staff answered 3 years ago


Dear ogrodski,

Did you follow the guide for integrating MDB Pro or Free with the ASP.Net?

Could you please show me your app.module.ts and package.json files?

If you're using the 7.4.2 version of MDB Angular, you have to change the font awesome library, from font-awesome to @fortawesome/fontawesome-free, and in the angular.json file you have to modify style imports.

Those styles should work with MDB 7.4.2:

"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.scss"
],

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.2
  • Device: laptop
  • Browser: chrome
  • OS: windows 7
  • Provided sample code: No
  • Provided link: Yes