1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Lightbox does not exist

tommyw priority asked 6 years ago

Hi I'm back with the problem that Lightbox does not exist. I downloaded the latest 6.2.5 file from my orders, added
import { WavesModule, LightBoxModule } from 'ng-uikit-pro-standard';
and LightBoxModule does not exist in that file.
without the. import nothing happens at all.
app module
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';
import { WavesModule, LightBoxModule } from 'ng-uikit-pro-standard';
import { MDBSpinningPreloader, MDBBootstrapModulesPro, ToastModule } from 'ng-uikit-pro-standard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
ToastModule.forRoot(),
MDBBootstrapModulesPro.forRoot(),
AgmCoreModule.forRoot({
// https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
apiKey:'Your_api_key'
})
],
providers: [MDBSpinningPreloader],
bootstrap: [AppComponent],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }
app component
import { Component } from '@angular/core';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title='app';
images = [
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg", description: "Image 1" },
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg", description: "Image 2" },
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg", description: "Image 3" },
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg", description: "Image 4" },
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg", description: "Image 5" },
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg", description: "Image 6" },
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg", description: "Image 7" },
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg", description: "Image 8" },
{ img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg", description: "Image 9" }
]
}
app component html
<!-- Start your project here-->
<div style="height: 100vh">
<divclass="flex-center flex-column">
<h1class="animated fadeIn mb-4">Material Design for Bootstrap (Angular)</h1>
<h5class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>
<h6class="animated fadeIn mb-3">Start browsing <ahref="https://mdbootstrap.com/angular">documentation</a>.</h6>
<pclass="animated fadeIn text-muted">MDB Team</p>
</div>
</div>
<!-- /Start your project here-->
<div class="row">
<mdb-image-modal[modalImages]="images"type="margin"></mdb-image-modal>
</div>
package json
{
"name": "ng-uikit-pro-standard-lib",
"version": "6.2.5",
"license": "SEE LICENSE IN <license.pdf>",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"remove-demo-unix": "rm -rf projects && rm angular.json && mv angular-clean.json angular.json",
"remove-demo-windows": "rmdir /s /q projects && del angular.json && ren angular-clean.json angular.json"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.3",
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"@angular/platform-server": "^6.0.0",
"angular5-csv": "~0.2.10",
"ngx-facebook": "^2.4.0",
"chart.js": "2.5.x",
"classlist.js": "1.1.x",
"core-js": "2.4.x",
"easy-pie-chart": "2.1.x",
"font-awesome": "4.7.x",
"hammerjs": "2.0.x",
"jarallax": "^1.10.3",
"ng-html-util": "1.0.x",
"ng-uikit-pro-standard": "ng-uikit-pro-standard-6.2.5.tar",
"rxjs": "^6.0.0",
"screenfull": "3.3.x",
"smoothscroll-polyfill": "0.3.x",
"web-animations-js": "2.3.x",
"zone.js": "0.8.x"
},
"devDependencies": {
"@angular/cli": "^6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.85",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.7.2",
"webpack": "^4.3.0",
"@angular-devkit/build-angular": "~0.5.0"
}
}
Any clue?

Damian Gemza staff answered 6 years ago

Dear @tommyw 

Please note, that the MDB Angular Admin Template doesn't have a Lightbox, so if you copy source files from Admin Template to your application, there won't be a Lightbox.

About the problem with accessing the GitLab, please send an email to my colleague Bartek. He is responsible for the GitLab server. You can reach him here: b.malanowski@mdbootstrap.com

Best Regards,

Damian

tommyw priority commented 6 years ago

Aha perfect! Now I know. I will contact Bartek to solve this. Big thanks!

Damian Gemza staff answered 6 years ago

Dear Tommyw, There are a few strange things in code which you have provided: 1) Why you're trying to build your app on our ng-uikit-pro-standard-compile repository? Apps shouldn't be built on this repo, because there's a lot of unnecessary things for the production application. This repo is only for customizing and building ng-uikit-pro-standard archive. 2) If you want to use ng-uikit-pro-standard-compile repository, please import MDBBootstrapModulesPro and other modules not from 'ng-uikit-pro-standard' but from './../lib/ng-uikit-pro-standard'. 3) You don't have to import WavesModule, LightBoxModule, and MDBBootstrapModulesPro modules in one app.module.ts file. If you want to use our framework, you have to import only the one module - MDBBootstrapModulesPro, and that's all. If you want to use only a few specific modules, please import them instead of importing them and the main MDB module. 4) In the package.json file that's strange. Why you have changed the "ng-uikit-pro-standard" line from 
"ng-uikit-pro-standard": "file:ng-uikit-pro-standard-6.2.6.tgz",
to
"ng-uikit-pro-standard": "ng-uikit-pro-standard-6.2.5.tar",
I don't know why you have done this.   Could you please try to reproduce your problem on a fresh application in which you have installed ng-uikit-pro-standad library? Please use our 5min-quickstart guide to achieve this. Best Regards, Damian

tommyw priority commented 6 years ago

Dear, thanks. Well, I tried to add the 

"ng-uikit-pro-standard": "git+https://oauth2:xxxxxxxxxxx@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
 
using the instructions for the oauth2 but it always fails with auth error of some reason. Then I tried it today again and now I'm getting to the point I need this to work. Well, your certificate has expired so I cannot reach that far even.
6.2.5 and 6.2.6. 6.3.0 and now 7.0.0. - well I updated to the latest code and took the package.json content from your MDBAdmin template I use as I cannot access the other normal Pro version I also purchased and asked to get an oath2 password for that soon a year ago with no luck.
All works perfect - but this lightbox does not - strange it's the only thing not working! Not in my admin website and not in the normal client website. IT DOES work in my other OLD websites running on 5.2.9, but you used another distribution method then.
I made an empty project but I have to access the PRO version so no luck doing anything for now.
For now I'm totally stuck.

tommyw priority commented 6 years ago

So. I presume all activities I tried are just to replace the GIT that does not work and that runs me into problems. I cannot use the 5 mins tutorial as I need the pro version...

Please advise.

tommyw priority commented 6 years ago

Now the certificate seems to be solved, I fixed an auth token per instructions and get 404. I presume this is caused by me having bought both the angular admin and the pro package, same account and orders showing up, but I presume something is wrong somewhere... As I cannot download the framework, not progressing.
Write
Create snippet
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
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No
Tags
About author
tommyw
66Support score
4Questions 4Answers 0Snippets