I'm upgrading my Angular books for Angular 13. Angular 13 uses ivy all the time and I'm running into lots of problems with staggered dependencies on third party libraries that don't come from the Angular team. In this case, I was not able to install the ngx-datatable library. If I upgraded a project it worked great, but if I tried to install it anew it gave me a ton of issues.
So, I said, let me get a local version of the library, upgrade it, and link it. This looked like it was going to work until I tried to use the library. Angular threw a runtime errror:
2Error: inject() must be called from an injection context
3 at injectInjectorOnly (core.mjs:4768)
4 at ??inject (core.mjs:4778)
5 at Module.??directiveInject (core.mjs:14717)
6 at NodeInjectorFactory.DatatableComponent_Factory [as factory] (datatable.component.ts:59)
7 at getNodeInjectable (core.mjs:3556)
8 at instantiateAllDirectives (core.mjs:10293)
9 at createDirectivesInstances (core.mjs:9642)
10 at Module.??elementStart (core.mjs:14840)
11 at TaskGridComponent_Template (task-grid.component.html:5)
12 at executeTemplate (core.mjs:9613)
13 at resolvePromise (zone.js:1213)
14 at resolvePromise (zone.js:1167)
15 at zone.js:1279
16 at ZoneDelegate.invokeTask (zone.js:406)
17 at Object.onInvokeTask (core.mjs:25840)
18 at ZoneDelegate.invokeTask (zone.js:405)
19 at Zone.runTask (zone.js:178)
20 at drainMicroTaskQueue (zone.js:582)
21 at invokeTask (zone.js:491)
22 at ZoneTask.invoke (zone.js:476)
I banged my head on this for a while. Turns out, this is an error that sometimes happen when using locally linked libs. I had to enable "preserveSymLinks" in the Angular.json of the main project.
Open up the Angular.json and find `project.projectName.architect.build.options`:
2 "outputPath": "dist/task-manager",
3 "index": "src/index.html",
4 "main": "src/main.ts",
5 "polyfills": "src/polyfills.ts",
6 "tsConfig": "tsconfig.app.json",
7 "assets": [
8 "src/favicon.ico",
9 "src/assets"
10 ],
11 "styles": [
12 "src/styles.css",
13 "node_modules/bootstrap/dist/css/bootstrap.css",
14 "node_modules/@swimlane/ngx-datatable/themes/bootstrap.css"
15 ],
16 "scripts": [],
17 "preserveSymlinks": true // <--- this is what I had to add
18 },
Once that was in, I was able to re-run ng serve and the app started working again.
posted by Jeffry Houser in
Angular
| 0 Comments
