I created an Angular project, inside it I init Firebase Cloud Functions. My folder become like this:
project-root
node_modules
src
app
(angular components)
functions
node_modules
src
index.ts
I want some of my typescript classes can be used in both Cloud Functions and Angular, without making copies in both folder, but I don't know how to do it.
If possible, I also want them to share same node-modules.
I found a solution that fits my need.
Instead of making a folder above functions and Angular app, just use functions normally and let Angular use files in functions folder.
In Angular's tsconfig.json
{
"compilerOptions": {
"paths": {
...
"@functions/*":["functions/src/*"]
},
...
}
In Angular's ts file
import { YourClass } from '@functions/your-class.ts'
The final requirement is to let functions use Angular's npm dependencies.
Go to Angular's package.json, copy the dependencies you need into functions/package.json.
//functions/package.json
{
"dependencies": {
...
"rxjs": "~6.4.0"
},
...
}
Now you can use dependencies like rxjs in cloud functions like in Angular without npm install it inside functions.
//functions/src/index.ts
import { Observable, of } from 'rxjs';
I'm trying the 3rd package approach like https://fireship.io/lessons/how-to-structure-a-large-web-app-project/
I think I have it working but now it introduces new problems. Like each time a small change is made to the code in the 3rd package I have to rebuild a package, copy it where it is needed, npm install, etc. Don't know how to do this build automation yet. And definitely not happy about losing hot-reload in Angular, so this may be worse than duplicating all the files.
===
Actually, using npm link it seems possible to enable the consumers of the package to almost instantly get changes when it is compiled. Still testing this.
I had a similar issue. My solution was to create a 3rd package that holds shared interfaces, classes, and utils. Then I declared that shared package as a dependency in both the Angular project package.json and the /functions/package.json.
An alternative solution to this problem is to use relative paths from the function files like this:
import { MyClass} from '../../src/MyClass';
When using this solution you will get problem if your referenced files imports other files using paths with the @ character, like this:
import { OtherClass} from '@/classes/OtherClass'; // this will probably NOT work
Too solve this you need to replace all such paths in referenced files with simple relative paths.
You also need to change the path to the main file in your functions/package.json file, since the compiler will need to add the full directory structure in your lib-folder. In my case the new path needed to be:
lib/functions/src/index.js
