Help needed upgrading from v1

[turnono]

Hi, I am having trouble trying to upgrade from v1 to v2. I am using "@nx/angular": "16.10.0" . I have multiple Angular projects in my workspace. The confusion for me is the Firebase application vs Firebase Function Application? In v1, when I serve my project it serves my angular project, but in v2 it instead runs the functions in watch mode and the emulators?

Can anyone please assist with this, or alternatively share an example of an angular project using v2 of this plugin?

Here is the basic structure of my v1 workspace:

nx workspace |─── apps │ |─── app1 │ │ |─── functions │ │ │ |─── public │ │ │ │ └── index.html │ │ │ |─── src │ │ │ │ └── index.ts │ │ │ |─── eslintrc.json │ │ │ |─── runtimeconfig.json │ │ │ |─── database.rules.json │ │ │ |─── firestore.indexes.json │ │ │ |─── package.json │ │ │ |─── package-lock.json │ │ │ |─── project.json │ │ │ |─── tsconfig.app.json │ │ │ |─── tsconfig.json │ │ │ |─── tsconfig.spec.json │ │ │ |─── readme.md │ │ │ |─── firestore.rules │ │ │ |─── storage.rules │ │ │ └── jest.config.ts │ │ |─── src │ │ │ |─── app │ │ │ │ |─── app-routing.module.ts │ │ │ │ |─── app.component.html │ │ │ │ |─── app.component.scss │ │ │ │ |─── app.component.spec.ts │ │ │ │ |─── app.component.ts │ │ │ │ └── app.module.ts │ │ │ |─── environments │ │ │ │ |─── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ |─── theme │ │ │ │ └── variables.scss │ │ │ |─── index.html │ │ │ |─── main.ts │ │ │ |─── polyfills.ts │ │ │ |─── styles.scss │ │ │ └── test-setup.ts │ │ |─── eslintrc.json │ │ |─── package.json │ │ |─── project.json │ │ |─── tsconfig.app.json │ │ |─── tsconfig.editor.json │ │ |─── tsconfig.json │ │ |─── tsconfig.spec.json │ │ └── jest.config.ts │ |─── app2 │ │ |─── functions │ │ │ |─── public │ │ │ │ └── index.html │ │ │ |─── src │ │ │ │ └── index.ts │ │ │ |─── eslintrc.json │ │ │ |─── runtimeconfig.json │ │ │ |─── database.rules.json │ │ │ |─── firestore.indexes.json │ │ │ |─── package.json │ │ │ |─── package-lock.json │ │ │ |─── project.json │ │ │ |─── tsconfig.app.json │ │ │ |─── tsconfig.json │ │ │ |─── tsconfig.spec.json │ │ │ |─── readme.md │ │ │ |─── firestore.rules │ │ │ |─── storage.rules │ │ │ └── jest.config.ts │ │ |─── src │ │ │ |─── app │ │ │ │ |─── app-routing.module.ts │ │ │ │ |─── app.component.html │ │ │ │ |─── app.component.scss │ │ │ │ |─── app.component.spec.ts │ │ │ │ |─── app.component.ts │ │ │ │ └── app.module.ts │ │ │ |─── environments │ │ │ │ |─── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ |─── theme │ │ │ │ └── variables.scss │ │ │ |─── index.html │ │ │ |─── main.ts │ │ │ |─── polyfills.ts │ │ │ |─── styles.scss │ │ │ └── test-setup.ts │ │ |─── eslintrc.json │ │ |─── package.json │ │ |─── project.json │ │ |─── tsconfig.app.json │ │ |─── tsconfig.editor.json │ │ |─── tsconfig.json │ │ |─── tsconfig.spec.json │ │ └── jest.config.ts |─── libs |─── utils |─── firebase.app1-functions.json |─── firebase.app1-functions-prod.json |─── firebase.app2-functions.json |─── firebase.app2-functions-prod.json |─── firebase.json |─── jest.config.ts |─── jest.preset.js |─── nx.json |─── package-lock.json |─── package.json |─── pubsub-debug.log |─── README.md |─── tsconfig.base.json └── ui-debug.log

[simondotm]

If you've not already seen it, there's a migration guide here: https://github.com/simondotm/nx-firebase/blob/main/docs/nx-firebase-migrations.md#migration-from-plugin-v1x-to-v200

I use angular and firebase in my projects, and yes its a slightly different workspace layout for v2 - functions are separate Nx projects now, but they are linked to a firebase application project.

You probably want to refactor to a layout like this:

• apps
  • firebase-app1
  • functions-app1
  • angular-app1
  • firebase-app2
  • functions-app2
  • angular-app2
• firebase.json (for app1)
• firebase.app2.json (for app2)

or maybe group in directories like this:

• apps
  • app1
  • firebase
  • functions
  • angular
  • app2
  • firebase
  • functions
  • angular
• firebase.json (for app1)
• firebase.app2.json (for app2)

In either scenarios, you will want to serve both your firebase app and your angular app together at the same time.

You'll also want to ensure your angular apps build to dist/apps/app1/angular and update your firebase.json config hosting to point to there so it will be deployed to firebase web hosting.

[turnono]

Thank you so much for this. I have taken the "group in directories" approach and its working fine now.