Angular 8 web app failing to deploy to heroku - node.js

I feel like my Angular app is fully setup for deploying to Heroku, but for some reason it just hangs during the build process and never continues - eventually resulting in a Build Failed message, but no logs.
Here is an excerpt of the heroku logs --tail:
-----> Build
Detected both "build" and "heroku-postbuild" scripts
Running heroku-postbuild
> flux-admin#1.0.0 heroku-postbuild /tmp/build_d18bae1ef2310aacfb6851eddfeab6d1
> ng build --prod
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {0} runtime-es2015.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main-es2015.b5ce220634282bd1233e.js (main) 1010 kB [initial] [rendered]
chunk {1} main-es5.b5ce220634282bd1233e.js (main) 1.08 MB [initial] [rendered]
chunk {2} polyfills-es2015.2987770fde9daa1d8a2e.js (polyfills) 36.4 kB [initial] [rendered]
chunk {3} polyfills-es5.df1101cc1e7b588877f8.js (polyfills-es5) 122 kB [initial] [rendered]
chunk {4} styles.c1cdb3f05888558b2d70.css (styles) 60.6 kB [initial] [rendered]
Date: 2019-11-23T15:43:44.636Z - Hash: 80ca71603894ea5db348 - Time: 114953ms
That is where it just hangs.
Here is my package.json file:
"name": "flux-admin",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-prebuild": "",
"heroku-postbuild": "ng build --prod"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~7.3.3",
"#angular/cli": "~8.3.19",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/compiler-cli": "^8.2.14",
"#angular-devkit/build-angular": "~0.803.19",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/material": "^7.3.3",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"core-js": "^2.5.4",
"path": "^0.12.7",
"rxjs": "~6.5.3",
"express": "^4.17.1",
"rxjs-compat": "^6.4.0",
"tslib": "^1.9.0",
"typescript": "~3.5.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular/cli": "~8.3.19",
"#angular/compiler-cli": "^8.2.14",
"#angular/language-service": "~8.2.14",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
},
"engines": {
"node": "11.10.0",
"npm": "6.13.1"
}
My server.js file is the following:
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/flux-admin'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/flux-admin/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
Just in case I also added a Procfile:
web: node server.js
When I try and run ng build --prod --aot locally - it does complete successfully, so it just seems to not go onto the next step in the heroku deployment process (which I believe would be the start script).
Anything obvious wrong with my setup?
UPDATE
After multiple attempts to try and get this deployed - I ended up degrading back to Angular 7, and it deployed with no problem!
I believe the issue must stem with the new way the ng build --prod --aot is run in Angular 8, but I am not at all sure why or what the cause is. So for now, I will just continue using Angular 7 and post a bug report.

Related

Existing Angular 7.2 Application Fails To Build With Typescript Errors

