scroll-spy.service Error

Topic: scroll-spy.service Error

rmtsoft free asked 5 years ago

Hi, Whenever I want to start my new application after running the npm start, I get the following error:

ERROR in node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(10,20): error TS1005: ';' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(10,83): error TS1005: '(' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(11,27): error TS1005: ',' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(11,39): error TS1005: ';' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(11,45): error TS1109: Expression expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(12,32): error TS1005: ',' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(12,41): error TS1005: ';' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(12,47): error TS1109: Expression expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(13,34): error TS1005: ',' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(13,56): error TS1005: ',' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(13,65): error TS1005: ';' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(13,71): error TS1109: Expression expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(14,34): error TS1005: ',' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(14,56): error TS1005: ',' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(14,65): error TS1005: ';' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(14,71): error TS1109: Expression expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(15,29): error TS1005: ',' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(15,60): error TS1005: ';' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(15,66): error TS1109: Expression expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(16,34): error TS1005: ',' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(16,43): error TS1005: ';' expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(16,49): error TS1109: Expression expected.
node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/scroll-spy/scroll-spy.service.d.ts(17,1): error TS1128: Declaration or statement expected.

So the app fails to compile. Can anyone help me with this issue?

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear Mehul,

Did you try to reproduce this problem with the MDB Angular 7.4.0?

I have tried to reproduce your problem using your project with MDB Angular 7.4.0 @ Windows 10 & Ubuntu 18.04, and without success.

This problem should be resolved with the 7.4.0 release.

Best Regards,

Damian

Add comment

Mehul free answered 5 years ago

0 0 Best answer

Hi Damian, I have shared my project via dropbox and you should get an email. I have created new project and I am trying to run it using "ng s" cmd. This issue is urgent for me as we have just started project with client and need to build web site ASAP. Thanks for your help.

Regards, -Mehul

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear Mehul,

You're experiencing this problem when building or serving the brand new project? Without using Docker or something similar?

Please send me this new application in which you have encountered this problem. Here's my email address: d.gemza@mdbootstrap.com

Best Regards,

Damian

Add comment

Mehul free answered 5 years ago

0 0 Best answer

I have same issue. I have followed below steps provided on MDBootstrap site to install pro version (<a href="https://mdbootstrap.com/docs/angular/getting-started/quick-start/">https://mdbootstrap.com/docs/angular/getting-started/quick-start/</a>):

Step 1: Create new angular project using Angular CLI command:

ng new your-angular-project --style=scss

Step 2: cd your-angular-project

Step 3: GitLab npm install

Visit <a href="https://git.mdbootstrap.com/" rel="nofollow">https://git.mdbootstrap.com/</a> and log in.
From top right corner click at your avatar and choose "Setting → Access Tokens" or navigate directly to: <a href="https://git.mdbootstrap.com/profile/personal_access_tokens/" rel="nofollow">https://git.mdbootstrap.com/profile/personal_access_tokens/</a>
Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"

Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose you will have to generate new token again.

Navigate to given repository, switch GIT to HTTP and copy it's url i.e. : <a href="https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git" rel="nofollow">https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git</a> 
Adjust following link as per below: 
"git+<a href="https://oauth2" rel="nofollow">https://oauth2</a>: + access _token + @ + repo address" 
i.e.

git+<a href="https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git" rel="nofollow">https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git</a>
Within existing npm project run: 
npm install git+<a href="https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git" rel="nofollow">https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git</a> --save

if you don't have existing npm project you should crate it first (npm init)

alternatively you can update your dependencies in package.json like below :

"dependencies": { 
 "ng-uikit-pro-standard": "git+<a href="https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git" rel="nofollow">https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git</a>"
 }

and run npm install

Step 4: add following imports and providers to your app.module.ts:

import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';

import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';

import { NgModule } from '@angular/core';

...

imports: [
 ...
 MDBBootstrapModulesPro.forRoot(),
 ...
],
providers: [
...
MDBSpinningPreloader,
...
]

Step 5: Into your angular.json file add styles

"styles": [
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
"src/styles.scss"
],
and scripts
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/easy-pie-chart/dist/easypiechart.js",
"node_modules/screenfull/dist/screenfull.js",
"node_modules/hammerjs/hammer.min.js"
],
Step 6: Install 3rd party libraries using 
npm i --save chart.js@2.5.0 @types/chart.js easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 @fortawesome/fontawesome-free

OR 
to package.json add:

"chart.js": "^2.5.0",
"easy-pie-chart": "^2.1.7",
"hammerjs": "^2.0.8",
"screenfull": "3.3.0",
"@fortawesome/fontawesome-free": "^5.6.0"
and then use npm i
Step 7: if you want to use maps you will have to npm i --save @agm/core and then add import { AgmCoreModule } from '@agm/core'; to your app.module. To use them you will also need add it to your imports AgmCoreModule.forRoot({ apiKey: 'Your_api_key' })

