Where do custom Typescript classes go?

#1

Hi all,

Hope this isn’t off topic for this forum - if so, please redirect me :slight_smile: .

I’ve written a custom class and imported it. The class file, BallotItem.ts - a typescript file, is in node_modules/BallotItem.ts. Things compile fine:

bschuma-MacBookPro1:ttvBMD bret$ ionic serve
Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703
–nobrowser - Ctrl+C to cancel
[17:31:30] watch started …
[17:31:30] build dev started …
[17:31:30] clean started …
[17:31:30] clean finished in 4 ms
[17:31:30] copy started …
[17:31:30] deeplinks started …
[17:31:30] deeplinks finished in 31 ms
[17:31:30] transpile started …
[17:31:33] transpile finished in 2.97 s
[17:31:33] preprocess started …
[17:31:33] preprocess finished in less than 1 ms
[17:31:33] webpack started …
[17:31:33] copy finished in 3.23 s
[17:31:40] webpack finished in 6.18 s
[17:31:40] sass started …
[17:31:41] sass finished in 1.07 s
[17:31:41] postprocess started …
[17:31:41] postprocess finished in 13 ms
[17:31:41] lint started …
[17:31:41] build dev finished in 10.45 s
[17:31:41] watch ready in 10.49 s
[17:31:41] dev server running: http://localhost:8100/

[OK] Development server running!
Local: http://localhost:8100
External: http://192.168.1.147:8100
DevApp: ttvBMD@8100 on bschuma-MacBookPro1

[17:31:43] lint finished in 2.70 s

However, in the browser, as the app starts, I get this and everything halts:

Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/bret/TTV/ttvBMD/node_modules/BallotItem.js’
at Object.extend (http://localhost:8100/build/vendor.js:129856:7)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.223 (http://localhost:8100/build/main.js:49:69)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.308 (http://localhost:8100/build/main.js:230:75)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.258 (http://localhost:8100/build/main.js:170:73)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.234 (http://localhost:8100/build/main.js:151:70)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)

So, I created a *.ts (typescript file) and it’s not finding a *.js of the same name (BallotItem.js).

Where do my custom app classes belong? I had thought they would belong in the app/src directory, but the file cannot be found at all if I put it there . In tsconfig.json I have moduleResolution set to “node”, so node_modules is searched for source files. Sure enough, if I put the custom class there it’s found, but I get the “can’t find *.js” error above.

Any hints? Pointers?

Thanks!

Bret

#2

When you make a custom class it all gets bundled in some numbered .js files the framework creates in www/build.

Having said that the framework does not compile anything on the node modules, and I don’t understand why you would put it there. If you want to create a custom node module just follow how to create one from npmjs.org.

If you just want to create a custom class just make a custom folder inside src and just put the custom .ts there.

For example in my project I have a folder called common that contains all my custom function, classes or interfaces that I import as I wish.

#3

Thanks, Bandito! I’ll give that a shot. I assume that requires no changes to the moduleResolution or any other tsconfig.json params?

Thanks for the lightspeed reply! :slight_smile:

Bret

#4

This is a strange question. I’m tempted to say “no,” but if you are asking the question, maybe you changed them already? Anyway, put it in src, as a ts file, remembering to declare your class with export, inside the most thematically appropriate folder, and import it into any other ts file that needs it.

In general, don’t touch tsconfig.json. You only need to do that if you’re importing a library that doesn’t know what Angular is, more or less.

#5

Thanks - fairly new to Typescript and Angular… I’m a Java guy. In trying to debug this I found lots of people pointing to changes in tsconfig.json. I read up about the moduleResolution, which led me to putting things in node_modules since it’s explicitly searched for things. I’m having better luck now by putting things in a folder off src, as suggested. :slight_smile:

Thanks,

Bret

2 Likes
#7

Pretty much you can put all your custom classes anywhere you want as long as they inside the src folder and they have the export command ( export class myClass {…} ). It will just compile to whatever I said before.

#8

Thanks, man :slight_smile: . I have the export in there. Fighting other issues now… the stacktraces aren’t real helpful, though - they point to vendor.js and main.js instead of code I wrote. If I open www/build/main.js I can sort of pinpoint what the error is telling me.

#9

yeah…debugging is a pain. Between Angular and ionic are a lot of scripts so it is harder than expected.

Use Console.log(), tslint and the command debugger (create a breakpoint) helps a lot.