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?

Looks like this issue: github.com/angular/angular/issues/29361 — inorganik
– inorganik, Commented Oct 29, 2020 at 15:24
@inorganik i saw that thread and unfortunately didnt resolve my problem. I tried changing paths from dist to projects and adding rootDir :'.' to both tsconfig files — ssapp
– ssapp, Commented Oct 29, 2020 at 15:29

afriedman111 · Accepted Answer · 2022-01-19 15:53:51Z

6

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.

edited Jan 19, 2022 at 15:53

answered Sep 3, 2021 at 18:02

afriedman111

2,4615 gold badges30 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maxime1992 · Accepted Answer · 2021-11-29 13:56:37Z

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...

Andrii Goshovskiy · Accepted Answer · 2022-07-27 10:48:44Z

0

Here is the solution that worked for me.

I am using working with NX and having multiple libraries. After importing one library into another received the same error. The issue was that the library name in package.json differed from the library path declared in tsconfig.json.

The package.json name - @test/my-lib

tsconfig.json path - @test/my-lib-main

After changing tsconfig.json path to @test/my-lib and the imports to @test/my-lib the build was successful.

answered Jul 27, 2022 at 10:48

Andrii Goshovskiy

263 bronze badges

Collectives™ on Stack Overflow

Angular 10: Unable to write a reference

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related