Step 8: ng serve -o

NOTE:It is possible to install Bootstrap from npm package. Just type npm install bootstrap --save.

Using Bootstrap from npm requires to change location of bootstrap.scss file in angular.json file 
from 
"node_modules/ng-mdb-pro/scss/bootstrap/bootstrap.scss 
to 
"node_modules/bootstrap/scss/bootstrap.scss.

Please insert min. 20 characters.

I have same issue. I have followed below steps provided on MDBootstrap site to install pro version (https://mdbootstrap.com/docs/angular/getting-started/quick-start/):

Step 1: Create new angular project using Angular CLI command:

ng new your-angular-project --style=scss

Step 2: cd your-angular-project

Step 3: GitLab npm install

Visit https://git.mdbootstrap.com/ and log in. From top right corner click at your avatar and choose "Setting → Access Tokens" or navigate directly to: https://git.mdbootstrap.com/profile/personal_access_tokens/ Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"

Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose you will have to generate new token again.

Navigate to given repository, switch GIT to HTTP and copy it's url i.e. : https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git Adjust following link as per below:
"git+https://oauth2: + access _token + @ + repo address" i.e.

git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git Within existing npm project run: npm install git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git --save

if you don't have existing npm project you should crate it first (npm init)

alternatively you can update your dependencies in package.json like below :

"dependencies": { "ng-uikit-pro-standard": "git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git" }

and run npm install

Step 4: add following imports and providers to your app.module.ts:

import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';

import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';

import { NgModule } from '@angular/core';

...

imports: [ ... MDBBootstrapModulesPro.forRoot(), ... ], providers: [ ... MDBSpinningPreloader, ... ]

Step 5: Into your angular.json file add styles

"styles": [ "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss", "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "src/styles.scss" ], and scripts "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/easy-pie-chart/dist/easypiechart.js", "node_modules/screenfull/dist/screenfull.js", "node_modules/hammerjs/hammer.min.js" ], Step 6: Install 3rd party libraries using npm i --save chart.js@2.5.0 @types/chart.js easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 @fortawesome/fontawesome-free

OR to package.json add:

"chart.js": "^2.5.0", "easy-pie-chart": "^2.1.7", "hammerjs": "^2.0.8", "screenfull": "3.3.0", "@fortawesome/fontawesome-free": "^5.6.0" and then use npm i Step 7: if you want to use maps you will have to npm i --save @agm/core and then add import { AgmCoreModule } from '@agm/core'; to your app.module. To use them you will also need add it to your imports AgmCoreModule.forRoot({ apiKey: 'Your_api_key' })

Step 8: ng serve -o

NOTE:It is possible to install Bootstrap from npm package. Just type npm install bootstrap --save.

Using Bootstrap from npm requires to change location of bootstrap.scss file in angular.json file from "node_modules/ng-mdb-pro/scss/bootstrap/bootstrap.scss to "node_modules/bootstrap/scss/bootstrap.scss.

Add comment

Theriaul1 pro answered 5 years ago

0 0 Best answer

I had the same error, just upgrade your Angular/CLI and typescript globally.

npm i -g @Angular/CLI and npm i -g typescript

+@Damian Gemza solution

"ng-uikit-pro-standard": "git+https://oauth2:@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#dev"

in package.json file

Worked for me

Thanks Damian

Mehul free commented 5 years ago

This did not work for me!

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Guys,

We have made some changes to the scroll-spy.service.ts file. The changes are available on the #dev branch of the ng-uikit-pro-standard repository.

If you have had a similar problem, please check if it continues.

Just change the line in the package.json file

"ng-uikit-pro-standard": "git+https://oauth2:<token>@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git',

"ng-uikit-pro-standard": "git+https://oauth2:<token>@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#dev",

Consider that this is a development branch, and you should not use it on the production version of your application, because the changes made there are not yet fully tested.

In case of any problems I encourage you to contact me!

Best Regards,

Damian

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear Simone,

Could you please send me your application? We want to debug this problem, but We can't because this problem is not reproducible on our machines.

Please send your project to me here: d.gemza@mdbootstrap.com

Or if you can't send me your project, please provide me a reproduction project - simple blank project on which I'll be able to debug this case.

Best Regards,

Damian

Add comment

Simone Miorelli free answered 5 years ago

0 0 Best answer

I'm having the same issue trying to compile the project using docker. Please fix it, it's really urgent!

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

We are trying to find the source of this problem, but we cannot reproduce it on our end. If you can provide any reproduction steps that would be very helpful for us. You can send a demo app on which this problem occurs to a.idzikowski@mdbootstrap.com.

Add comment

robert.devspire pro answered 5 years ago