search

kevcjones / ngx-simple-modal

A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.
MIT License
52 stars 27 forks source link

ng 8 production error #57

Closed achasoft closed 5 years ago

achasoft commented 5 years ago

hi, thank you for your cool component, i get this error only in production, and it does not mater what is inside the modal

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'split' of undefined TypeError: Cannot read property 'split' of undefined at t.toggleWrapperClass (main.bfa15500980a1678c13f.js:1) at main.bfa15500980a1678c13f.js:1 at e.invoke (polyfills.733a0246794ccdcf00a6.js:1) at Object.onInvoke (main.bfa15500980a1678c13f.js:1) at e.invoke (polyfills.733a0246794ccdcf00a6.js:1) at t.run (polyfills.733a0246794ccdcf00a6.js:1) at polyfills.733a0246794ccdcf00a6.js:1 at e.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at Object.onInvokeTask (main.bfa15500980a1678c13f.js:1) at e.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at j (polyfills.733a0246794ccdcf00a6.js:1) at polyfills.733a0246794ccdcf00a6.js:1 at e.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at Object.onInvokeTask (main.bfa15500980a1678c13f.js:1) at e.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at t.runTask (polyfills.733a0246794ccdcf00a6.js:1) at y (polyfills.733a0246794ccdcf00a6.js:1) at t.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at invoke (polyfills.733a0246794ccdcf00a6.js:1) at n.args. (polyfills.733a0246794ccdcf00a6.js:1)

kevcjones-archived commented 5 years ago

Could you post the output for 'ng version' for me. I've got a production demo in the repo as well, if you pull that and run that demo for version 8 do you experience the same problem?

On Tue, 20 Aug 2019, 18:38 Navid Kianfar, notifications@github.com wrote:

hi, thank you for your cool component, i get this error only in production, and it does not mater what is inside the modal

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'split' of undefined TypeError: Cannot read property 'split' of undefined at t.toggleWrapperClass (main.bfa15500980a1678c13f.js:1) at main.bfa15500980a1678c13f.js:1 at e.invoke (polyfills.733a0246794ccdcf00a6.js:1) at Object.onInvoke (main.bfa15500980a1678c13f.js:1) at e.invoke (polyfills.733a0246794ccdcf00a6.js:1) at t.run (polyfills.733a0246794ccdcf00a6.js:1) at polyfills.733a0246794ccdcf00a6.js:1 at e.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at Object.onInvokeTask (main.bfa15500980a1678c13f.js:1) at e.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at j (polyfills.733a0246794ccdcf00a6.js:1) at polyfills.733a0246794ccdcf00a6.js:1 at e.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at Object.onInvokeTask (main.bfa15500980a1678c13f.js:1) at e.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at t.runTask (polyfills.733a0246794ccdcf00a6.js:1) at y (polyfills.733a0246794ccdcf00a6.js:1) at t.invokeTask (polyfills.733a0246794ccdcf00a6.js:1) at invoke (polyfills.733a0246794ccdcf00a6.js:1) at n.args. (polyfills.733a0246794ccdcf00a6.js:1)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/KevCJones/ngx-simple-modal/issues/57?email_source=notifications&email_token=AAFJ54AWG3VBIXTMUM77V6DQFQTYDA5CNFSM4IN2QBJ2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HGJ4I3Q, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFJ54EM5VS4L7L7K5HWX7TQFQTYDANCNFSM4IN2QBJQ .

achasoft commented 5 years ago

Angular CLI: 8.2.2 Node: 10.16.3 OS: darwin x64 Angular: ...

Package Version

@angular-devkit/architect 0.802.2 @angular-devkit/core 8.2.2 @angular-devkit/schematics 8.2.2 @schematics/angular 8.2.2 @schematics/update 0.802.2 rxjs 6.4.0

achasoft commented 5 years ago

npm install nor yarn install works due to typescript version mismatch Screen Shot 2019-08-20 at 11 54 41 PM so ng serve is can not be run

kevcjones-archived commented 5 years ago 
    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 8.0.6
Node: 10.16.0
OS: win32 x64
Angular: 8.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.800.6
@angular-devkit/build-optimizer   0.800.6
@angular-devkit/build-webpack     0.800.6
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.0.6
@angular/cli                      8.0.6
@angular/http                     7.2.15
@ngtools/webpack                  8.0.6
@schematics/angular               8.0.6
@schematics/update                0.800.6
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

