issue during ng build

[fuserMRX]

Hi, @MattJeanes Thanks for your efforts in case ngx-parallax.

From the description to this plugin: "...A parallax plugin/directive for Angular 2+..." I understood that "ngx-parallax" should have worked fine for Angular4 application too.

It's ok and it works really great.

But I 've had issue during the building of the production version: ng build --target=production

ERROR in Error: Unexpected value 'Parallax in /home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/ngx-parallax/lib/parallax.directive.d.ts' declared by the module 'AppModule in /home/fuser/COURSERA/module2/Angular/travel_bug/src/app/app.module.ts'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
    at /home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:15481:40
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:15463:54)
    at addNgModule (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:24268:58)
    at /home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:24279:14
    at Array.forEach (<anonymous>)
    at _createNgModules (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:24278:26)
    at analyzeNgModules (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:24153:14)
    at analyzeAndValidateNgModules (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:24163:35)
    at AotCompiler.analyzeModulesAsync (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:23797:46)
    at CodeGenerator.codegen (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
    at Function.NgTools_InternalApi_NG_2.codeGen (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
    at _donePromise.Promise.resolve.then (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@ngtools/webpack/src/plugin.js:386:44)
    at <anonymous>

my angular info:

@angular/cli: 1.4.5
node: 8.9.3
os: linux x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/flex-layout: 2.0.0-beta.10
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule } from '@angular/forms';
import {HttpModule, Http} from '@angular/http';
import {FlexLayoutModule} from '@angular/flex-layout';
import {
  MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule,
  MatInputModule, MatRadioModule, MatSelectModule, MatSliderModule,
  MatSlideToggleModule, MatToolbarModule, MatListModule, MatGridListModule,
  MatCardModule, MatIconModule, MatProgressSpinnerModule, MatDialogModule, MatTableModule, MatProgressBarModule,
} from '@angular/material';

import {MatTooltipModule} from '@angular/material/tooltip';

import {MatSnackBarModule} from '@angular/material';

import {MatExpansionModule} from '@angular/material/expansion';
import { MatNativeDateModule } from '@angular/material';

import { AgmCoreModule } from '@agm/core';

import {MatAutocompleteModule} from '@angular/material/autocomplete';
import 'hammerjs';

import { AppComponent } from './app.component';
import { FestivalsComponent } from './festivals/festivals.component';
import { FestivaldetailComponent } from './festivaldetail/festivaldetail.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { OrderComponent } from './order/order.component';
import { ContactComponent } from './contact/contact.component';

import { FestivalService } from './services/festival.service';
import { PromotionService } from './services/promotion.service';

import { AppRoutingModule } from './app-routing/app-routing.module';
import { LoginComponent } from './login/login.component';
import { HighlightDirective } from './directives/highlight.directive';

// ng-translate modules ==> npm install ng2-translate --save
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';

// required for AOT compilation in case ng2-translate
export function HttpLoaderFactory(http: Http) {
  return new TranslateStaticLoader(http, '/assets/i18n', '.json');
}
// Parallax implementation
import { Parallax, ParallaxConfig} from 'ngx-parallax';

@NgModule({
  declarations: [
    AppComponent,
    FestivalsComponent,
    FestivaldetailComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    OrderComponent,
    ContactComponent,
    Parallax,
    LoginComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    FlexLayoutModule,
    MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule,
    MatInputModule, MatRadioModule, MatSelectModule, MatSliderModule,
    MatSlideToggleModule, MatToolbarModule, MatListModule, MatGridListModule,
    MatCardModule, MatIconModule, MatProgressSpinnerModule, MatDialogModule, MatTableModule, MatProgressBarModule,
    ReactiveFormsModule, MatAutocompleteModule, AppRoutingModule, MatExpansionModule, MatSnackBarModule, MatNativeDateModule,
    MatTooltipModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyDvS'
    }),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [Http]
    })
  ],
  providers: [ FestivalService, PromotionService],
  entryComponents: [
    LoginComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Could you please advice what could be the root of the issue in this case? Any help is really appreciated.

[MattJeanes]

This seems to be the same issue as #2. @nasserghiasi - do you know what needs to be done to resolve this issue?

[coolsam726]

I am experiencing the same issue and I haven't been able to resolve it yet. It seems angular 5 + Typescript expects the @Directive decorator before the directive controller. I thought adding the following line in parallax.directive.d.ts before the Parallax class would solve the issue: @Directive({ selector: '[parallax]' }) However, after doing that I was experiencing another error: ERROR in : Can't bind to 'config' since it isn't a known property of 'div'. ("<div parallax [ERROR ->][config]="{initialValue: 0, ratio: .8}"

This should be solved by adding the input decorator on config inside the directive class as: @Input() config: ParallaxConfig But for a reason I haven't figured out, I haven't been able to get that work. Any insights?

[MattJeanes]

Hmm, so to see issues just try and use this plugin in Angular 5? Nothing special required?

[coolsam726]

@MattJeanes Yes, using angular CLI try running either of the following and the issue comes up: ng build -prod ng build -aot ng serve -prod ng serve -aot

Personally I am using the npm version of the lib. I haven't tried cloning this repo directly to see if it has the same issue.

[MattJeanes]

Hey guys, I've just pushed version 3.0.0-rc.2 that hopefully has AOT support, can you give it a go and let me know if everything is ok and if anything is broken? Thanks

[nasserghiasi]

hell no! ERROR in : Type Parallax in /Library/WebServer/Documents/project/node_modules/ngx-parallax/lib/parallax.directive.d.ts is part of the declarations of 2 modules: MainModule in /Library/WebServer/Documents/project/src/app/modules/main/main.module.ts and ParallaxModule in /Library/WebServer/Documents/project/node_modules/ngx-parallax/lib/parallax.module.d.ts! Please consider moving Parallax in /Library/WebServer/Documents/project/node_modules/ngx-parallax/lib/parallax.directive.d.ts to a higher module that imports MainModule in /Library/WebServer/Documents/project/src/app/modules/main/main.module.ts and ParallaxModule in /Library/WebServer/Documents/project/node_modules/ngx-parallax/lib/parallax.module.d.ts. You can also create a new NgModule that exports and includes Parallax in /Library/WebServer/Documents/project/node_modules/ngx-parallax/lib/parallax.directive.d.ts then import that NgModule in MainModule in /Library/WebServer/Documents/project/src/app/modules/main/main.module.ts and ParallaxModule in /Library/WebServer/Documents/project/node_modules/ngx-parallax/lib/parallax.module.d.ts.

[MattJeanes]

Sorry forgot to mention, import the new ParallaxModule rather than the directive directly

[coolsam726]

@nasserghiasi At first I encountered that exact error but I quickly realized the fix. As @MattJeanes says, now we only need to import the module, and DO NOT DECLARE Parallax Directive since it is already declared inside ParallaxModule. That is why you get a double declaration error. Here is my code that compiles successfully with -aot:

(other import statements here)
import {ParallaxModule} from "ngx-parallax";

@NgModule({
  imports: [
    (other imports here)
    ParallaxModule,
  ]

That is it. No Parallax entry under declarations. This worked for me

[MattJeanes]

Yep exactly, technically this isn't a breaking change as it only affects AOT compilation which was broken anyway but I've upped the version to 3.0.0 just incase. @nasserghiasi can you also confirm it works OK? I'll push it to npm without the pre-release tag if you guys are happy

[coolsam726]

Let me do some further tests in implementing this and I hope it all works well. @MattJeanes I will give you feedback.

[coolsam726]

Here is a new error while using [config] input binding:

ERROR in : Can't bind to 'config' since it isn't a known property of 'div'. ("<div parallax [ERROR ->][config]="{initialValue: 0, ratio: .7}" class="" style="background-image: url('../../../assets/img/pa")

My template is:

<div parallax [config]="{initialValue: 0, ratio: .7}" class="" style="background-image: url('../../../assets/img/parallax0.jpg'); min-height: 300px!important;">
    <h1 class="center white-text font-weight-bold">Newest Hits</h1>
    <app-top-banner></app-top-banner>
  </div>

Module:

...
import {ParallaxModule, ParallaxConfig} from "ngx-parallax";

@NgModule({
  imports: [
    BrowserModule,
    NgUploaderModule,
    BrowserAnimationsModule,
    FormsModule,
    MaterialModule,
    NguParallaxModule,
    // LoadingBarHttpModule,
    LoadingBarRouterModule,
    ParallaxModule,
    ShareButtonModule.forRoot()
  ],

[MattJeanes]

Cannot replicate:

ng new ngx-testapp cd ngx-testapp yarn add ngx-parallax ng serve --aot

Template:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <div parallax [config]="{initialValue: -100, ratio: .7}">
  </div>
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br /><div parallax [config]="{initialValue: -100, ratio: .7}"></div>
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br /><div parallax [config]="{initialValue: -100, ratio: .7}"></div>
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br /><div parallax [config]="{initialValue: -100, ratio: .7}"></div>
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br /><div parallax [config]="{initialValue: -100, ratio: .7}"></div>
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br /><div parallax [config]="{initialValue: -100, ratio: .7}"></div>
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br /><div parallax [config]="{initialValue: -100, ratio: .7}"></div>
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />
  hi<br />  hi<br />

App module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {ParallaxModule} from "ngx-parallax";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ParallaxModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App css

*[parallax] {
    width: 700px;
    height: 300px;

    background-size: 100%;
    background-image: url('http://cwadrupldijjit.com/app/subpages/ng2-parallax/components/assets/dawn-190055.jpg');
}

[fuserMRX]

Hi @MattJeanes , thanks for your findings!!

I did all you proposed in above: import {ParallaxModule} from "ngx-parallax" and then added it to the imports but in my case I got error again (and it's different from the initial one):

ERROR in Error: Metadata version mismatch for module /home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/ngx-parallax/main.d.ts, found version 4, expected 3, resolving symbol AppModule in /home/fuser/COURSERA/module2/Angular/travel_bug/src/app/app.module.ts, resolving symbol AppModule in /home/fuser/COURSERA/module2/Angular/travel_bug/src/app/app.module.ts at syntaxError (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34) at simplifyInContext (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:24979:23) at StaticReflector.simplify (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:24991:13) at StaticReflector.annotations (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:41) at _getNgModuleMetadata (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31) at _extractLazyRoutesFromStaticModule (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26) at Object.listLazyRoutesOfModule (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@ngtools/webpack/src/plugin.js:207:44) at _donePromise.Promise.resolve.then.then.then.then.then (/home/fuser/COURSERA/module2/Angular/travel_bug/node_modules/@ngtools/webpack/src/plugin.js:443:24) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7)

I believe it is related to the angular version mismatch.

some related issues ==> https://github.com/angular/material2/issues/8229, https://github.com/KillerCodeMonkey/ngx-quill/issues/76

Could you please clarify what version of angular you used in your tests?

[MattJeanes]

I'm using a brand new project from latest angular cli so Angular 5, which is also what this module is AOT compiled against:

https://github.com/MattJeanes/ngx-parallax/blob/master/package.json

You can see in devDependencies that we're using angular 5.2.0 to build this for AOT

package.json from my test app:

{
  "name": "my-dream-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "ap-angular2-fullcalendar": "^1.3.7",
    "core-js": "^2.4.1",
    "ngx-parallax": "^3.0.0-rc.2",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.4",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/language-service": "^5.1.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

[danilomendesdias]

@coolsam726 did you solve this? i'm getting the same error.

[matbalazsi]

+1

[MattJeanes]

Just to reiterate, I'm open to PRs but I'm unable to reproduce the issue locally so it's hard for me to fix it. Worth noting that I'm only maintaining this, and I'm not the original author.

[matbalazsi]

Is it possible that the latest changes were not publishjed to npm. when doing npm install --save ngx-parallax@latest, I get version 4.0.0-rc.1, and lib/parallax.modulte.d.ts looks like the following:

import { ModuleWithProviders } from "@angular/core"; export declare class ParallaxModule { static forRoot(): ModuleWithProviders; }

thanks!

[MattJeanes]

Hm.. maybe - I'll double check that in a little bit and get back to you. Would explain a lot! :wink:

[MattJeanes]

@matbalazsi can you please try version 4.0.0-rc.4?

[matbalazsi]

yes! It worked. Thanks!

[matbalazsi]

It's building, but unfortunately the parallax has stopped working, and I am getting the following error in firefox. Has the installation procedure changed since 4.0.0-rc.1? Should I open a separate issue?

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

[MattJeanes]

Awesome! Okay thanks, I've published that to 4.0.0 now. Looks like it wasn't including ngsummary/metadata json files in the npm package. Also updated all the packages.

[MattJeanes]

@matbalazsi yes if you could raise a new issue for that I will take a look, thanks

[coolsam726]

@danilomendesdias in case you still experience an error like ERROR in : Can't bind to 'config' since it isn't a known property of 'div'. ("<div parallax [ERROR ->][config]="{initialValue: 0, ratio: .8}", the problem might be where you are importing ParallaxModule. Ensure you are importing ParallaxModule into the module where the Parallax component is declared, not just in AppModule