Another RXJS "ERROR TypeError: Object(...) is not a function" problem

Question

I looked here on StackOverflow and other sites and nothing I've seen or tried seems to help, so I'm throwing this out here.

When I do a simple build ng b everything runs fine. When I build our application using ng b --prod --aot=true and then run it I get the following exception:

ERROR TypeError: Object(...) is not a function
    at CG.getAPIURLs (main.f5019b5d20f499feb949.js:1)
    at new Ou (main.f5019b5d20f499feb949.js:1)
    at Sn (main.f5019b5d20f499feb949.js:1)
    at xn (main.f5019b5d20f499feb949.js:1)
    at Cr (main.f5019b5d20f499feb949.js:1)
    at br (main.f5019b5d20f499feb949.js:1)
    at Object.Rr [as createRootView] (main.f5019b5d20f499feb949.js:1)
    at Kl.create (main.f5019b5d20f499feb949.js:1)
    at gt.create (main.f5019b5d20f499feb949.js:1)
    at Di.bootstrap (main.f5019b5d20f499feb949.js:1)
ee @ main.f5019b5d20f499feb949.js:1

I'm running Angular Version 9 as follows:

Angular CLI: 9.1.7
Node: 16.10.0
OS: win32 x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: No

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cli                      9.1.7
@angular/http                     7.2.16
@ngtools/webpack                  9.1.7
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.42.0

The code is as follows:

import { APIURLType } from './types/apiurl.type';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable  } from '../../../node_modules/rxjs/Observable';
import { of } from '../../../node_modules/rxjs/Observable/of';
import { environment } from './../../environments/environment';

@Injectable()
export class APIPathService {

    public aPIPathURLs: APIURLType;
    public kind = 'nothing';
    public environmentAPI: APIURLType = environment;

    constructor(public httpClient: HttpClient) {
        console.log('APIPathURL.service.ts');
    } // ends constructor

    getAPIURLs(): Observable<APIURLType> {
        console.log('Environment API: ' + this.environmentAPI.rootPath);
        return of(this.environmentAPI);

    } // ends getAPIURLs
} // ends class APIPathService

I'm wondering if I should upgraded everything as I'm out of ideas. Any clues would be most appreciated.

TTFN

Tim

Drenai · Accepted Answer · 2021-10-08 22:28:13Z

1

Your rxjs imports don't look right try:

import { Observable, of } from 'rxjs';

Imports of npm modules never start with relative paths e.g. ./ or ../../... Your IDE should automatically generate those import statements anyhow (I use VSCode)

edited Oct 8, 2021 at 22:28

answered Oct 8, 2021 at 22:22

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Timothy Shenton Over a year ago

Thanks @Drenai. This was our very first Angular project (2018) so it has lots of baggage. We use VSCode also so I'll try refactoring the imports so they are more inline with best practices. I'll let you know.

Timothy Shenton Over a year ago

Finally got back to this (been juggling chainsaws at work) and if was changing "import { of } from '../../../node_modules/rxjs/Observable/of" to "import { of } from '../../../node_modules/rxjs/". I also set up environments in the tsconfig.json so I don't have to do the relative paths. Marked as accepted. Thank you!

Collectives™ on Stack Overflow

Another RXJS "ERROR TypeError: Object(...) is not a function" problem

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related