Runtime errors

1. An interface may only extend a class or another interface

This error occurs when the Angular/Ionic application's typescript version is older then the minimum required by the Mobiscroll. Mobiscroll will need at least typescript 2.2.0 or newer.

Solution: Update typescript version: npm install typescript@latest --save-dev 

2. Angular template parse errors:

  • Can't bind to 'mbsc-options'  since it isn't a known property of 'input' 
  • 'mbsc-calendar' is not a known element
  • There is no directive with "exportAs" set to mobiscroll

The above errors are usually occurring when the MbscModule is not exported by the *.module.ts file. Most likely the MbscModule import is missing or is not correct  in the module file.

Solution: Make sure that the Mobiscroll is installed and the MbscModule is loaded correctly in the module.

Note:  If you are using lazy loading, the MbscModule has to be imported into every module separately.

3. Mobiscroll trial not loaded, Please check your connection.

This error appears in an alert when the the Mobiscroll trial doesn't have access to the internet. It usually occurs when the application is deployed to a device which is not connected. The trial needs an active internet connection to work.

Solution: Make sure to have an active internet connection during trial and your project's configuration doesn't block the Mobiscroll external API call.

Make sure that the url is white-listed in the CSP settings and in case of Cordova/Phonegap applications added to the cordova-plugin-whitelist plugin's  settings.

Note:  This is not a requirement of the licensed version. You can use the non-trial products offline.

Learn more about the limitations of the trial in this article.

4. A Specific Mobiscroll component is not working:

Here are the error messages with a range component example:

  • Plain Javascript: mobiscroll.range is not a function
  • jQuery:  $(...).mobiscroll(...).range is not a function
  • Angular 2+/ Ionic 2+ : mbsc-range' is not a known element
  • AngularJs/Ionic 1: [$injector:modulerr] 

The above errors are occuring when the component was downloaded form the Download builder and the specific component wasn't included into the downloaded package.

Solution: Download resources again and update your local package. Make sure to check all the components you need in the 1. Choose Components section. Updating the local Mobiscroll package should solve the problem.

5.  Components don’t look like expected. Styling is not applied.

Here is how a Calendar and Date component looks like without styles:

A few things to check to solve this problem:

  • Check if you passed the correct theme name to the theme option

If there is a typo in the theme name that could cause this problem.  If you are using a custom theme, make sure that you pass the generated UniqueID name to the components. The UniqueID will be auto-generated after you named your custom theme on the Theme builder.

  • If the theme name is correct then check if the Mobiscroll css/scss is correctly loaded to your app.

This might be a project related manner, but here are some tips you might check. In case of:

    - Ionic 4/ Angular cli based app  make sure that the css is loaded into the angular.json file's styles  section. Or if you use scss then check if  there is a mobiscroll scss import in the global.scss. In case of an Angular app you should check the styles.scss  file for scss import.

    - Ionic 3 make sure that the css is included into the index.html  and an Ionic_copy  section is specified in the package.json  file which describes where to copy the css form the node_modules. Or if you use scss then check if  there is a mobiscroll import in the varible.scss file.

    - JavaScript, jQuery, AngularJs  make sure that the css is loaded in the index.html  and there isn't any css related console errors.

  • Check if the specific theme is loaded into your Mobiscroll package

This section is only valid for the licensed users because only they can use the Download Builder to specify which Mobiscroll resource would they want to use. (The trial users have all the resources included in their packages)
There might be a chance that you missed including the specific theme when you created your Mobiscroll package. 

Solution: Download resources again and update your local package. Make sure to check all the themes you need in the 2. Choose Themes section. Updating the local Mobiscroll package should solve the problem.

There are differences on the package update process in case of React, Angular 2+ / Ionic 2+ frameworks. You'll need to use the Mobiscroll CLI's config  command  with the --no-npm  flag. You should be prompted with a detailed step by step install/update guide on the download page after you downloaded your new package.

In case of other frameworks just simply updating the local Mobiscroll files should solve the problem.

6. No provider for Jsonp

If you are facing with this error message, here's the solution: 

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AboutPage -> Jsonp]: 
StaticInjectorError(Platform: core)[AboutPage -> Jsonp]:
NullInjectorError: No provider for Jsonp!

It's because some of our demos use remote API for loading external data. In this case make sure to load the Jsonp module in your app's module file.


import { JsonpModule } from '@angular/http';
// ...
 imports: [
   // ...
   // ...
 // ...
// ...

Note: This issue could come up when you use Angular or Ionic.

7. Content Security Policy errors

  • Refused to load the font

    This may happen if the icons were downloaded with the "Embed in CSS" option, so the font icon is embedded in base64 encoding in the css file. Make sure to add  font-src 'self' data: to your CSP directives. Example:

    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; font-src 'self' data:" />

Installation errors

1. npm ERR! 403 Forbidden

This error usually occurs when the Mobiscroll npm package couldn't autentificate. There can be multiple causes:

  •  The user doesn't have access to the npm package

    The npm packages contains the full set of Mobiscroll controls. This error usually occurs when the user has a component license and tries to install using NPM.

    Solution:  Download the package manually.
  • The package is used on a CI or AWS server, and the autentification is missing

    Solution: an .npmrc  file with the Mobiscroll auth tokens should be present in the project's root directory. The mobiscroll config  cli command should generate this .npmrc file by default.
    If you don't have the .npmrc file in your project's root directory, check the following folder for  a global .npmrc: $HOME/   on Mac and Linux and Users/{Username}/  on Windows. If the file exists delete the Mobiscroll related auth tokens from it. After this you can re-run the mobiscroll config command in your project and push the newly generated file to your repo.

  • If the Mobiscroll account's password was changed

    If you changed your account's password then previously generated Mobiscroll npm auth token won't be valid anymore.

    Solution: Delete the Mobiscroll related content form the .npmrc file, and run the mobiscroll config  command once again.

2. User {username} has no access to package @mobscoll/{framework}

The npm packages contains the full set of Mobiscroll controls. This error usually occurs when the user has a component license and tries to install it using NPM. The error also occurs if the user doesn't have a license assigned. 

Solution: Download the package manually.

3. Could not find user with the specified username or password

This error is thrown by the Mobiscroll NPM registry and as the error message indicates this might be either because you mistyped your login information or  your account does not exist.


Other problems

1. Cannot access variables and methods form Mobiscroll events with this keyword

A function's this  keyword behaves a little differently in JavaScript compared to other languages. The problem usually occurs with those frameworks where the this keyword is used to access the app's methods and properties. 

If the mobiscroll events are defined the following way: 

onBeforeShow: function (event, inst) {
     // this.yourPropertyName won't point to the actual property

In Mobiscroll event handlers that are defined like above, this keyword points to the element where the component was initialized.

Solution: The easiest way to solve this problem is to use ES6 arrow functions where this retains the value of the enclosing lexical context's this:

onBeforeShow: (event, inst) => {
     // this.yourPropertyName will point to your actual property

If you couldn't solve the error which you are experiencing get in touch at

Did this answer your question?