Angular ASP.NET Core Pro Issues

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

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

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