If you're reading this, then there's a pretty good chance you just imported a custom-made module into an Angular application and you're taking it for a test drive.

But lo and behold, when you try to display the contents of a component, you get this error: "Cannot read property 'bindingStartIndex' of null."

Hey, we've all not been there.

But I have.

And in this article, I'll show you how to fix it. Because I'm cool like that.

What's Going On

I'll bet you followed some nifty tutorial on creating your own Angular library. You wanted to be a good programmer and keep everything modular.

Well they told how to create a library. But they didn't tell how to fix this problem.

Again I'll take a guess: you did not publish your library to npm. Otherwise, you wouldn't notice the issue.

So that's one quick fix, by the way. Publish your library to npm and you'll escape the bindingIndex pest.

The problem lies with the fact that you installed a local library instead of something from npm. Although everything seemed to go smoothly during the installation process, something broke when you ran ng serve.

The issue is that your custom library @NgModule is located in a different /node_modules directory than the application that's using it.

In a nutshell: Angular gets konfused.

But there's a fairly easy solution.

preserveSymLinks

Open up your angular.json file in the root of your source tree.

In that JSON file navigate to the object called "projects." Then look for the name of your project in quotation marks. 

Next, traverse to "architect," then "build," then "options."

And add the following line after everything else in that "options" object:

"preserveSymlinks":  true

The whole thing will look something like this:

...
  "projects": {
    "careydevelopmentcrm": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/careydevelopmentcrm",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": [],
            "preserveSymlinks":  true
          },
...

Note the last line.

Once you're done adding "preserveSymLinks," save the file.

And here's the important part: stop the server and restart it. Don't just Ctrl-S and expect it to work instantly. That doesn't fly here.

At that point, your problem should be gone.

Advanced Surgery

There's another option you can follow. Open tsconfig.json (also in the root) and add these lines to the "compilerOptions" section:

    "paths": {
      "@angular/*": [
        "./node_modules/@angular/*"
      ],
      "carey-user": [
        "../usermodule/projects/carey-user/src/public-api"
      ]

Just keep in mind: any place you see "carey-user" or "usermodule" you're going ot have to substitute your own library name and path segment.

Once again, restart the whole server. None of this Ctrl-S stuff.

If the first option didn't work, this one should do the trick.

Wrapping It Up

I hope that helped. 

If you're still experiencing problems, then you likely have a chronic issue that requires some additional attention.

But I'm sure you'll solve it with the help of your favorite search engine.

Have fun!

Luca Huter on Unsplash