I created a simple webpack project for a Typescript library : https://github.com/lbar/test-webpackts-issue
On linux, npm run build finishes successfully:
> rimraf dist && webpack --progress --profile
10% 0/1 build modulests-loader: Using typescript#1.8.10 and /tmp/testwebpack/tsconfig.json 8030ms1217ms optimi5ms emit
Hash: 8eac1502f3b7a9a19be2
Version: webpack 1.13.1
Time: 2596ms
Asset Size Chunks Chunk Names
index.js 816 bytes 0 [emitted] index
index.js.map 6.07 kB 0 [emitted] index
/tmp/testwebpack/dist/index.d.ts 31 bytes [emitted]
/tmp/testwebpack/dist/src/info.d.ts 49 bytes [emitted]
+ 2 hidden modules
On Windows, npm run build is blocked during 'emit' phase. The output is :
> rimraf dist && webpack --progress --profile
10% 0/1 build modulests-loader: Using typescript#1.8.10 and C:\tmp\testwebpack\tsconfig.jso
1836ms build modules
3ms seal
7ms optimize
3ms hashing
7ms create chunk assets
79ms additional chunk assets
19ms optimize chunk assets
837ms optimize assets
95% emit
The version of node differs: 6.2.2 on Windows and 4.4.5 on Linux. I don't know if it may be the cause.
Has anyone an idea about the problem? Issue in webpack, ts-loader or typescript?
One more thing, call to tsc is working on both systems.
Thanks for your help
This problem is caused by an issue in ts-loader: https://github.com/TypeStrong/ts-loader/issues/185
A Pull Request is waiting fixes for project core team.
Webpack can use "awesome-typescript-loader" to avoid this issue.
Related
i am new for nodejs, in my hybris project, first i installed nodejs, run 'npm install','npm i cross-env' commands, when i run the command 'npm run hybris' from node_module folder, i got some errors can you provide any solution.
C:\Atlas_Insta\hybris\bin\custom\rodanandfields\rodanandfieldsstorefront\FE-Develop>npm run hybris
> RodanAndFields#1.0.0 hybris C:\Atlas_Insta\hybris\bin\custom\rodanandfields\rodanandfieldsstorefront\FE-Develop
> cross-env NODE_ENV=production gulp hybris-build
[15:29:07] Using gulpfile C:\Atlas_Insta\hybris\bin\custom\rodanandfields\rodanandfieldsstorefront\FE-Develop\gulpfile.js
[15:29:07] Starting 'clean'...
[15:29:07] Finished 'clean' after 128 ms
[15:29:07] Starting 'markupCompile'...
[15:29:08] Starting 'sass'...
[15:29:09] Finished 'sass' after 615 ms
[15:29:09] Starting 'js'...
[15:29:09] Finished 'js' after 129 ms
[15:29:09] Starting 'copy-img'...
[15:29:09] Finished 'copy-img' after 584 μs
[15:29:09] Starting 'copy-fonts'...
[15:29:09] Finished 'copy-fonts' after 597 μs
[15:29:09] Starting 'copy-api'...
[15:29:09] Finished 'copy-api' after 630 μs
[15:29:09] Starting 'read-templates'...
[15:29:09] Finished 'read-templates' after 1.87 ms
All templates written successfully!
[15:29:32] Version: webpack 1.15.0
Asset Size Chunks Chunk Names
app.js 1.19 MB 0 [emitted] app
app.map 9.63 MB 0 [emitted] app
ERROR in C:/Atlas_Repo/bin/custom/rodanandfields/rodanandfieldsstorefront/FE-Develop/web/webroot/WEB-INF/r2/fe-components/checkout/order-summary/order-summary.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../../../_ui/frontend/js/analytics/analytics-eventmap-r2 in C:\Atlas_Repo\bin\custom\rodanandfields\rodanandfieldsstorefront\FE-Develop\web/webroot/WEB-INF/r2/fe-components\checkout\order-summary
# C:/Atlas_Repo/bin/custom/rodanandfields/rodanandfieldsstorefront/FE-Develop/web/webroot/WEB-INF/r2/fe-components/checkout/order-summary/order-summary.js 23:30-103
ERROR in C:/Atlas_Repo/bin/custom/rodanandfields/rodanandfieldsstorefront/FE-Develop/web/webroot/WEB-INF/r2/fe-components/checkout/checkout-form-billing/checkout-form-billing.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../../../_ui/frontend/js/analytics/analytics-config-r2 in C:\Atlas_Repo\bin\custom\rodanandfields\rodanandfieldsstorefront\FE-Develop\web/webroot/WEB-INF/r2/fe-components\checkout\checkout-form-billing
# C:/Atlas_Repo/bin/custom/rodanandfields/rodanandfieldsstorefront/FE-Develop/web/webroot/WEB-INF/r2/fe-components/checkout/checkout-form-billing/checkout-form-billing.js 23:22-93
Which Hybris version are you using? I had a smilar problem with hybris 6.6. It worked for me after I switch to node v6.14.3 I was using a more recent node with a more recent npm version.
I found this version inside the npmancillary extension's folder
ext-content/npmancillary/resources/npm/node
I am trying to deploy a nodejs app I have via
git push heroku master
The build is failing due to timeout and here is the build log
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 10.x...
Downloading and installing node 10.15.3...
Using default npm version: 6.4.1
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> node-expat#2.3.17 install /tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea/node_modules/node-expat
> node-gyp rebuild
make: Entering directory '/tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea/node_modules/node-expat/build'
CC(target) Release/obj.target/expat/deps/libexpat/lib/xmlparse.o
../deps/libexpat/lib/xmlparse.c: In function ‘gather_time_entropy’:
../deps/libexpat/lib/xmlparse.c:780:7: warning: variable ‘gettimeofday_res’ set but not used [-Wunused-but-set-variable]
int gettimeofday_res;
^
CC(target) Release/obj.target/expat/deps/libexpat/lib/xmltok.o
CC(target) Release/obj.target/expat/deps/libexpat/lib/xmlrole.o
AR(target) Release/obj.target/deps/libexpat/libexpat.a
COPY Release/libexpat.a
CXX(target) Release/obj.target/node_expat/node-expat.o
../node-expat.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE Parser::Parse(Nan::NAN_METHOD_ARGS_TYPE)’:
../node-expat.cc:103:47: warning: ‘v8::Local<v8::Object> v8::Value::ToObject() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
Local<Object> obj = info[0]->ToObject();
^
In file included from /app/.node-gyp/10.15.3/include/node/node.h:63:0,
from ../node_modules/nan/nan.h:52,
from ../node-expat.cc:1:
/app/.node-gyp/10.15.3/include/node/v8.h:10046:15: note: declared here
Local<Object> Value::ToObject() const {
^
../node-expat.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE Parser::SetUnknownEncoding(Nan::NAN_METHOD_ARGS_TYPE)’:
../node-expat.cc:470:59: warning: ‘int32_t v8::Value::Int32Value() const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
parser->xmlEncodingInfo->map[i] = m->Int32Value();
^
In file included from /app/.node-gyp/10.15.3/include/node/v8.h:26:0,
from /app/.node-gyp/10.15.3/include/node/node.h:63,
from ../node_modules/nan/nan.h:52,
from ../node-expat.cc:1:
/app/.node-gyp/10.15.3/include/node/v8.h:2478:46: note: declared here
V8_DEPRECATED("Use maybe version", int32_t Int32Value() const);
^
/app/.node-gyp/10.15.3/include/node/v8config.h:324:3: note: in definition of macro ‘V8_DEPRECATED’
declarator __attribute__((deprecated(message)))
^
SOLINK_MODULE(target) Release/obj.target/node_expat.node
COPY Release/node_expat.node
make: Leaving directory '/tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea/node_modules/node-expat/build'
> iconv#2.3.1 install /tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea/node_modules/iconv
> node-gyp rebuild
make: Entering directory '/tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea/node_modules/iconv/build'
CXX(target) Release/obj.target/iconv/src/binding.o
CC(target) Release/obj.target/iconv/deps/libiconv/lib/iconv.o
CC(target) Release/obj.target/iconv/support/localcharset.o
SOLINK_MODULE(target) Release/obj.target/iconv.node
COPY Release/iconv.node
make: Leaving directory '/tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea/node_modules/iconv/build'
> execSync#1.0.2 install /tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea/node_modules/execSync
> node install.js
[execsync v1.0.2] Attempting to compile native extensions.
[execSync v1.0.2]
Native code compile failed!!
added 760 packages from 579 contributors and audited 3610 packages in 38.646s
found 111 vulnerabilities (46 low, 49 moderate, 16 high)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> udemy-nodejs-angular2#1.0.0 build /tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea
> del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch
0% compiling
Webpack is watching the files…
10% building modules 0/1 modules 1 active ...dc95dbb7c74ca4abea/assets/app/main.ts
[at-loader] Using typescript#2.6.2 from typescript and "tsconfig.json" from /tmp/build_c3cb8f26de145fdc95dbb7c74ca4abea/tsconfig.json.
18812ms building modules
77ms sealing
0ms optimizing
0ms basic module optimization
66ms module optimization
27ms advanced module optimization
0ms basic chunk optimization
0ms chunk optimization
0ms advanced chunk optimization
1ms module and chunk tree optimization
48ms module reviving
6ms module order optimization
9ms module id optimization
10ms chunk reviving
1ms chunk order optimization
45ms chunk id optimization
116ms hashing
1ms module assets processing
1746ms chunk assets processing
6ms additional chunk assets processing
0ms recording
0ms additional asset processing
1ms chunk asset optimization
494ms asset optimization
206ms emitting
Hash: bdcd2d9b22529d57e9ea
Version: webpack 2.7.0
Time: 21715ms
Asset Size Chunks Chunk Names
0.chunk.js 672 kB 0 [emitted] [big]
1.chunk.js 45.2 kB 1 [emitted]
bundle.js 29.8 MB 2 [emitted] [big] app
[0] ./~/#angular/core/esm5/core.js 542 kB {2} [built]
[] -> factory:568ms building:8004ms dependencies:14ms = 8586ms
[4] ./~/tslib/tslib.es6.js 8.03 kB {2} [built]
[] -> factory:1256ms building:1025ms = 2281ms
[46] ./~/#angular/platform-browser/esm5/platform-browser.js 159 kB {2} [built]
[] -> factory:570ms building:4258ms dependencies:5ms = 4833ms
[785] ./~/#angular/platform-browser-dynamic/esm5/platform-browser-dynamic.js 24.9 kB {2} [built]
[] -> factory:96ms building:89ms dependencies:464ms = 649ms
[786] ./assets/app/app.module.ts 4.19 kB {2} [built]
[] -> factory:11ms building:71ms = 82ms
[787] ./assets/app/polyfills.ts 163 bytes {2} [built]
[] -> factory:9ms building:9ms = 18ms
[788] ./~/hammerjs/hammer.js 73.8 kB {2} [built]
[] -> factory:95ms building:643ms = 738ms
[820] ./~/#angular/platform-browser/esm5/animations.js 28 kB {2} [built]
[] -> factory:571ms building:292ms dependencies:499ms = 1362ms
[821] ./assets/app/app.component.ts 1.58 kB {2} [built]
[] -> factory:27ms building:112ms dependencies:431ms = 570ms
[822] ./assets/app/app.routing.ts 3.79 kB {2} [built]
[] -> factory:28ms building:176ms dependencies:12ms = 216ms
[823] ./assets/app/errors/error.component.ts 2.12 kB {2} [built]
[] -> factory:32ms building:343ms dependencies:195ms = 570ms
[825] ./assets/app/header.component.ts 1.53 kB {2} [built]
[] -> factory:28ms building:129ms dependencies:413ms = 570ms
[826] ./assets/app/main.ts 338 bytes {2} [built]
factory:30ms building:7552ms = 7582ms
[830] ./assets/app/messages/message.module.ts 1.78 kB {2} [built]
[] -> factory:34ms building:372ms dependencies:1123ms = 1529ms
[832] ./assets/app/setup/job.module.ts 4.54 kB {2} [built]
[] -> factory:36ms building:471ms dependencies:1277ms = 1784ms
+ 1707 hidden modules
-----> Timed out running buildpack Node.js
! Timed out compiling app (60 minutes)
! See https://devcenter.heroku.com/articles/slug-compiler#time-limit
I see that there is a statement that says Module installation may take longer for this build but unfortunately it is timing out. The frustrating part here is that it used to work and I'm not sure why it isn't now. Is there any way to increase the timeout limit or solve this issue in another way?
This is probably due to the webpack build taking time due to high memory usage. You can try to tweak the memory allowed for the node process by passing NODE_OPTIONS="--max_old_space_size=2560". The default size is 2.5GB and you can try increasing it to a suitable value. Might help!
i'm creating project with jhipster Version 4.7.0.
when i run the angular, with yarn run webpack:dev --watch-content-base
shows me error like below.
yarn start v0.27.5
$ yarn run webpack:dev --watch-content-base
10% building modules 4/4 modules 0 active[HPM] Proxy created: [ '/api',
'/management',
'/swagger-resources',
'/v2/api-docs',
'/h2-console' ] -> http://localhost:8080
Project is running at http://localhost:9060/
webpack output is served from /
Content not from webpack is served from ./target/www
11% building modules 13/20 modules 7 active ...modules/style-loader/lib/addStyles.jsWarning: The 'no-use-before-declare' rule requires type infomation.
[at-loader] Using typescript#2.4.2 from typescript and "tsconfig.json" from /Users/user/Documents/myproject/tsconfig.json.
136040ms building modules
303ms sealing
1ms optimizing
0ms basic module optimization
74ms module optimization
0ms advanced module optimization
109ms basic chunk optimization
0ms chunk optimization
0ms advanced chunk optimization
0ms module and chunk tree optimization
0ms chunk modules optimization
1ms advanced chunk modules optimization
40ms module reviving
137ms module order optimization
22ms module id optimization
15ms chunk reviving
0ms chunk order optimization
132ms chunk id optimization
200ms hashing
3ms module assets processing
26852ms chunk assets processing
8863ms additional chunk assets processing
20ms recording
0ms additional asset processing
0ms chunk asset optimization
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Ok, 0.256 sec.
MergetJsonsWebpackPlugin compilation started...
MergetJsonsWebpackPlugin compilation completed...
1052ms asset optimization
95% emittingMergetJsonsWebpackPlugin emit starts...
MergetJsonsWebpackPlugin emit completed...
Error: spawn EACCES
at exports._errnoException (util.js:1024:11)
at ChildProcess.spawn (internal/child_process.js:325:11)
at exports.spawn (child_process.js:493:9)
at Object.exports.execFile (child_process.js:208:15)
at Object.module.exports.fileCommand (/Users/user/Documents/myproject/node_modules/node-notifier/lib/utils.js:53:13)
at NotificationCenter.notify (/Users/user/Documents/myproject/node_modules/node-notifier/notifiers/notificationcenter.js:66:11)
at module.exports.WebpackNotifierPlugin.compilationDone (/Users/user/Documents/myproject/node_modules/webpack-notifier/index.js:62:18)
at Compiler.applyPlugins (/Users/user/Documents/myproject/node_modules/tapable/lib/Tapable.js:61:14)
at Watching._done (/Users/user/Documents/myproject/node_modules/webpack/lib/Compiler.js:104:17)
at compiler.emitRecords.err (/Users/user/Documents/myproject/node_modules/webpack/lib/Compiler.js:78:19)
at Compiler.emitRecords (/Users/user/Documents/myproject/node_modules/webpack/lib/Compiler.js:375:38)
at compiler.emitAssets.err (/Users/user/Documents/myproject/node_modules/webpack/lib/Compiler.js:61:20)
at applyPluginsAsyncSeries1.err (/Users/user/Documents/myproject/node_modules/webpack/lib/Compiler.js:368:12)
at next (/Users/user/Documents/myproject/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/user/Documents/myproject/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at next (/Users/user/Documents/myproject/node_modules/tapable/lib/Tapable.js:220:14)
at Compiler.compiler.plugin (/Users/user/Documents/myproject/node_modules/merge-jsons-webpack-plugin/index.js:47:17)
at next (/Users/user/Documents/myproject/node_modules/tapable/lib/Tapable.js:220:14)
at callback (/Users/user/Documents/myproject/node_modules/copy-webpack-plugin/dist/index.js:108:17)
at Compiler.<anonymous> (/Users/user/Documents/myproject/node_modules/copy-webpack-plugin/dist/index.js:131:13)
at Compiler.applyPluginsAsyncSeries1 (/Users/user/Documents/myproject/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/Users/user/Documents/myproject/node_modules/webpack/lib/Compiler.js:365:9)
error Command failed with exit code 1.
error Command failed with exit code 1.
error Command failed with exit code 1.
can anybody explain to me what is happen?
and how to fix it.
i'm running macOS Sierra.
NodeJS 6.11.3 LTS.
thanks.
I'm creating a leaflet map inside an Angular-cli project. Map tiles are stored locally in the 'assets' folder because it's a raster map. The problem is when I've many zoom levels of the map, I've more than 280 thousands images with approximate size of 1.1 GB and It will get bigger.
when I use ng serve here is the console output (it is stuck # assets optimization):
** NG Live Development Server is running on http://localhost:4200. **
25234ms building modules
69ms sealing
0ms optimizing
0ms basic module optimization
96ms module optimization
1ms advanced module optimization
16ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
179ms module reviving
9ms module order optimization
4ms module id optimization
6ms chunk reviving
23ms chunk order optimization
36ms chunk id optimization
61ms hashing
1ms module assets processing
149ms chunk assets processing
4ms additional chunk assets processing
0ms recording
1ms additional asset processing
2693ms chunk asset optimization
94% asset optimization
<--- Last few GCs --->
119106 ms: Mark-sweep 1333.6 (1409.7) -> 1333.6 (1415.7) MB, 1402.0 / 2.1 ms [allocation failure] [GC in old space requested].
120570 ms: Mark-sweep 1333.6 (1415.7) -> 1333.6 (1427.7) MB, 1464.2 / 2.2 ms [allocation failure] [GC in old space requested].
122079 ms: Mark-sweep 1333.6 (1427.7) -> 1340.0 (1409.7) MB, 1508.1 / 2.5 ms [last resort gc].
123749 ms: Mark-sweep 1340.0 (1409.7) -> 1346.3 (1409.7) MB, 1670.2 / 2.1 ms [last resort gc].
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 000001AA792CFB61 <JS Object>
1: inflight [C:\Workspace\node_modules\inflight\inflight.js:~7] [pc=00000202BF9894B7] (this=000001AA792E6661 <JS Global Object>,key=00000045863E5881 <Strin
g[90]\: lstat\x00C:/Workspace/src/assets/leafletmap_files/9/42/176.png>,cb=00000045863E5839 <JS Function lstatcb_ (SharedFunctionInfo 00000253E9EFC219
)>)
2: wrapper [C:\Workspace\...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
I tried using:
node --max_old_space_size=8192 --optimize_for_size --max_executable_size=4096 --stack_size=4096, but It doesn't make any difference.
1- Is there is any other way to avoid optimizing all the assets folder? If it is the source of the problem as I think, because the project were running smoothly before adding more leaflet tile images.
2- Is there are any workarounds to solve this issue?
UPDATE:
There is an open issue at Angular-cli repository related to this question.
Add the below line to package.json file.
"aot": "node --max-old-space-size=8192 ./node_modules/#angular/cli/bin/ng build --prod --aot"
and try running with npm run aot
It worked for me.
You can add NODE_OPTIONS as a system variable. To set memory to 4 gigs,
--max-old-space-size=4096
Lots more info on this thread, they deserve the votes
For those who get the same error, I solved the problem by changing global ng.cmd file.
C:\Users\userName\%AppData%\Roaming\npm
Copy/paste the following code into your ng.cmd.
#IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" --max_old_space_size=8048 "%~dp0\node_modules\#angular\cli\bin\ng" %*
) ELSE (
#SETLOCAL
#SET PATHEXT=%PATHEXT:;.JS;=;%
node --max_old_space_size=8048 "%~dp0\node_modules\#angular\cli\bin\ng" %*
)
node --max_old_space_size=8192 node_modules/#angular/cli/bin/ng serve
Open Terminal and add this above text in your terminal and click enter .
that's it .
Add this line to package.json file.
"build": "node --max_old_space_size=8192 node_modules/#angular/cli/bin/ng build --prod"
Error faced while running "ng serve --open"
Source Link
Solution
In package.json "scripts" property update it to following
**"start": "node --max_old_space_size=2192 ./node_modules/#angular/cli/bin/ng serve",**
Run the following command in terminal:
node --max_old_space_size=10048 ./node_modules/#angular/cli/bin/ng serve
For Angular SSR (server side rendering)
If you are trying to run ng run dev:ssr and getting memory errors, you can do this:
node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng run ANGULAR:serve-ssr -c development
Change ANGULAR to whatever your project is called in angular.json.
-c is the optional configuration you want to run.
In my case, I had to downgrade the node version to v12.14.1 and it works fine now!!
I am finding the starter repo from angular class very very unstable or just on how I am using it. My code works locally hitting the same service as remote yet I get the below
I followed the rules
npm run build
npm start
The slightest error I get the below:
'Hash: 51619e5be8128fe9ed97eb75ce5c5bacf4f02ce1
Version: webpack 2.1.0-beta.22
Child
Hash: 51619e5be8128fe9ed97
Version: webpack 2.1.0-beta.22
Time: 18736ms
Asset Size Chunks Chunk Names
index.js 3.57 MB 0 [emitted] main
[320] ./src async 160 bytes {0} [built]
+ 544 hidden modules
Child
Hash: eb75ce5c5bacf4f02ce1
Version: webpack 2.1.0-beta.22
Time: 11670ms
Asset Size Chunks Chunk Names
index.js 33.5 kB 0 [emitted] main
+ 28 hidden modules
> universal-starter#2.0.0 start /var/test-starter
> npm run server
> universal-starter#2.0.0 server /var/test-starter
> nodemon dist/server/index.js
[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /var/test-starter/dist/**/* src/index.html
[nodemon] starting `node dist/server/index.js`
Listening on: http://localhost:3000
EXCEPTION: Response with status: 200 Ok for URL: null
/var/test-starter/node_modules/zone.js/dist/zone-node.js:140
throw error;
^
Response with status: 200 Ok for URL: null
[nodemon] app crashed - waiting for file changes before starting...
How can this crash a server? I have to kill and restart.
I use angular2 n production without issue. angular2 universal is rather problematic.
How do I resolve gracefully? Or am I not serving in production properly?
The issue seems related with angular/zone.js based on your error.
Try to back to zone.js#0.6.21. If it works, try to locate the codes which cause the issue and reproduce it and post at here.
Since zone.js#0.6.22, there are some new issues, such as https://github.com/angular/zone.js/issues/448