This is currently the working setup i'm using - you could try going back to Typescript 3.4.5, we're using this in production at the moment with Angular 8. I've not checked but has the CLI started installing TS > v3.5 yet?

kevcjones-archived commented 5 years ago

i can see the issue though - it's largely that this has not been updated yet to 8.2 which is where they've started using TS version > 3.5.

https://github.com/angular/angular-cli/issues/15134 sounds familiar to your issue, and i can see we're not on 8.2.2 🤦‍♂

I'll update but it won't be tonight, probably later this week, unless you want to try it yourself and PR it.

achasoft commented 5 years ago

i downgraded to below but same problem

"@angular/animations": "^8.0.2", "@angular/cdk": "^8.1.3", "@angular/common": "^8.0.2", "@angular/compiler": "^8.0.2", "@angular/core": "^8.0.2", "@angular/forms": "^8.0.2", "@angular/platform-browser": "^8.0.2", "@angular/platform-browser-dynamic": "^8.0.2", "@angular/router": "^8.0.2",

achasoft commented 5 years ago

please help me out here, we didnt have any problem with angular 7 but we had to migrate to version 8, we have show day in 3 days and our running application is not working since no modal opens :|

kevcjones-archived commented 5 years ago

Are you able to send a sample project replicating the issue. Something I can clone this end and help more that way?

On Tue, 20 Aug 2019, 22:06 Navid Kianfar, notifications@github.com wrote:

please help me out here, we didnt have any problem with angular 7 but we had to migrate to version 8, we have show day in 3 days and our running application is not working since no modal opens :|

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/KevCJones/ngx-simple-modal/issues/57?email_source=notifications&email_token=AAFJ54H2OPWQ7Q3BYG2PMULQFRMFTA5CNFSM4IN2QBJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XVD3Q#issuecomment-523194862, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFJ54AS6MZ5IMY7OAOITFTQFRMFTANCNFSM4IN2QBJQ .

achasoft commented 5 years ago

you need the whole source code to run it :D the thing is there is no problem in development mode so i dont know where should i look, and the problem shows as soon as i subscribe on modal, i replaced the template to hello world but still it is not opening in production, but not problem in development

achasoft commented 5 years ago

the last line of error is

t.toggleWrapperClass

i dont know if it helps

kevcjones-archived commented 5 years ago

The two things I'd need are a repo of your hello world example pushed up.. And the full output of your 'ng version'.

I need to see both your global cli version, node version, then I can recreate it locally. I can run in production mode locally

Also is the issue in all browsers or just one?

Happy to lend some time, but as the old addage goes "works on my machine", so pretty hard to do much.

One suggestion I have if you want to try. Copy my versions from above, delete your package lock file, on the typescript version change to ~3.4.5 and then delete and reinstall your node_modules.

On Tue, 20 Aug 2019, 22:51 Navid Kianfar, notifications@github.com wrote:

you need the whole source code to run it :D the thing is there is no problem in development mode so i dont know where should i look, and the problem shows as soon as i subscribe on modal, i replaced the template to hello world but still it is not opening in production, but not problem in development

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/KevCJones/ngx-simple-modal/issues/57?email_source=notifications&email_token=AAFJ54GLZC7DBYOSUSHHRALQFRRMRA5CNFSM4IN2QBJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XYUMY#issuecomment-523209267, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFJ54EWCQOXJ7R7R5DXYULQFRRMRANCNFSM4IN2QBJQ .

achasoft commented 5 years ago

found the problem, in production in

private toggleWrapperClass(modalWrapperEl: ElementRef, wrapperClass: string)

the wrapperClass is undefined, i added if (!wrapperClass) { wrapperClass = 'modal fade-anim in'; }

for now it works

achasoft commented 5 years ago

i had to move your module in to my source code so, no dependency problem :)

maciejrybczonek commented 4 years ago

@achasoft I had the same problem. Adding full config in module imports fixed it.


            { container: 'modal-container' },
            {
                animationDuration: 300,
                autoFocus: true,
                bodyClass: 'modal-open',
                closeOnClickOutside: true,
                closeOnEscape: true,
                wrapperClass: 'in',
                wrapperDefaultClasses: 'modal fade-anim'
            }
        )