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 than 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 is not loaded or it is not loaded correctly
Error message:
mobiscroll is not a function
The above error is occurring when the Mobiscroll is not loaded or it is loaded in the wrong place. When the JS code runs it tries to call a mobiscroll
function, but it's not finding it.
Solution: Make sure Mobiscroll is loaded correctly where you want to use it. Also, our getting started guides can be really helpful in solving this issue.
Note: This error message occurs when you try to use Mobiscroll together with jQuery or Javascript.
Contact us if something is unclear or just need a little bit more help with solving this problem.
4. 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 https://trial.mobiscroll.com
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.
5. 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 occurring when the component was downloaded from 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.
6. 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 variable.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.
7. 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.
Solution:
import { JsonpModule } from '@angular/http';
// ...
@NgModule({
imports: [
// ...
JsonpModule,
// ...
],
// ...
})
// ...
Note: This issue could come up when you use Angular or Ionic.
8. 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 addfont-src 'self' data:
to your CSP directives. Example:<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; font-src 'self' data:" />
9. Events are not loaded/shown in the Event Calendar
If you are trying to get/load data/events from an external link to the Event Calendar and the result is that the events are not shown in the calendar:
The problem might be that you are returning a simple JSON, while the demo URL return the values in JSONP format which is a little different.
The JSONP is used for sending JSON data without worrying about cross-domain issues and internally it uses the <script> tag instead of the XMLHttpRequest object.
Also, the JSONP request requires a different response from the server that's why it was not working for you when you returned a normal JSON data
Solution:
If you don't need to handle cross-domain requests you are good with serving plain JSON. If this is the case, in our example you just need to change the second parameter of the getJson function.
The actual demo on our webpage uses JSONP, so the code looks like this:
mobiscroll.util.getJson('yourURL', function (events) {
// ...
}, 'jsonp');
BUT you will need:
mobiscroll.util.getJson('yourURL', function (events) {
// ...
}, 'json'); // change this parameter from 'jsonp' if you want to use simple JSON data
Note:
Some of our demos use remote API for loading external data. For example, in case of Mobiscroll Event Calendar (in most cases) the events are loaded from an external link with the help of getJson function.
10. Date format problem in case of iOS Safari
If you are using Mobiscroll components and you notice that certain things don't appear on iOS however the same things work/ show up in Chrome and Android: such as events, `marked` or `invalid` options that are associated with a given date - this is most likely the problem.
Based on conversations with our customers in many cases they try to create javascript Date objects from non-standard formats, for example: `new Date('10/29/2020')`.
So, the problem is that some non-standard formats will work in some browsers (e.g. Chrome), but in others (e.g. Safari) the result will be an invalid date.
Solutions:
Mobiscroll supports ISO8601 date strings, so if you store your dates in that format, you can pass the date strings directly, without converting to date: '2020-10-27'.
If you can't (e.g. you can't change in your database where they are stored this way), you need to parse the date appropriately:
you can use Mobiscroll's parseDate for this: https://docs.mobiscroll.com/utils#utility-parseDate
if you already use some other date library (e.g. moment), you can use it as well
Installation errors
1. npm ERR! 403 Forbidden
This error usually occurs when the Mobiscroll npm package couldn't authenticate. 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 authentification token is missing
Solution: an.npmrc
file with the Mobiscroll auth tokens should be present in the project's root directory. Themobiscroll 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 andUsers/{Username}/
on Windows. If the file exists, delete the Mobiscroll related auth tokens from it. After this you can re-run themobiscroll config
command in your project and push the newly generated file to your repo.
Make sure the.npmrc
file is under source control (is not ignored), and is present on the CI/CD environment.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 themobiscroll 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.
Solution:
You can update your credentials from your account - https://mobiscroll.com/account
If you don’t have an account yet, you can start a free trial from https://mobiscroll.com/starttrial
4. Proxy related issues
If you're behind a proxy, the installation process might not be able to send the necessary requests. The following errors indicate that there's a problem with the proxy configuration:
Error: getaddrinfo ENOTFOUND npm.mobiscroll.com
Error: getaddrinfo EAI_AGAIN npm.mobiscroll.com
Error: connect ETIMEDOUT
Error: tunneling socket could not be estabilished
Error: socket hang up
Solution:
Set the
http_proxy
and thehttps_proxy
environment variables.If you do not want to add or modify the system environment variables, use the
--proxy
option to pass the proxy server address to the config command (replaceyour_user
,your_password
,your_proxy
and the port1234
with your actual proxy configuration)$ mobiscroll config [framework] --proxy http://your_user:your_password@your_proxy.com:1234
5. Certificate related issues
In certain environments, behind a strict firewall, the config may fail with one of the following errors:
Error: unable to get local issuer certificate
Error: self signed certificate in certificate chain
Solution:
Bypass the ssl verification by setting the
NODE_TLS_REJECT_UNAUTHORIZED
environment variable to0
. This should be used only as temporary solution, since this will bypass ssl verification for every request from Node.js, which is not secure.
Linux/Mac$ export NODE_TLS_REJECT_UNAUTHORIZED=0
Windows:
$ set NODE_TLS_REJECT_UNAUTHORIZED=0
A permanent solution would be to set the certificate file using the
NODE_EXTRA_CA_CERTS
environment variable. Ask your system administrator for the location of the certificate file.
Linux/Mac:$ export NODE_EXTRA_CA_CERTS=/path/to/your/cert.pem
Windows:
$ setx NODE_EXTRA_CA_CERTS /path/to/your/cert.pem
For more details on the topic please read this article.
6. Permission issues
When running the config command, you might run into errors indicating the the config
command is unable to write in the project directory:
Error: EPERM: operation not permitted
Make sure that the project folder is writable by the user running the mobiscroll config
command.
7. Execution policy issues
On Windows client computers, the execution of PowerShell scripts is disabled by default. When installing the Mobiscroll CLI on Windows using a PowerShell you might run into the following error:
npm : File C:\Users\...\npm\npm.ps1 cannot be loaded because running scripts is disabled on this system.
Solution: to allow the execution of PowerShell scripts, which is needed for npm global binaries, you must set the following execution policy:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy.
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
}