use ts-nameof with Angular CLI

[decoder318]

I am not sure if I looked at the right places I couldn't find any useful info on how to use it in an Angular CLI Project..

[dsherret]

Hey @decoder318, I'm not familiar with angular cli, but it seems like they have the whole build system pretty locked down. I know it uses webpack though, so it seems like it's possible to add a custom webpack configuration using a 3rd party library...

https://stackoverflow.com/questions/51068908/angular-cli-6-custom-webpack-config

...then follow the webpack instructions...

https://github.com/dsherret/ts-nameof/blob/master/setup/webpack.md

Hopefully that works. Let me know.

[lonix1]

@decoder318 I've just setup an Angular project, and it seems to work.

So just follow the official docs exactly. If you already have it working in a server app then just copy-paste those settings exactly.

[luker2]

@dsherret I followed your instructions above to use ts-nameof in ngx-admin, by modifying their angular.json. Things compile, but in chrome dev tools I get: ERROR Error: Uncaught (in promise): ReferenceError: nameof is not defined

One unusual thing I noticed - webstorm usually auto-imports 3rd party libs for me, but with ts-nameof, webstorm sees the .d.ts definition file, but I don't have an actual import line at the top of my file.

Anything else I might try?

[dsherret]

@luker2 seems like ngx-admin uses angular 7 and perhaps the instructions I posted earlier only work for angular 6. I'm not sure how to make it work with 7, but basically those libraries need to support custom transformers or you'll have to wait for the TypeScript compiler to support transforms specified in tsconfig.json :( Since you're getting that error message, it seems the transform is not happening.

As for the types, you should just be able to run: npm install @types/ts-nameof --save-dev and there should exist a global nameof function (no importing unless you're using ts-nameof.macro with Babel). One thing is if you have a "types" property in your tsconfig.json then you will need to specify "ts-nameof" there. For example: "types": [ "node", "mocha", "ts-nameof" ]

[luker2]

@dsherret aw, unfortunately "types" wasn't the answer. I'll continue to poke around at angular 7 solutions. I'm really hoping to use ts-nameof at some point, since some libs (like ag-grid) require you to pass object properties as strings - and things start to mysteriously break - yuck.

[dsherret]

@luker2 that's strange. It might be a webstorm issue. Another thing you can try is adding a separate declaration file (ex. references.d.ts) to your project and then reference the ts-nameof declaration file in that via a triple slash reference:

/// <reference path="node_modules/types/ts-nameof/index.d.ts" />

Alternate non-ts-nameof solution for properties as strings

If you're just needing properties as strings you may want to consider using this solution:

// nameof.ts
export function nameof<T>(propertyName: keyof T) {
    return propertyName;
}

// otherFile.ts
import { nameof } from "./nameof";

interface Person {
    name: string;
}

nameof<Person>("name"); // ok
nameof<Person>("other"); // error

It's not as powerful or nice to use, but it should help get you the type safety for those properties in the meantime.

[luker2]

@dsherret I'm doubting it's webstorm, since their "go to" functionality takes me right to the ts-nameof declaration file, so it's finding it. I'm thinking it's the actual transform like you mentioned before. The ///reference method didn't work for me.

Your alternate solution will work great for what I need though! Just not as nice as nameof<MyInterface>(o => o.prop) as I was hoping to use from the docs. Thanks!!

[dsherret]

@luker2 ah yeah sorry I was misunderstanding the problem. I thought the type declaration wasn't working as well (I thought there was a compile error), but yes it seems like it's just the transform that's not running.

Cool, I'm glad at least that alternative solution is helpful. I agree it's not as nice, but at least you'll have type safety :)

[patrykdawid]

@dsherret Hi! Has anything been agreed on this topic since May?

[dsherret]

@patrykdawid I'm not sure how to get it to work. Maybe try https://github.com/nonara/ts-patch/ and patch the typescript package that angular is using?

[patrykdawid]

Unfortunately, I was unable to connect ts-patch and ts-nameof. Any help is appreciated

[Jakartoine]

@dsherret your solution's still working in Angular 11 :-)

You might close this ticket.

[spyro2000]

I also wasn't able to set this up for Angular 11. Get compiling errors and errors in chrome. Installed ts-nameof along with type definitions.

[tscislo]

Last comment here, was helpful to me: https://stackoverflow.com/questions/59937480/trying-to-use-ts-nameof-in-angular-project-via-ts-patch I was able to run ts-nameof with Angular 12, however not in build time, only for serve. When I build my poroject with Ivy I get: Uncaught (in promise): ReferenceError: nameof is not defined Does anyone have any suggestions?

[tscislo]

Finally I endedup using https://www.npmjs.com/package/ts-simple-nameof which works fine with Angular 12