Recently, I have been working on upgrading our Angular 5 build to version 7. After installing webpack 4, rxjs 6.3.3, and angular 7.0.3, along with taking care of dependencies, I managed to successfully compile the bundle. However, a puzzling error seems to occur when trying to bind the app component to its selector.
t_Host.ngfactory.js? [sm]:1 ERROR TypeError: (intermediate value).share is not a function at new t (platform-browser-dynamic.js:314)Below is an excerpt from my main.ts file (the file responsible for bootstrapping my component):
import { tap, mapTo, share } from 'rxjs/operators';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
Additionally, here is part of my vendor.ts file:
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/router';
import '@ng-bootstrap/ng-bootstrap';
import 'ngx-scrollspy';
import 'rxjs/operators/map';
import 'rxjs/operators/mergeMap';
import 'rxjs/operators/share';
The head script imports that were generated seem to be ordered correctly:
<script type="text/javascript" src="0.chunk.js" defer> </script>
<script type="text/javascript" src="polyfills.bundle.js" defer></script>
<script type="text/javascript" src="vendor.bundle.js" defer></script>
<script type="text/javascript" src="main.bundle.js" defer></script></head>
Finally, I will share some relevant information extracted from the package.json file:
"dependencies": {
...
"@angular/animations": "7.0.4",
"@angular/cli": "7.0.6",
"@angular/common": "7.0.4",
"@angular/compiler": "7.0.4",
"@angular/core": "7.0.4",
"@angular/forms": "7.0.4",
"@angular/http": "7.0.4",
"@angular/platform-browser": "7.0.4",
"@angular/platform-browser-dynamic": "7.0.4",
"@angular/platform-server": "7.0.4",
"@angular/router": "7.0.4",
"@angular/upgrade": "7.0.4",
...
"rxjs": "6.3.3",
"rxjs-compat": "6.3.3",
...
"devDependencies": {
...
"@ngtools/webpack": "7.0.6",
"awesome-typescript-loader": "5.2.1",
...
"typescript": "3.1.1",
"webpack": "4.26.0",
"webpack-cli": "3.1.2",
"webpack-dev-middleware": "3.4.0",
"webpack-dev-server": "3.1.10",
"webpack-md5-hash": "0.0.5",
"webpack-merge": "1.0.1"
...
}
Update: In an attempt to resolve the issue, I utilized the rxjs linter available here. Despite running the linting tool, it returned 'Cannot find any possible migrations', leading me to believe I executed the migration correctly.