vimalavinisha / angular2-image-popup Goto Github PK

Seems I've got an issue in installing the package within an angular 2 (final version). While installing using npm pacakage manager there is a conflict with a few angular packages.

images = [
      { thumb: './thumbs/img1.jpg', img: './gallery/img1.jpg', description: 'My test 1' },      
      { thumb: './thumbs/img2.jpg', img: './gallery/img2.jpg', description: 'My test 2' },
    ];

but in view "Image 1" and "Image 2"

Hi,

I cannot install this.It shows below error list.Can you tell me how to install this ?

My ---> Node ver = 7.3.0 and npm ver = 3.10.10

Can you help me solve the problem?
app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
..
import { PhotosComponent } from './components/photos/photos.component';
import { Title } from '@angular/platform-browser';
import { ImageModal } from 'angular2-image-popup/directives/angular2-image-popup/image-modal-popup';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        PhotosComponent,
        ImageModal,
        ..
    ],
    imports: [
        FormsModule,
        TextMaskModule,
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        ImageUploadModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'photos', component: PhotosComponent },
            { path: 'Account/Logout', redirectTo: "/Account/Logout" },
            ..
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [Title],
})
export class AppModule {
}

photo.componnt.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'photos',
    template: require('./photos.component.html')
})
export class PhotosComponent {
    public photos: IPhoto[];

    constructor(http: Http) {
        http.get('/api/SampleData/Photos').subscribe(result => {
            this.photos = result.json();
        });
    }

    openModalWindow: boolean = false;
    imagePointer: number;
    images = [
        { thumb: './Files/Photo1.jpg', img: './Files/Photo1', description: 'Image 1' },
        { thumb: './Files/Photo2.jpg', img: './Files/Photo2', description: 'Image 2' },
        { thumb: './Files/Photo3.jpg', img: './Files/Photo3', description: 'Image 3' },
       ];

    OpenImageModel(imageSrc, images) {
        //alert('OpenImages');
        var imageModalPointer;
        for (var i = 0; i < images.length; i++) {
            if (imageSrc === images[i].img) {
                imageModalPointer = i;
                console.log('jhhl', i);
                break;
            }
        }
        this.openModalWindow = true;
        this.images = images;
        this.imagePointer = imageModalPointer;
    }
    cancelImageModel() {
        this.openModalWindow = false;
    }

}

interface IPhoto {
    id: number;
    path: string;
    name: string;
}

photo.component.html

<p *ngIf="!photos"><em>Loading...</em></p>
<div *ngIf="photos">
    <p> you can directly access "ImageModel" directive for both listing thumbnails and popup images</p>
    <ImageModal [modalImages]="images"></ImageModal>
    <div *ngIf="openModalWindow">
        <ImageModal [modalImages]="images" [imagePointer]="imagePointer" (cancelEvent)="cancelImageModel()"></ImageModal>
    </div>
</div>

I know, Angular4 is still work in progress and it will be released on March 2017.

I tried to use Angular 4 beta 1 in my project and this one is the only third party library that is not working.

So I decided to open this issue to show the problem.

Error message:
"Unexpected value 'ImageModal' declared by the module 'AppModule'"

Hello,
Could you tell me what is the cause of this error: Error: Uncaught (in promise): No Directive annotation found on ImageModal ?

I imported directive and added to component:
import { ImageModal } from 'angular2-image-popup/directives/angular2-image-popup/image-modal-popup';
@component({
....
directives: [ImageModal],
....
})
But it does not work.

Using latest master, when trying to include the component, I get this error: ERROR in directives/angular2-image-popup/angular2-image-popup.ts (66,15): error TS7006: Parameter 'index' implicitly has an 'any' type.

I'm new to typset but looks like if not running in a mode that ignores implicit, it'll give this error because index doesn't have a type set. I propose adding a type so that it work both with or without implicit mode.

It's working and I like it :)

But it should be very nice if you can implement a way to scroll images using left/right keyboard's arrows.

Thank u.

Hi!
I'm trying to use your lib, but I have a problem.
I included all css files into my index.html.

I'm using the latest version of all libraries, including Angular rc5.

I imported ImageModal as explained and declared ImageModel in this way;

@component({
selector: 'my-page',
providers: [],
directives: [ImageModal],
styleUrls: [],
templateUrl: 'my.html'
})
export default class MyComponent {
...
}

When I try to load my application I receive this error:

zone.js:461 Unhandled Promise rejection: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
Evaluating http://localhost:3000/node_modules/angular2-image-popup/directives/angular2-image-popup/image-modal-popup
Error loading http://localhost:3000/app/main.ts ; Zone: ; Task: Promise.then ; Value: Error: (SystemJS) Unexpected token <(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: (SystemJS) Unexpected token <(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

and this one:

