2

I've started using since its version 18 and currently at 20.0.0

I am in the process of upgrading to its latest version - 22.1.1.

After resolving warning/errors due to breaking changes, everything - including 'ng serve' works fine.

However, when I try to build angular application in prod mode, it fails.

ERROR in ./app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'ag-grid-community/dist/lib/eventService' in 'C:\project\src\app'ERROR in ./main.ts
Module not found: Error: Can't resolve 'ag-grid-enterprise/main' in 'C:\project\src'

Below is the console log I get. Could anyone please help?

PS C:\projectDirectory> npm run build:prod

> project@0.0.1 build:prod <C:\projectDirectory>
> node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod --base-href ./

Browserslist: caniuse-lite is outdated. Please run next command `npm update`

Date: 2020-02-06T14:34:51.950Z
Hash: f5504506298058ba661b
Time: 303119ms
chunk {0} runtime.0feced4b926ef4569891.js (runtime) 2.35 kB [entry] [rendered]
chunk {1} 1.ff56049eefdf00546e5b.js () 20.1 kB [rendered]
chunk {2} common.778967e60acae82560b8.js (common) 1.59 kB [rendered]
chunk {3} 3.c9c6f4b4ee31655957c5.js () 68.6 kB [rendered]
chunk {4} 4.cd47c0ed33945d8a2cd1.js () 65.8 kB [rendered]
chunk {5} main.9f72bd0e6a2ce7cabf09.js (main) 1.13 MB [initial] [rendered]
chunk {6} polyfills.8c9e800099caebde3f97.js (polyfills) 151 kB [initial] [rendered]
chunk {7} polyfills-es5.1ecef396b36e47074889.js (polyfills-es5) 68.1 kB [initial] [rendered]
chunk {8} styles.40f4753a24be96f0632d.css (styles) 353 kB [initial] [rendered]
chunk {9} vendor.62a5b62a3c39ede2ff2f.js (vendor) 6.34 MB [initial] [rendered]
chunk {10} 10.36d9b310fedf245aa212.js () 123 kB [rendered]
chunk {11} 11.7f7517540c764751bd2c.js () 1.62 MB [rendered]
chunk {12} 12.79a7ea4d472beb37c285.js () 88.8 kB [rendered]
chunk {13} 13.4c9f9392997233b09d52.js () 318 kB [rendered]
chunk {14} 14.62996cef37bc77009502.js () 146 kB [rendered]
chunk {scripts} scripts.8af46854aabf37ded6dd.js (scripts) 125 kB [entry] [rendered]
ERROR in ./app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'ag-grid-community/dist/lib/eventService' in 'C:\project\src\app'ERROR in ./main.ts
Module not found: Error: Can't resolve 'ag-grid-enterprise/main' in 'C:\project\src'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@0.0.1 build:prod: `node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod --base-href ./`
Paritosh
  • 11,144
  • 5
  • 56
  • 74

3 Answers3

4

Seems you missed few things from migration guide.

Yes, it's not obvious but you need to change packages for that update.

Long story short: you have to use new packages started from 22.0.0

Wrong :

"ag-grid-angular": "22.1.1",
"ag-grid-community": "22.1.1",
"ag-grid-enterprise": "22.1.1"

correct:

"@ag-grid-community/all-modules": "22.1.1",
"@ag-grid-community/angular": "22.1.1",
"@ag-grid-community/core": "22.1.1",
"@ag-grid-enterprise/all-modules": "22.1.2"
un.spike
  • 4,857
  • 2
  • 18
  • 38
  • 1
    hey man! glad to see your answer! ya seems like I was unaware about the migration guide.. Let me give it a try and check. Thanks! – Paritosh Feb 07 '20 at 09:42
  • 1
    cuz I also faced with that issue but on my case, everything works properly except few things and it was a nightmare to explore the problem – un.spike Feb 07 '20 at 09:48
  • started getting compilation error after that. After installing, where should I `import '@ag-grid-enterprise/server-server-side-row-model'`? – Paritosh Feb 07 '20 at 10:26
  • 1
    have you imported all modules and included all of them in the grid itself? like `[modules]="modules"` and `public modules: any = AllModules;` `import {AllModules} from '@ag-grid-enterprise/all-modules';` – un.spike Feb 07 '20 at 10:29
  • oh you mean to say I have to *ATTACH* `AllModules` to the grid itself?? This is crazy! :O – Paritosh Feb 07 '20 at 10:39
  • @Paritosh basically this is my way (for now I don't care about app size, so I decided to include everything and avoid any kind issues with `import`, but for sure from v.22 you are able to decide what to include to decrease the bundle size) – un.spike Feb 07 '20 at 11:41
  • This is not correct. They are just two different approaches to include AG Grid in your project. What you have labeled as "wrong" is correct when working with AG Grid packages. You can read more about this here https://blog.ag-grid.com/minimising-bundle-size/ – Stephen Cooper Feb 14 '22 at 10:48
1

After talking with a colleague of mine about this, I don't believe the actual package references are incorrect. You can still do them the old way and just not take advantage of the module functionality.

I believe the root cause of your specific error is the "/main" reference, for example. Try changing the imports from

'ag-grid-community/dist/lib/eventService'
'ag-grid-enterprise/main'

to

'ag-grid-community'
'ag-grid-enterprise'

The specific paths are no longer warranted.

risingTide
  • 1,754
  • 7
  • 31
  • 60
0

They have we renamed ag-grid to ag-grid-community, so now you need to run

npm install --save ag-grid-community ag-grid-angular
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
  • that was already done during version 19 or 20. The issue is during transitioning from 20.0.0 to 22.1.1 – Paritosh Feb 07 '20 at 06:13