Angular 10: Unable to write a reference

Question

I tried upgrading from angular 8 to 10 following angular update guide.

My project is consisting of core application, shared (2 libs, google map and shared components) and one extra apk fsm (2libs, the application and its metadata).

Build of core and shared are passing but fsm build is failing with "ERROR: Unable to write a reference to ChipComponent in C:/Users/PATH/fsm-frontend/node_modules/shared-frontend/src/components/chip/chip.component.ts from C:/Users/PATH/fsm-frontend/node_modules/shared-frontend/src/components/chip/chip.module.ts " error.

There is not a problem with ChipComponent itself but maybe in some import or tsconfig.

Shared tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "downlevelIteration": true,
        "importHelpers": true,
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2020",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ],
        "paths": {
            "shared-frontend": [
                "dist/shared-frontend"
            ],
            "shared-frontend/*": [
                "dist/shared-frontend/*"
            ],
            "map": [
                "dist/map"
            ],
            "map/*": [
                "dist/map/*"
            ]
        }
    }
}

FSM tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "importHelpers": true,
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2020",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ],
        "paths": {
            "fsm-frontend": [
                "dist/fsm-frontend"
            ],
            "fsm-frontend/*": [
                "dist/fsm-frontend/*"
            ],
            "@angular/*": [
                "./node_modules/@angular/*"
            ],
            "rxjs": [
                "./node_modules/rxjs"
            ],
            "zone.js": [
                "./node_modules/zone.js"
            ],
            "@ngx-translate/*": [
                "./node_modules/@ngx-translate/*"
            ],
            "shared-frontend": [
                "./node_modules/shared-frontend"
            ],
            "primeng": [
                "./node_modules/primeng"
            ],
            "tslib": [
                "./node_modules/tslib"
            ],
            "fsm-metadata": [
                "dist/fsm-metadata"
            ],
            "fsm-metadata/*": [
                "dist/fsm-metadata/*"
            ]
        }
    }
}

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/shared-frontend",
  "lib": {
    "entryFile": "src/public_api.ts"
  }
}

shared structure:

projects - map
              - shared-frontend
                     -src
                           - ...
                           -components
                                       -...
                                       -chip
                                             -chip.component.ts
                                             -chip.module.ts
                                        -index.ts 

                      -lib
                         -shared-frontend.module.ts
                       ...
                       pubic_api.ts

shared-frontend.module.ts:

... // exports including:
export * from '../components/index';
@NgModule({
    imports: [CommonModule],
    exports: [
        CommonModule,
...
        ChipModule,
...
    ]
})
export class SharedModule {
    static forRoot(): ModuleWithProviders<SharedModule> {
        return {
            ngModule: SharedModule,
            providers: [
                SERVICES.....
            ]
        };
    }
}

index.ts from chip:

...
export * from './chip/chip.module';
export * from './chip/chip.component';
...

pubic_api.ts

export * from './lib/hive-shared-frontend.module';

ng serve also works but apk looks like its not using anything from shared. ng build fsm-frontend --prod also passes..

BTW I am linking both shared(map and frontend) and fsm(frontend and metadata) to core via npm link and shared to fsm via npm link

EDIT: does order of exports in barrel files matter?

Answer 1

I'm building a library and an app in the same project. My problem came when a interface definition was auto imported. The path referenced was a public api file instead of the library.

The auto imported created: import { AbcInterface } from 'projects/mylib/src/public-api'

Needed to be import { AbcInterface } from '@mylib'

So do a global search in your application for 'projects/ and change your references.

Answer 2

After spending 20mn looking for a similar error... I just realised that the actual error is just a linting one!

I'm using NX and therefore I'm importing many of my libs by using custom TS paths like @my-workspace/my-lib.

While developing the feature I did not realise that my IDE imported a file from another library with a relative path (instead of the custom TS path with @).

Therefore, the file I was trying to import was technically out of the rootDir (in tsconfig).

All I had to do was (run my linting and realise it was failing miserably) + replace all my relative imports of other libraries into absolute imports using the custom TS path.

EDIT: This just happened to me again and for a different reason! So sharing that new one as well.

I have a library that I've decided to split in sub entries so that they can be tree shaken. That said, the name of the library defined in my package.json (of the library, not the top level one) was the wrong one. Make sure it does match what you're trying to import.

EDIT: I can confirm that once again I got bitten by this and somehow still managed to loose 1h because of the wrong name in the lib package.json and the obscure error...