Dangerous, broken rxjs imports do not surface as errors, break app at runtime

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) OS X El Capitan

Versions.

node: 6.9.1
os: darwin x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2

Repro steps.

Please find a repository with the repro at: https://github.com/JohannesRudolph/angular-cli-rxjs-repro at:

The repro contains two components, ChildComponentand OtherComponent. Each makes use of two rxjs operators/Obervable operations: Observable.of() and .mapTo().

However, ChildComponent imports only one half of the added operators

// This file imports Obserable.of() and makes use of .mapTo(), imported in other.component.ts
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

while OtherComponent imports the other half:

// This file imports .mapTo() and makes use of Observable.of(), imported in child.component.ts
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/mapTo';

The fun begins when these two Components are contained in separate, lazy-loaded modules as implemented in the linked sample repository. To produce a runtime error, click the “Child” or “Other” link after running ng serve on the repro.

The log given by the failure.

ng build --aot and ng build do not log any errors.

When navigating to either lazy-loaded module, e.g. the following runtime error occurs:

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: __WEBPACK_IMPORTED_MODULE_1_rxjs_Observable__.Observable.of is not a function
TypeError: __WEBPACK_IMPORTED_MODULE_1_rxjs_Observable__.Observable.of is not a function
    at OtherComponent.ngOnInit (http://localhost:4200/4.chunk.js:29:77)

Mention any other details that might be useful.

It’s clear to me why that happens:

• webpack inlines the .of() operator in the ChildModule bundle/chunk
• webpack inlines the .mapTo() operator in the OtherModule bundle/chunk

When navigating to either of these chunks while the other has not been loaded yet, the error occurs because the webpack runtime (if that’s the correct term) has not added the required rxjs imports from the respective other module. The source of the errors are missing imports that are not detected by neither the tsc nor the aot compiler.

I propose angular-cli (or some other component of the build chain) should handle this scenario by ensuring that each .ts file imports all (statically) referenced operators that it needs. I’m not sure why that doesn’t happen already. So to fix this issue we need to pinpoint what part of the build chain is at fault and fix it. Any ideas?

[mgechev]

Here’s a tslint rule coming https://github.com/palantir/tslint/pull/2155.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}