3

I'm using the firebase emulator suite including the cloud functions emulator, on an angular/fire project. firebase tools 9.23.1. Typescript version 4.5.4. In package.json the main property is "main": "lib/index.js", Development environment is MacOS 12.1.

I run tsc -w to watch the functions project's src folder and transpile on any changes. Then I start the emulator using firebase emulators:start. The emulator suite succeeds in starting, and the cloud functions run with the code contained in the functions at start time.

And when I save a change to the code in a .ts file in /src, the .js file in the main folder immediately reflects those changes; tsc -w seems to be watching and transpiling as expected.

But when I call emulated functions after that, they still run the old code, from before the save and transpile. Cloud firestore's documentation says:

Note: Code changes you make during an active session are automatically reloaded by the emulator. If your code needs to be transpiled (TypeScript, React) make sure to do so before running the emulator. You can run your transpiler in watch mode with commands like tsc -w to transpile and reload code automatically as you save.

I don't know what I'm missing here. I get the same behavior whether I use scripts to launch the watcher and emulator or if I do it by hand. I've also tried using firebase serve --only functions and firebase serve:shell with no luck. Is there a flag I need to use on firebase emulators:start to convince the emulator to watch for changes?

Jacob Small
  • 96
  • 8

2 Answers2

4

The tsconfig.json file is a Typescript configuration file. You may use that file to set up the compiler, establish code formatting rules, and most crucially, tell it about the TS files in your project. You've got it. If you want to keep an eye on the files, use the 'watch' flag: tsc --watch in your package scripts.

tsc-watch was developed to make TypeScript development easier. Similar to nodemon but for TypeScript, this command is commonly used to restart a node server.

Script example:

"scripts": { 
   "serve": "npm run build -- --watch | firebase emulators:start --only functions", 
   ... 
}`

And here is an example tsconfig.json file:

{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": false, "noImplicitAny": false, "removeComments": true, "noLib": false }, "include": [ "**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ]}

The other option that may not be perfect, is to stop and re-run the emulator.

Jose German Perez Sanchez
  • 1,103
  • 4
  • 16
1

The more I read online, I started to get suspicious that my problem was unique to me. I've seen other cases where folks were reporting similar behavior and it wasn't reproducible, meaning I had a latent problem somewhere in my app.

So I was looking through my app module and realized that I had some old angularfire imports in there. I've since upgraded to angularfire 7.2, but these were still there and, apparently, messing with my local emulation. They're removed now and all is well. Thanks for your eyes.

    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideRemoteConfig(() => getRemoteConfig()),
    provideStorage(() => getStorage()),```
Jacob Small
  • 96
  • 8