How to generate NPM package for protoc compiled Typescript

I have a desire to create a reusable NPM package for consumption in Angular 18+ (using old build system) based upon a set of .proto files. The desired usage would be a simple installation of the npm package via npm install @scope/my-package within the Angular project. Then within a component's .ts file, I would like to reference the objects from the Typescript files generated from the proto definitions.

Example proto:

message Person {
string name = 1;
int age = 2;
}


Example intended use in Angular component .ts file (syntax not guaranteed!):

import { Person } from "@scope/my-package";

...

personInstance: Person = new Person();

...

personInstance.SetName("Darth");
personInstance.SetAge(22);


The closest I believe I have to a command that would generate the correct files is (with paths possibly incorrect, I've removed IP sensitive / personal info from this):

.\node_modules\.bin\protoc.cmd" "--proto_path=.\app\proto" "--plugin=protoc-gen-ts=.\node_modules\.bin\protoc-gen-ts.cmd" "--ts_out=service=grpc-web:.\generated" "--js_out=import_style=commonjs,binary:.\generated" ".\app\proto\Person.proto"


When this is complete, I have Person_pb.d.ts and Person_pb.js files generated in the output folder (./generated).

Consuming these files in our applications before wanting to create a reusable library, we would simply: add an import statement in an Angular component/service .ts file:

import { Person } from '/generated/Person_pb';

And then this could be consumed:

personInstance: Person = new Person();

...

personInstance.SetName("Darth");
personInstance.SetAge(22);


However When trying to import these files from the NPM package generated containing the /generated/* files, using the following package.json contents within the NPM package:

{
"name": "@scope/my-package",
"version": "0.0.0-test",
"main": "generated/Person_pb.js",
"files": [
"generated/",
"generated/Person_pb.js",
"generated/Person_pb.d.ts"
],
"type": "module",
"scripts": {

},
"dependencies": {
"@improbable-eng/grpc-web": "^0.15.0",
"@protobuf-ts/protoc": "2.9.4",
"ts-protoc-gen": "0.15.0"
},
"config": {
"protocVersion": "3.20.3"
}
}


and a tsconfig.json file:

{
"compilerOptions": {
"module": "ESNext",
"target": "ES2020",
"moduleResolution": "node"
},
"include": ["generated/Person_pb.js"]
}


and using the command npm pack and npm publish (to our internal registry), I get a package with contents as follows:

my-package/
├──package.json
├──tsconfig.json
├──generate/
├──Person_pb.js
|──Person_pb.d.ts


and installing the package in my application via npm install @scope/my-package, and using it as previously shown, VS Code correctly autocompletes the import statements and links correctly to the definition files for the Person object, but on serving the application, when trying to use Person in such a way:

console.log('here ', Person);


I see "here undefined" in the console output, where I would expect to see a string interpretation of the class type, rather than undefined. When this was tested with the locally deployed files (not via NPM package), this produces the string interpretation as expected.

My collegues and I believe something different is done (possibly in WebPack) with node modules when resolving/importing .js/.d.ts files.

I've been unable to find any guides or threads with similar intent or issues and would really appreciate some assistance with getting this working.

Versions in use:

• Angular CLI: 18.2.20
• Node: 22.17.0
• Package Manager: npm 10.9.2
• OS: win32 x64

Continue reading...