This import is black listed , import a sub-module instead

Question

Query 1

Below is the import section of my app component with observable import that got the code working.

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/take';

But, The IDE shows ["rxjs/Rx" ] as blacklisted usage but still it gives me the desired output using Observable.interval(1000) on browser console. Why is IDE saying this as blacklisted usage :( while it works!

Query 2

The initial code that I attempted was as below but it throws error on console and do not give me desired interval output to console.

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/take';

Console Error Output

rxjs_Observable__WEBPACK_IMPORTED_MODULE_1__.Observable.interval is not a function at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:15) at checkAndUpdateDirectiveInline (core.js:9250) at checkAndUpdateNodeInline (core.js:10514) at checkAndUpdateNode (core.js:10476) at debugCheckAndUpdateNode (core.js:11109) at debugCheckDirectivesFn (core.js:11069) at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061) at checkAndUpdateView (core.js:10458) at callWithDebugContext (core.js:11351)

Which is the right approach, request suggestion.

Jahnavi Paliwal Jahnavi Paliwal · Accepted Answer · 2018-09-16T04:58:01

First of all, Never import from rxjs/Rx, because it'll include every single operator, static method, scheduler, and utility that you probably don't need. If you don't care about the bundle size, then you can import using rxjs/Rx.
Are you sure you are importing Observable only once. Check if it is imported twice from the main-module and the sub-module. It is possible that your project is accessing some global version of Observable that isn't the same Observable that the intervals() method is added to with 'rxjs/add/observable/interval'. This can happen if you accidentally have two versions of rxjs bundled in with your app, one that's somewhere being made global and a different one you're importing here.
If it still doesn't work, can you try importing interval in the static context in your module. Use import { interval } from 'rxjs/add/observable/interval';

This import is black listed , import a sub-module instead

1 Answers