tinesoft / ngx-scrollreveal

Angular directives for ScrollReveal : a JavaScript library for easily animating elements as they enter/leave the viewport.
https://tinesoft.github.io/ngx-scrollreveal
MIT License
93 stars 11 forks source link

Can't bind to 'ngsReveal' since it isn't a known property of 'div' and nothing works #119

Closed pedromaironi closed 2 years ago

pedromaironi commented 3 years ago

OS and Version?

Versions

Angular CLI: 12.0.4
Node: 14.15.4
Package Manager: npm 6.14.10
OS: win32 x64

Angular: 12.0.5
... animations, cdk, common, compiler, compiler-cli, core, forms        
... material, platform-browser, platform-browser-dynamic, router        

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.4
@angular-devkit/build-angular   12.0.4
@angular-devkit/core            12.0.4
@angular-devkit/schematics      12.0.4
@angular/cli                    12.0.4
@angular/flex-layout            12.0.0-beta.34
@schematics/angular             12.0.4
rxjs                            6.6.7
typescript                      4.2.4

Angular.json

        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/carminer",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/fontisto/css/fontisto/fontisto.min.css",
              "node_modules/scrollreveal/dist/scrollreveal.js",
            ],
            "scripts": []
          },

Repro steps

npm i --save-dev scrollreveal
npm i --save ngx-scrollreveal
npm install --save-dev @types/scrollreveal

//Angular Json
"node_modules/scrollreveal/dist/scrollreveal.js"

The log given by the failure

Implementation

@NgModule({ declarations: [ AppComponent, //somecode ], imports: [ BrowserModule, AppRoutingModule, SharedModule, HomeModule, NgsRevealModule, ] )}


- Home.module.ts

@NgModule({ declarations: [ BannerComponent, HomeComponent, //somecode ], )}


- Banner.component.html

<div ngsReveal [ngsReveal]="{ reset: true}" class="banner-container__background">


### Desired functionality
I have hours trying to implement this, reinstall, go back and do the steps over and over again, not even the ngsReveal works, all directives fail.

It still finds the libraries installed, that's good. The only problem is that no directive is recognized

I made this template in JavaScript, I want to do the same in Angular:
https://pedromaironi.github.io/homepage-uiux/

<!--
What would like to see implemented?
What is the usecase?
-->
eddsnchz commented 3 years ago

I have the same problem, ¿Did you resolve?

pedromaironi commented 3 years ago

Nah brotha, I forgot about the functionality

rubensantibanezacosta commented 2 years ago

"styles": [ "src/styles.scss", "node_modules/fontisto/css/fontisto/fontisto.min.css", "node_modules/scrollreveal/dist/scrollreveal.js" ], "scripts": []

You imported library in de wrong place.

"styles": [ "src/styles.scss", "node_modules/fontisto/css/fontisto/fontisto.min.css", ], "scripts": [ "node_modules/scrollreveal/dist/scrollreveal.js"
]