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.

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. The Mobiscroll component's theme isn't loaded

If your Mobiscroll component appears without styling then probably the theme is not loaded into 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.

Installation errors

1. 404 Not Found: @mobiscroll/angular

This error usually comes up when an Ionic app is used with Ionic Pro. The Ionic Pro does not work with private npm registries at the moment. 

Solution: Run the mobiscroll config ionic-pro  command.  This will load the Mobiscroll resources from a local dependency.

You will find more information about it in this article.

2. 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.

3. 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.

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
}
Did this answer your question?