Firebase Callable Function Emulator configuration not working

Question

I'm adding callable functions to an existing Angular/Firebase project. I've used what I believe to be the current configuration standards, but the project is still calling the production endpoints, leading to a cors exception.

configuration:

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    ...
  ],
  imports: [
    ...
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      const auth = getAuth();
      if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://localhost:5005', { disableWarnings: true });
      }
      return auth;
    }),

-- FUNCTIONS CONFIG CODE --

    provideFunctions(() => {
      const functions = getFunctions();
      if (environment.useEmulators) {
        connectFunctionsEmulator(functions, 'localhost', 5001);
      }
      return functions;
    }),

-- FUNCTIONS CONFIG CODE --

    provideFirestore(() => {
      const firestore = getFirestore();
      if (environment.useEmulators) {
        connectFirestoreEmulator(firestore, 'localhost', 5006);
      }
      return firestore;
    }),
    //provideStorage(() => getStorage()),
    provideAnalytics(() => getAnalytics()),
    ...
  ],
  exports: [],
  providers: [...],
  bootstrap: [AppComponent]
})

The emulator is logging:

✔ functions[us-central1-addMessage2]: http function initialized (http://127.0.0.1:5001/{project-name}/us-central1/addMessage2).

The angular call to the endpoint is failing cors with:

Access to fetch at 'https://us-central1-{project-name}.cloudfunctions.net/addMessage2' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Answer 1

I figured it out with this two-part answer:

Part 1:

passed getApp() into getFunctions.

    -- FUNCTIONS CONFIG CODE --

    provideFunctions(() => {
      const functions = getFunctions(getApp());  << Notice <<
      if (environment.useEmulators) {
        connectFunctionsEmulator(functions, 'localhost', 5001);
      }
      return functions;
    }),

    -- FUNCTIONS CONFIG CODE --

Part 2:

Make sure to inject functions into components as apposed to calling getFunctions.

    constructor(private auth: Auth, private firestore: Firestore, 
        public dialog: MatDialog, private userService: UserService, 
        private func: Functions) {}           << Notice <<