I am migrating an Angular 7.2.0 application to a new Linux server, and I am unable to get the ng build command to run. Here is the package.json:
{
"name": "<app name>",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.5",
"#angular/animations": "~7.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/http": "^7.2.2",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#mdi/font": "^3.3.92",
"#ng-select/ng-select": "^2.15.3",
"angular-confirmation-popover": "^4.2.0",
"angular-resize-event": "^1.0.0",
"angular2-ladda": "^2.0.0",
"awesome-bootstrap-checkbox": "^1.0.1",
"bootstrap": "^4.2.1",
"core-js": "^2.5.4",
"datatables.net-bs4": "^1.10.19",
"dripicons": "^2.0.0",
"font-awesome": "^4.7.0",
"highcharts": "^7.0.3",
"highcharts-angular": "^2.4.0",
"linkifyjs": "^2.1.9",
"metismenujs": "^1.0.3",
"moment": "^2.24.0",
"moment-timezone": "^0.5.23",
"ng-block-ui": "^2.1.1",
"ng2-daterangepicker": "^2.0.12",
"ng2-search-filter": "^0.5.1",
"ngx-bootstrap": "^3.3.0",
"ngx-mask": "^7.3.6",
"ngx-perfect-scrollbar": "^7.2.0",
"ngx-toastr": "^9.1.1",
"ngx-uploader": "^7.1.0",
"rxjs": "~6.3.3",
"simple-line-icons": "^2.4.1",
"spinkit": "^1.2.5",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.12.0",
"#angular/cli": "~7.2.3",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/lodash": "^4.14.122",
"#types/moment-timezone": "^0.5.10",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
Here is ng --version:
Angular CLI: 7.2.4
Node: 8.17.0
OS: linux x64
Angular: 7.2.16
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.12.4
#angular-devkit/build-angular 0.12.4
#angular-devkit/build-optimizer 0.12.4
#angular-devkit/build-webpack 0.12.4
#angular-devkit/core 7.2.4
#angular-devkit/schematics 7.2.4
#angular/cli 7.2.4
#ngtools/webpack 7.2.4
#schematics/angular 7.2.4
#schematics/update 0.12.4
rxjs 6.3.3
typescript 3.2.4
webpack 4.28.4
And here is the error from ng build:
Warning: 4 repetitive deprecation warnings omitted.
Date: 2022-05-25T15:12:59.684Z
Hash: c3e6d9d0970d51906cb6
Time: 10245ms
chunk {main} main.js, main.js.map (main) 626 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.2 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 2.2 MB [initial] [rendered]
ERROR in src/app/admin/probe/sensor-chart/sensor-chart-abstract.class.ts(260,51): error TS2345: Argument of type '{ point: Point; }' is not assignable to parameter of type 'string | SeriesClickEventObject'.
Type '{ point: Point; }' is missing the following properties from type 'SeriesClickEventObject': bubbles, cancelBubble, cancelable, composed, and 18 more.
src/app/admin/probe/sensor-chart/sensor-chart-abstract.class.ts(283,37): error TS2345: Argument of type '{ id: string; draggable: string; labels: any[]; labelOptions: { style: { cursor: string; }; verticalAlign: string; y: number; }; events: { click: (event: any) => void; }; }' is not assignable to parameter of type 'AnnotationsOptions'.
Types of property 'draggable' are incompatible.
Type 'string' is not assignable to type '"" | "y" | "x" | "xy"'.
src/app/admin/report/probe-selector/probe-selector.component.ts(45,22): error TS2345: Argument of type '{ _selected: boolean; }' is not assignable to parameter of type 'ListIterateeCustom<Probe, boolean>'.
Object literal may only specify known properties, and '_selected' does not exist in type '[string | number | symbol, any] | ListIterator<Probe, boolean> | PartialShallow<Probe>'.
src/app/app.component.ts(7,27): error TS2307: Cannot find module '../environments/environment'.
src/app/app.component.ts(29,22): error TS2322: Type '{ useUTC: boolean; }' is not assignable to type 'GlobalOptions'.
Object literal may only specify known properties, and 'useUTC' does not exist in type 'GlobalOptions'.
src/app/app.module.ts(23,27): error TS2307: Cannot find module '../environments/environment'.
src/main.ts(5,29): error TS2307: Cannot find module './environments/environment'.
This application has been built before (and no code changes since), so it appears that I am running into a Node/NPM/node-sass versioning issue.
I have tried Node 8, Node 12, and Node 16 with various versions of node-sass and sass.
What should I look at considering this type of Typescript error in order to build this Angular 7 project?
Thanks!

Run Out of Memory Using Node Build 'ng build' - Angular App

I am trying to build my angular application using 'ng build'. It is failing because it is running out of memory to build as I surmise from my research. I have tried several of the solutions out there with no luck. After typing 'ng build' either from VSC terminal or on DOS line, it runs for about 3 minutes during this step:
Generating ES5 bundles for differential loading...
then it fails with this error written to my angular-errors.log file:
[error] Error: Call retries were exceeded
at ChildProcessWorker.initialize (c:\development\gems\Frontend_Serenity_A9_SLIM\Frontend_Serenity_A9\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
at ChildProcessWorker.onExit (c:\development\gems\Frontend_Serenity_A9_SLIM\Frontend_Serenity_A9\node_modules\jest-worker\build\workers\ChildProcessWorker.js:263:12)
at ChildProcess.emit (events.js:203:13)
at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
I have tried increasing my memory as some articles/stack overflows have indicated. I tried this:
npm install -g increase-memory-limit
and then ran this command at the root of my angular project:
increase-memory-limit
to no avail. Using es5 rather than es2015 is not a solution for our app. Any help or ideas you can offer are GREATLY appreciated. I have been trying everything for a week now and am still stuck. Thanks!
package.json contents:
{
"name": "serenity",
"version": "9.0.0",
"license": "PrimeNG Commercial",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "9.0.4",
"#angular/cdk": "9.1.0",
"#angular/common": "9.0.4",
"#angular/compiler": "9.0.4",
"#angular/core": "9.0.4",
"#angular/forms": "9.0.4",
"#angular/material": "^9.1.0",
"#angular/platform-browser": "9.0.4",
"#angular/platform-browser-dynamic": "9.0.4",
"#angular/router": "9.0.4",
"#aspnet/signalr": "^1.1.4",
"#fullcalendar/core": "4.0.2",
"#fullcalendar/daygrid": "4.0.1",
"#fullcalendar/interaction": "4.0.2",
"#fullcalendar/timegrid": "4.0.1",
"#handsontable/angular": "^5.1.1",
"#mdi/svg": "^5.3.45",
"#types/leaflet-draw": "^1.0.2",
"#types/plotly.js": "^1.50.12",
"chart.js": "2.7.3",
"d3": "^5.16.0",
"font-awesome": "4.7.0",
"handsontable": "^7.4.2",
"intl": "1.2.5",
"leaflet": "^1.6.0",
"leaflet-draw": "^1.0.4",
"leaflet-sidebar-v2": "^3.2.2",
"leaflet.control.layers.tree": "^1.0.0",
"leaflet.glify": "^3.0.0",
"material-design-icons": "^3.0.1",
"plotly.js-dist": "^1.54.1",
"primeflex": "1.0.0",
"primeng": "9.0.1",
"prismjs": "1.15.0",
"quill": "1.1.8",
"rxjs": "6.5.4",
"three": "^0.117.1",
"web-animations-js": "github:angular/web-animations-js#release_pr208",
"xlsx": "^0.16.2",
"zone.js": "0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.900.4",
"#angular/cli": "9.0.4",
"#angular/compiler-cli": "9.0.4",
"#angular/language-service": "9.0.4",
"#types/jasmine": "3.5.7",
"#types/jasminewd2": "2.0.8",
"#types/leaflet": "^1.5.17",
"#types/node": "12.12.29",
"codelyzer": "5.2.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.3.0",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.5.2",
"protractor": "5.4.3",
"ts-node": "8.3.0",
"tslint": "5.18.0",
"typescript": "3.7.5"
}
}
Note sure if this will help in your case, but have you tried increasing the maximumError in the budgets section under configurations in the angular.json file?
Yes, it was a memory issue and I was having a hard time getting node to change the memory limit before it built my project. I was able to get it to allocate 3 gigs and then it worked fine.

Angular 9 npm 'bindings' requesting 'fs' module. cannot resolve

I am trying to compile my angular project for several days now, without any success. The issue is related to bindings npm package not being able to find fs which I assume is a webpack issue within angular. I have found some sources on github and SO telling me to put the code block below in my package.json but that doesn't seem to do anything... when running ng serve I get the small error, and if it would be useful when I run ng build it generates this error into my console.
I have done multiple clean re-installs of my npm folder and even isolated the library for testing. The worst thing about it is that the library is able to build in an html document but not when served in angular. I again assume it has to do with webpack, the library itself is compiled using the tsc and browserify.
"browser": {
"fs": "empty"
}
ERROR in ./node_modules/bindings/bindings.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\tassc\Projects\Configurator\node_modules\bindings'
resolve 'fs' in 'C:\Users\tassc\Projects\Configurator\node_modules\bindings'
{
"name": "configurator",
"version": "0.0.0",
"scripts": {
"preinstall": "azure-devops-npm-auth",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.0.3",
"#angular/common": "~9.0.3",
"#angular/compiler": "~9.0.3",
"#angular/core": "~9.0.3",
"#angular/forms": "~9.0.3",
"#angular/platform-browser": "~9.0.3",
"#angular/platform-browser-dynamic": "~9.0.3",
"#angular/router": "~9.0.3",
"#types/three": "^0.103.2",
"#types/webgl2": "0.0.5",
"dat.gui": "^0.7.6",
"patio-covering-models": "0.0.8",
"rxjs": "~6.5.4",
"stream": "0.0.2",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.900.3",
"#angular/cli": "~9.0.3",
"#angular/compiler-cli": "~9.0.3",
"#angular/language-service": "~9.0.3",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.12.28",
"azure-devops-npm-auth": "^1.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
}
}
UPDATE: On closer inspection the actual library (patio-covering-models) I am using does also not build with webpack outside of angular. Browserify does not complain. How would I get around this? I should also mention that due to company policy I am unable to share the package that is causing this...
FS is not longer in use according to NPM https://www.npmjs.com/package/fs

How to fix export 'NotificationKind' was not found in 'rxjs' error

NotificationKind has been deprecated here but when building an angular 8 app it throws the following error:
ng build
Date: 2019-06-08T16:44:40.118Z
Hash: 7f30f6f31d45ce95291b
Time: 12019ms
chunk {main} main-es5.js, main-es5.js.map (main) 72.2 kB [initial] [rendered]
chunk {polyfills} polyfills-es5.js, polyfills-es5.js.map (polyfills) 662 kB [initial] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 1.45 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.93 MB [initial] [rendered]
ERROR in /var/app/node_modules/#ngrx/effects/fesm5/effects.js 401:33-49
"export 'NotificationKind' was not found in 'rxjs'
ERROR in /var/app/node_modules/#ngrx/effects/fesm5/effects.js 403:56-72
"export 'NotificationKind' was not found in 'rxjs'
ERROR in /var/app/node_modules/#ngrx/effects/fesm5/effects.js 404:33-49
"export 'NotificationKind' was not found in 'rxjs'
ERROR in /var/app/node_modules/#ngrx/effects/fesm5/effects.js 407:55-71
"export 'NotificationKind' was not found in 'rxjs'
{
"name": "#spotacard/app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "nx lint && ng lint",
"e2e": "ng e2e",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "ng update #nrwl/workspace",
"update:check": "ng update",
"workspace-schematic": "nx workspace-schematic",
"dep-graph": "nx dep-graph",
"help": "nx help"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.0.0",
"#angular/common": "^8.0.0",
"#angular/compiler": "^8.0.0",
"#angular/core": "^8.0.0",
"#angular/forms": "^8.0.0",
"#angular/platform-browser": "^8.0.0",
"#angular/platform-browser-dynamic": "^8.0.0",
"#angular/router": "^8.0.0",
"#ngrx/effects": "^8.0.0",
"#ngrx/router-store": "^8.0.0",
"#ngrx/store": "^8.0.0",
"#ngrx/store-devtools": "^8.0.0",
"#nrwl/angular": "^8.0.1",
"#nrwl/nx": "^7.8.6",
"bootstrap": "^4.3.1",
"bootswatch": "^4.3.1",
"core-js": "^2.5.4",
"ngrx-store-freeze": "^0.2.4",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.5.2",
"zone.js": "^0.9.1"
},
"devDependencies": {
"jest-preset-angular": "7.0.0",
"#angular/compiler-cli": "^8.0.0",
"#angular/language-service": "^8.0.0",
"#angular-devkit/build-angular": "^0.800.0",
"codelyzer": "~5.0.1",
"cypress": "3.1.0",
"#types/jquery": "3.3.6",
"#nrwl/cypress": "8.0.1",
"#nrwl/jest": "8.0.1",
"jest": "24.1.0",
"#types/jest": "24.0.9",
"ts-jest": "24.0.0",
"#nrwl/workspace": "8.0.1",
"#types/node": "~8.9.4",
"dotenv": "6.2.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.4.5",
"prettier": "1.16.4",
"#angular/cli": "8.0.0"
}
}
Does anyone know how to fix this problem?
Have you tried upgrading RxJS?
V8 has the minimum version requirements:
Angular version 8.x
Angular CLI version 8.0.2
TypeScript version 3.4.x
RxJS version 6.5.x
https://ngrx.io/guide/migration/v8
Update 2019-06-10:
NgRx v8.0.1 has a dep to RxJS 6.4 instead of 6.5
I encountered a similar issue. I was able to solve it by running:
npm install rxjs#6.5.0

