seiyria / ng2-sweetalert2 Goto Github PK

Hi.. I'm new with all this, trying to use sweet alert with angular2-quickstart example of heroes..
I have executed npm install -s anda package is added to my node_modules folder. I created new component in my app folder where i'm trying to import the module.. I have added it to my systemjs.config.js.. 3 days trying different things and always the same error when running npm start..
Cannot find module 'ng2-sweetalert2'..

Can you tell my the way to import the module???
Here my systemjs.config

(function(global) {


  // map tells the System loader where to look for things

  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'ng2-sweetalert2':            'node_modules/ng2-sweetalert2'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ng2-sweetalert2':            { defaultExtension: 'js' }

  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

Her my tsconfig.json:

  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

And my new component:

import { SweetAlertService } from 'ng2-sweetalert2';
import { Component } from '@angular/core';
import {Injectable} from '@angular/core';


@Component({
  providers: [SweetAlertService]
})

@Injectable()
export class SweetAlert {

  swalService : SweetAlertService;

  static get parameters() {
    return [[SweetAlertService]];
  }

  constructor(swal) {
    this.swalService = swal;
  }
}

Thanks..

Please update the library dependencies

Hi,

Can understand your Step 1 in Usage ... please specify the correct place & File to edit - as per latest angular 2 (2.4.0)

Today I updated project as below.

    "@angular/cli": "1.0.4",
    "@angular/compiler-cli": "^4.1.3",
    "@types/jasmine": "2.5.47",
    "@types/node": "~7.0.22",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "rxjs": "^5.4.0",
    "zone.js": "^0.8.11",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"

Now , Sweetalert does not works anymore. It works only one time. After that, it's not opening.

This DOM element is not being deleted when alert is disappearing.
If I force delete this DOM element then it works again.

I tried to lower Angular Dependencies versions, then it works again.

Any solution?

Hello,

your plugin works fine for me, as far as I don't load other services in my component.

The problem is with the static get parameters(){} function. Other services become undefined. Is there a way to load this plugin in class constructor, like any other plugin ?

Thank you.

Sweet Alert 2 is working fine in dev mode but after AOT build, backdrop overlay is not shown

And once I close alert box, swa2-container is not removed thus it blocks user for clicking any part of page.

http://prntscr.com/fbt2ys

It is working perfectly in dev mode so I guess this is error from AOT build

Can you release the latest version of this project to be compatible with @angular/core >= 4.0.0?

Angular 2.0.0-rc5 was released on August 9th. There are breaking changes but the old API is largely supported but deprecated with warning messages. Therefore, it is likely safe to bump the dependency version here without a ruckus.

Do you have any plans to update the plugin to be compatible with RC6 ?

Thanks.

I've been trying for a while to get sweetalert2 to work in my Angular2 app and I think this library will solve it for me, but I cannot add it to my project because it fails to install on the latest build of angular2. Any chance you could update this?

UNMET PEER DEPENDENCY @angular/[email protected]
...
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.

I tried to use it in my Ionic 3 application but get this error:

main.js:142924 Uncaught Error: Module parse failed: ...\node_modules\sweetalert2\dist\sweetalert2.min.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

and I just copied the same example code in the readme

import { SweetAlertService } from 'ng2-sweetalert2';

@Component({
  providers: [SweetAlertService]
})
export class MyComponent {
  static get parameters() {
    return [[SweetAlertService]];
  }
  constructor(swal) {
    this.swalService = swal;
  }

Hello Seiyria, i will be glad if you could explain where and how you to create/update the webpack file in ionic 2. everything is seems okie but cant figure out the webpack bit.. been scratching my head over this for a day now. much help will be appreciated.

Hello,

You say

First, make sure you have a CSS loader set up for webpack, like so:
{
test: /.css/,
loader: 'style!css'
},

but I am not using web pack but JSPM and system.js

I have an error with the loading of sweetalert2.min.css.js that actually does not exist.
Do you have a clue on how to get it work ?

GET http://localhost:8001/jspm_packages/npm/[email protected]/dist/sweetalert2.min.css.js 404 (Not Found)
scheduleTask @ zone.js:1382
ZoneDelegate.scheduleTask @ zone.js:245
Zone.scheduleMacroTask @ zone.js:171
(anonymous) @ zone.js:1405
send @ VM80930:3
G @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:518
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2802
(anonymous) @ system.src.js:3380
(anonymous) @ system.src.js:3694
(anonymous) @ system.src.js:4086
(anonymous) @ system.src.js:4549
(anonymous) @ system.src.js:4819
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:232
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
offres:47 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8001/jspm_packages/npm/[email protected]/dist/sweetalert2.min.css.js
	Error: XHR error (404 Not Found) loading http://localhost:8001/jspm_packages/npm/[email protected]/dist/sweetalert2.min.css.js
	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:8001/node_modules/zone.js/dist/zone.js:698:29)
	    at ZoneDelegate.invokeTask (http://localhost:8001/node_modules/zone.js/dist/zone.js:265:35)
	    at Zone.runTask (http://localhost:8001/node_modules/zone.js/dist/zone.js:154:47)
	    at XMLHttpRequest.ZoneTask.invoke (http://localhost:8001/node_modules/zone.js/dist/zone.js:335:33)

I created a project in Angular2 and installed sweetalert as below
npm install --save sweetalert2

I imported swal in my component as below
import swal from 'sweetalert2';

Executing the below code doesn't show the alert as a popup. It embeds it within the HTML page
swal({ title: 'Hello World' });

Refer to the image

the current version of @angular/platform-browser is not @^2.0.0-rc.4 but @4.2.5

https://www.npmjs.com/package/@angular/platform-browser

please up your dependencies

Is it possible to import and use the SWAL Service object in a Service ... just like any other Service ?