[webpack] "nanoscroller is not a function" and "this.schedule.fullcalendar is not a function"

Post Reply
a.nuti
Posts: 7
Joined: 16 Sep 2016, 10:51

16 Jun 2017, 22:53

Hi, I have just buy this Theme and I was able to import in my project. I'm working with an existing project and I want to use this only for the "admin" part so leave Webpack it's not an option. "Installing" this theme went really smooth (just copied the "src/app" folder inside my admin folder and update my router with the new path). The only problem is nanoScroller which keep tell me

Code: Select all

"nanoScroller is not a function"
and I haven't found how to import this library with webpack.

Code: Select all

vendor: [
        ...
	primeng.js',
        'jquery',
        'nanoscroller/bin/javascripts/jquery.nanoscroller.js',
        //'nanoscroller',
        'moment/moment.js'
        'chart.js/dist/Chart.js',
        'fullcalendar/dist/fullcalendar.js',
        'quill/dist/quill.js',

         'primeng/resources/primeng.min.css',
         'fullcalendar/dist/fullcalendar.min.css',
         'quill/dist/quill.snow.css',
         'nanoscroller/bin/css/nanoscroller.css'
]
I have tried both 'nanoscroller' and 'nanoscroller/.../nanoscroller.js': in both case I can see the nanoscroller code inside my vendor.js. I got the same error even if I link directy from the CDN.

P.S. I had to change

Code: Select all

declare var jQuery:any;
to

Code: Select all

var jQuery = require('jquery');
inside app.sidebartabcontent.component.ts to make jQuery work. Maybe I have to do something similar?

---EDIT---
Also FullCalendar has the same error...

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

19 Jun 2017, 10:05

Hi,

Both nanoscroller and schedule dependent on jquery. There can be a problem with importing jquery according to your changes. And could you please your package.json ?

Regards

a.nuti
Posts: 7
Joined: 16 Sep 2016, 10:51

19 Jun 2017, 11:35

package.json

Code: Select all

{
  "name": "next",
  "version": "0.0.0",
  "scripts": {
    "build-vendor": "webpack --config webpack.config.vendor.js",
    "build-prod": "webpack -p --config webpack.config.js && webpack -p --config webpack.config.vendor.js"
  },
  "dependencies": {
    "typescript": "2.3.2",
    "css": "2.2.1",
    "less": "2.7.2",

    "@angular/common": "4.1.0",
    "@angular/animations": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@angular/platform-server": "4.1.0",
    "@angular/upgrade": "4.1.0",
    "@angular/router": "4.1.0",
    "@angular/compiler-cli": "4.1.0",

    "@types/node": "7.0.16",

    "rxjs": "5.3.1",
    "zone.js": "0.8.10",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",

    "aspnet-webpack": "1.0.28",
    "isomorphic-fetch": "2.2.1",
    "preboot": "4.5.2",

    "webpack": "2.4.1",
    "webpack-cleanup-plugin": "0.5.1",
    "webpack-hot-middleware": "2.18.0",
    "webpack-merge": "4.1.0",
    "awesome-typescript-loader": "3.1.3",
    "angular2-template-loader": "0.6.2",
    "angular2-router-loader": "0.3.5",
    "aspnet-prerendering": "2.0.3",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.0",
    "css-loader": "0.28.1",
    "file-loader": "0.11.1",
    "html-loader": "0.4.5",
    "json-loader": "0.5.4",
    "raw-loader": "0.5.1",
    "style-loader": "0.17.0",
    "less-loader": "4.0.3",
    "to-string-loader": "1.1.5",
    "url-loader": "0.5.8",

    "primeng": "4.0.1",
    "chart.js": "2.6.0",
    "quill": "1.2.6",
    "moment": "2.18.1",
    "fullcalendar": "3.4.0",
    "nanoscroller": "0.8.7"
  }
}
I added "require ('...')" before my AppComponent and it seems to work. FullCalendar and Quill work, nanoscroller continues to give me that error...

Code: Select all

import { Component, AfterViewInit, ElementRef, Renderer, ViewChild } from '@angular/core';

require('jquery');
require('fullcalendar');
require('moment');
require('nanoscroller');
require('quill');

enum MenuOrientation {
    STATIC,
    OVERLAY
};

@Component({
    selector: 'bp-app',
    templateUrl: './app.component.html',
    //styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {

a.nuti
Posts: 7
Joined: 16 Sep 2016, 10:51

20 Jun 2017, 20:03

ok, I got this:

Code: Select all

import { Component } from '@angular/core';
...

require('jquery');
require('fullcalendar');
require('moment');
require('nanoScroller');
require('quill');

...
@Component({
    selector: 'bp-app',
    templateUrl: './app.component.html',
    //styleUrls: ['./app.component.scss']
})

it is

Code: Select all

require('nanoScroller')
and not

Code: Select all

require('nanoscroller')
(notice the uppercase 'S')

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

21 Jun 2017, 10:11

Hi

Great, Glad to hear that.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests