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:

view plain print about
1core.mjs:6495 ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
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`:

view plain print about
1"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.