zone.js:463 Error: Uncaught (in promise): Error: (SystemJS) Unexpected token <(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426.

I'm using angular2 rc5 + typescript2.0.0 and when I install this library I receive this error:

[email protected] postinstall (...)
typings install

/usr/local/lib/node_modules/typings/node_modules/configstore/index.js:54
throw err;
^

Error: EACCES: permission denied, open '/(...)/.config/configstore/typings.json'
You don't have access to this file.

at Error (native)
at Object.fs.openSync (fs.js:640:18)
at Object.fs.readFileSync (fs.js:508:33)
at Object.create.all.get (/usr/local/lib/node_modules/typings/node_modules/configstore/index.js:35:26)
at Object.Configstore (/usr/local/lib/node_modules/typings/node_modules/configstore/index.js:28:44)
at Object.<anonymous> (/usr/local/lib/node_modules/typings/node_modules/typings-core/dist/utils/store.js:5:19)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "--save" "angular2-image-popup"
npm ERR! node v6.3.1
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: typings install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-image-popup package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-image-popup
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-image-popup
npm ERR! There is likely additional logging output above.

The only way that I found to use this lib is downloading the source from github.

How can I fix this?

Hi,
I downloaded and gave npm start to check how it works, but it is throwing error as below. Can someone able to help me out.

$ npm start

[email protected] start D:\brady\AngularJS_Practice\angular2-image-popup
tsc && concurrently "npm run tsc:w" "npm run lite"

app/app.component.ts(5,25): error TS2307: Cannot find module '@angular/core'.
app/app.module.ts(1,32): error TS2307: Cannot find module '@angular/core'.
app/app.module.ts(2,32): error TS2307: Cannot find module '@angular/platform-browser'.
app/main.ts(5,40): error TS2307: Cannot find module '@angular/platform-browser-dynamic'.
directives/angular2-image-popup/angular2-image-popup.ts(1,70): error TS2307: Cannot find module '@angular/core'.

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: tsc && concurrently "npm run tsc:w" "npm run lite"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'tsc && concurrently "npm run tsc:w" "npm run lite" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-image-popup package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc && concurrently "npm run tsc:w" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-image-popup
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-image-popup
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! D:\brady\AngularJS_Practice\angular2-image-popup\npm-debug.log

I have @angular/core 2.4.6 installed and added this package, which resulted in rather confusing unmet peer dependency about @angular/complier requiring 2.4.4, as angular/core resolved to 2.4.6 so it used the top level one, but angular complier resolved to 2.4.4 so downloaded that to node_modules folder under angular2-image-popup, thus giving me two seperate angular compilers, one complaining about missing angular core.

Proposal: use "^2.4.4" instead of 2.4.4

Hi,
How can I use this with Webpack 2?

I'm getting this error while doing webpack:

ERROR in ./dist/app.bundle.js from UglifyJs
SyntaxError: Unexpected token: punc ({) [./~/angular2-image-popup/directives/angular2-image-popup/image-modal-popup.ts:1,0]

Thanks

$ npm start

[email protected] start D:\brady\AngularJS_Practice\angular2-image-po pup-master
tsc && concurrently "npm run tsc:w" "npm run lite"

app/app.component.ts(5,25): error TS2307: Cannot find module '@angular/core'.
app/app.module.ts(1,32): error TS2307: Cannot find module '@angular/core'.
app/app.module.ts(2,32): error TS2307: Cannot find module '@angular/platform-bro wser'.
app/main.ts(5,40): error TS2307: Cannot find module '@angular/platform-browser-d ynamic'.
directives/angular2-image-popup/angular2-image-popup.ts(1,70): error TS2307: Can not find module '@angular/core'.

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\ node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: tsc && concurrently "npm run tsc:w" "npm run lite"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'tsc && concurren tly "npm run tsc:w" "npm run lite" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-image-popup package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc && concurrently "npm run tsc:w" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-image-popup
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-image-popup
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to in stall?

npm ERR! Please include the following file with any support request:
npm ERR! D:\brady\AngularJS_Practice\angular2-image-popup-master\npm-debug.l og

I also what to share this error log, because it can be useful.
It appears when you run "npm install --save angular2-image-popup".

I'm using angular2 rc5 with typescript 2.0.0

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--save" "angular2-image-popup"
npm ERR! node v6.3.1
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: typings install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-image-popup package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-image-popup
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-image-popup
npm ERR! There is likely additional logging output above.

ImageModal directive is not working when i added in my component

Hi @vimalavinisha
I'm using angular2-image-popup package on my project. I got issue when building
ERROR in [at-loader] ./node_modules/angular2-image-popup/node_modules/@angular/core/node_modules/rxjs/Subject.d.ts:16:22 TS2415: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'. Types of property 'lift' are incompatible. Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'. Type 'Observable<T>' is not assignable to type 'Observable<R>'. Type 'T' is not assignable to type 'R'.
Please take a look.