error TS2305: Module "/node_modules/rxjs/Rx" has no exported member 'Subscribable'

I have a project that is built in angular 5. here is the package.json
{
"name": "ff-client",
"version": "0.2.0",
"license": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint --type-check",
"e2e": "ng e2e",
"xprecommit": "ng lint --type-check && ng test --single-run --code-coverage",
"xprepush": "ng build --prod",
"i18n": "ng xi18n --i18n-format xlf --output-path src/locale --locale en --progress",
"i18n-merge": "xliffmerge --profile xliffmerge.json",
"browserstack": "ng e2e --no-serve --config protractor.browserstack.conf.js",
"upgrade": "yarn upgrade-interactive --latest",
"build-en": "ng build --prod --e deploy --output-path=dist/en --i18nFile=src/locale/messages.en.xlf --i18nFormat=xlf --locale=en --base-href /en/",
"build-da": "ng build --prod --e deploy --output-path=dist/da --i18nFile=src/locale/messages.da.xlf --i18nFormat=xlf --locale=da --base-href /da/",
"build-fo": "ng build --prod --e deploy --output-path=dist/fo --i18nFile=src/locale/messages.fo.xlf --i18nFormat=xlf --locale=fo --base-href /fo/",
"build-root": "copy dist\\en\\web.config dist\\ && del dist\\en\\web.config && del dist\\da\\web.config && del dist\\fo\\web.config",
"build-prod": "npm run build-en && npm run build-da && npm run build-fo && npm run build-root"
},
"private": true,
"dependencies": {
"#angular/animations": "5.2.9",
"#angular/cdk": "^5.2.4",
"#angular/common": "5.2.9",
"#angular/compiler": "5.2.9",
"#angular/core": "5.2.9",
"#angular/flex-layout": "^5.0.0-beta.14",
"#angular/forms": "5.2.9",
"#angular/http": "5.2.9",
"#angular/material": "^5.2.4",
"#angular/platform-browser": "5.2.9",
"#angular/platform-browser-dynamic": "5.2.9",
"#angular/router": "5.2.9",
"#angular/service-worker": "5.2.9",
"#aspnet/signalr": "^1.0.0-rc1-update1",
"#auth0/angular-jwt": "^1.0.0-beta.9",
"#ngrx/effects": "^5.1.0",
"#ngrx/router-store": "^5.0.1",
"#ngrx/store": "^5.1.0",
"#ngrx/store-devtools": "^5.1.0",
"angular-in-memory-web-api": "^0.5.2",
"applicationinsights-js": "^1.0.15",
"core-js": "^2.5.3",
"hammerjs": "^2.0.8",
"moment": "^2.20.1",
"ng-recaptcha": "^3.0.3",
"ng2-file-upload": "^1.3.0",
"ngrx-store-logger": "^0.2.0",
"ngx-perfect-scrollbar": "^5.3.5",
"redux-beacon": "^1.2.1",
"rxjs": "^5.5.8",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "1.7.4",
"#angular/compiler-cli": "5.2.9",
"#angular/language-service": "5.2.9",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~9.4.6",
"chai": "^4.1.2",
"codelyzer": "~4.1.0",
"cucumber": "^4.0.0",
"husky": "^0.14.3",
"jasmine-core": "~2.99.1",
"jasmine-marbles": "^0.2.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-teamcity-reporter": "^1.0.1",
"ngx-i18nsupport": "^0.12.0",
"protractor": "^5.3.0",
"protractor-cucumber-framework": "^4.2.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.6.2"
}
}
I have download npm and angular-cli.
after installing these, I did npm install to get the required modules. but when I do "ng serve" it shows an error.
ERROR in
node_modules/#angular/flex-layout/core/typings/observable-media/observa
ble-media.d.ts(1,22): error TS2305: Module
'"D:/Projects/FlexFunding/app-dk/Clie
nt/node_modules/rxjs/Rx"' has no exported member 'Subscribable'.
I know now it is angular 6 and rxjs has updated in this version. but how can I solve this issue without migrating this project from angular version 5 to 6. I just need to build and run the project.
i have tried replace rxjs folder under node modules from a running a project. but no luck.
Edit: I have uninstall current version and downgraded to version angular cli version 1.7.4 but the error is same.
ERROR in
node_modules/#angular/flex-layout/core/typings/observable-media/observa
ble-media.d.ts(1,22): error TS2305: Module
'"D:/Projects/FlexFunding/app-dk/Clie nt/node_modules/rxjs/Rx"' has no
exported member 'Subscribable'.
in package.json one of the dependency is
"#angular/flex-layout": "^5.0.0-beta.14"
for ^ of "^5.0.0-beta.14", npm installs the latest version of flex-layout and in the latest version felx-layout uses RxJS 6. But as the project is an Angular 5 project, it uses previous version of RxJs. So, flex-layout failed to import the required libraries because RxJs 6 is not there.
so, the solution that worked for me is to change package.json
"#angular/flex-layout": "5.0.0-beta.14"
then npm install
Try reinstall your application
npm i
If this doesn't work, try delete node_modules folder and reinstall.

Resources