I'm having this problem when I try to use a igx-grid, all other components work fine.
Versions: package.json
Log in browser console:
zone-evergreen.js:797 Uncaught Error: Uncaught (in promise): TypeError: Cannot read property 'detach' of undefinedTypeError: Cannot read property 'detach' of undefined at new igniteui_angular_IgxGridBaseDirective (igniteui-angular.js:53832) at new igniteui_angular_IgxGridComponent (igniteui-angular.js:61347) at createClass (core.js:31985) at createDirectiveInstance (core.js:31807) at createViewNodes (core.js:44210) at callViewAction (core.js:44660) at execComponentViewsAction (core.js:44565) at createViewNodes (core.js:44239) at createRootView (core.js:44082) at callWithDebugContext (core.js:45632) at resolvePromise (zone-evergreen.js:797) at resolvePromise (zone-evergreen.js:754) at zone-evergreen.js:858 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:39680) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:559)
Hello Miguel,
Thank you for posting in our community.
I have created and attached a small sample trying to reproduce the behavior that you are experiencing. On my side, everything works as expected. There are no errors in the console and igxGrid is displayed properly.
Please test it on your side and let me know how it behaves.You can also try to delete the node_modules folder and run npm install.
If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.
Looking forward to hearing from you.
8540.Sample.zip
Hi Martin,
Thank you for you quick response.
Regarding your exemple I had already followed your page exemple and if I open other project the situation doesn't happen.Over the project with the problem I followed your suggestion of deleting the "node_module" folder but the result it's the same.
Is there a way to send you a zip with the project? I'm trying to attach the zip here but keeps giving error.Best regards,
Miguel Domingues
Once again thank you for your quick response.I will ask a colleague to execute the same process you did.Here I still get the problem I mentioned, even after clearing the node_modules folder and going to an older version of ignite-ui.
Can you tell me what version of angular-cli are you using?Tomorrow I will make a screencast with the problem and try to reproduce the problem on other computer.If possible over the root path call /grid1 please.
Best regards,
Hi Miguel,
The version I use is @angular/cli 8.3.25.
When I visit the /grid1 route, an empty igxGrid with loading indicator at first is displayed. In the console only the errors related to the backend API are printed.
Please let me know of the result of running the project on a different machine and when you are ready with the screencast.
I now can replicate the problem and you have a way to replicate it also.
Instead of ng serve, please start the application with npm run start35.
Inside package.json :
When I don't change the environment value running the ngserve, all works fine.
Can you please look at it ?
I have reproduced your issue and after further investigation, I believe I have found that the root cause for this behavior. When serving the application the default ts.config is used. By adding tsconfig-es5.app.json, in your configuration for qual35 inside the angular.js file, the issue is resolved on my side:
Please test this on your side and let me know if you need any further assistance with this matter.
You are the best, problem solved.Just added to each environment the TsConfig entry and the Grids are working.
Can you explain why the other components work perfectly and the Grid is the only that has problems?
I am glad that you find my suggestion helpful.
After further investigation, the issue appears to be related to how the project is built. When JIT compilation is used, in order igxGrid to work, the ES5 standard has to be used. I am currently investigating why exactly this is happening. Note that you can use the AOT compilation with ES2015 standard if you want:
"qual35": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.qual35.ts" } ], "optimization": true, "aot": true }