error in gulp build, ver 4

[AmirGilboa]

• I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	4.0.0 beta rc0
Node	6.2.2
npm	x1.8.4
Operating System	Windows 10
etc	etc

Item	Answer
Transpiler	TypeScript
Markup	HTML
CSS	CSS
Router	ui-router
Client Tests	Jasmine
DB	MongoDB
Auth	Y
etc	etc

Playing around with the new version 4 beta.
the project was created. a few warnings, but it runs right away.
gulp serve, and it's up and running. very nice.

now i'm trying the build. not sure what to run, maybe we should maintain a list of useful/common gulp commands. So i'm guessing, by looking at the gulp file, that gulp build should do the magic, and put in dist folder everything i need to deploy to my server.
well, it's doing stuff, client and server folders are created, but in the client there is no index.html or any javascript file. only assets folder, robots file, favicon, and .htaccess. there is an error, see below.
any idea what's wrong?
here is the console output:

D:\Projects\MEAN\beta>gulp build
[22:02:09] Requiring external module babel-register
(node:7016) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[22:02:15] Using gulpfile D:\Projects\MEAN\beta\gulpfile.babel.js
(node:7016) DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead.
(node:7016) DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead.
[22:02:15] Starting 'build'...
[22:02:15] Starting 'clean:dist'...
[22:02:15] Starting 'clean:tmp'...
[22:02:15] Finished 'clean:tmp' after 13 ms
[22:02:15] Finished 'clean:dist' after 69 ms
[22:02:15] Starting 'inject'...
[22:02:15] Starting 'inject:css'...
[22:02:15] gulp-inject 5 files into app.css.
[22:02:15] Finished 'inject:css' after 110 ms
[22:02:15] Finished 'inject' after 111 ms
[22:02:15] Starting 'transpile:server'...
[22:02:17] Finished 'transpile:server' after 1.13 s
[22:02:17] Starting 'build:images'...
[22:02:17] Starting 'typings'...
[22:02:19] gulp-imagemin: Minified 1 image (saved 3.71 kB - 30.1%)
[22:02:19] Finished 'build:images' after 2.13 s
[22:02:20] Finished 'typings' after 2.62 s
[22:02:20] Starting 'copy:extras'...
[22:02:20] Starting 'copy:assets'...
[22:02:20] Starting 'copy:fonts:dist'...
[22:02:20] Starting 'copy:server'...
[22:02:20] Starting 'webpack:dist'...
[22:02:21] Finished 'copy:server' after 1.17 s
[22:02:24] Finished 'copy:extras' after 3.66 s
[22:02:30] Finished 'copy:fonts:dist' after 10 s
{ [Error: [default] D:/Projects/MEAN/beta/typings/browser/ambient/jquery/index.d.ts:3192:12
Subsequent variable declarations must have the same type. Variable '$' must be
of type 'cssSelectorHelper', but here has type 'JQueryStatic'.]
message: '[default] D:/Projects/MEAN/beta/typings/browser/ambient/jquery/index.d.ts:3192:12 \nSubsequent variable declarations must have the same type. Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'.',
showStack: false,
showProperties: true,
plugin: 'webpack-stream',
__safety: { toString: [Function: bound ] } }
[22:02:48] Finished 'copy:assets' after 28 s

[Koslun]

So I'm guessing, by looking at the gulp file, that gulp build should do the magic, and put in dist folder everything I need to deploy to my server.

Pretty much.

(node:7016) DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead.
(node:7016) DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead.

This does not matter and will disappear with Gulp 4.

Error: [default] D:/Projects/MEAN/beta/typings/browser/ambient/jquery/index.d.ts:3192:12
Subsequent variable declarations must have the same type. Variable '$' must be
of type 'cssSelectorHelper', but here has type 'JQueryStatic'.]
message: '[default] D:/Projects/MEAN/beta/typings/browser/ambient/jquery/index.d.ts:3192:12 \nSubsequent variable declarations must have the same type. Variable \'$\' must be of type \'cssSelectorHelper\', but here has type \'JQueryStatic\'.',

These are just type errors that don't matter either. They bubble up in the gulp build process unintentionally as errors but are caught and should not interfere with the build process.

Seeing that the gulp pipeline continued for 18 seconds to output more it doesn't seem like it broke it either. It is apparent that not all of your tasks are completing though. In particular webpack:dist would need to complete to actually output index.html as well as the css and javascript files.

Did it just return to console after that last output or did you exit to it yourself?

[Awk34]

@Koslun with the new version of Protractor, we shouldn't need to use typings for Protractor type definitions anymore as well. We can manually import the globals that we want: https://github.com/angular/protractor/blob/master/exampleTypescript/spec.ts#L8 (meaning we can exclude the $ def)

[ronrbc]

thanks for the comments. it did return to console after the last error. i think so.
you're saying all these errors can be (sort of) ignored? i will try that again tonight (at work now)
and report on the progress. thanks guys!

[Koslun]

@Awk34 Great, can avoid a lot of type errors for tests and finally solve the last type error.

[AmirGilboa]

ok, so i checked again, updated all to latest versions: node, npm, yo, and the generator. and the results looks the same: gulp serve is working, gulp build is not. crashes during build, and the dist folder only contains robots.txt, htaccess, favicon, and assets folder. please see the console output below, and let me know if there is anything you suspect to be the problem. thanks.
(this test was done with the above settings (typescript). next i will repeat with babel, then report.)

D:\Projects\MEAN\beta>gulp build
[19:50:03] Requiring external module babel-register
(node:8136) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[19:50:13] Using gulpfile D:\Projects\MEAN\beta\gulpfile.babel.js
(node:8136) DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead.
(node:8136) DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead.
[19:50:13] Starting 'build'...
[19:50:13] Starting 'clean:dist'...
[19:50:13] Starting 'clean:tmp'...
[19:50:13] Finished 'clean:dist' after 60 ms
[19:50:13] Finished 'clean:tmp' after 58 ms
[19:50:13] Starting 'inject'...
[19:50:13] Starting 'inject:scss'...
[19:50:13] gulp-inject 5 files into app.scss.
[19:50:13] Finished 'inject:scss' after 198 ms
[19:50:13] Finished 'inject' after 201 ms
[19:50:13] Starting 'transpile:server'...
[19:50:15] Finished 'transpile:server' after 1.78 s
[19:50:15] Starting 'build:images'...
[19:50:16] Starting 'typings'...
[19:50:19] gulp-imagemin: Minified 1 image (saved 3.71 kB - 30.1%)
[19:50:19] Finished 'build:images' after 3.93 s
[19:50:19] Finished 'typings' after 2.98 s
[19:50:19] Starting 'copy:extras'...
[19:50:19] Starting 'copy:assets'...
[19:50:19] Starting 'copy:fonts:dist'...
[19:50:19] Starting 'copy:server'...
[19:50:19] Starting 'webpack:dist'...
[19:50:22] Finished 'copy:server' after 2.6 s
[19:50:24] Finished 'copy:extras' after 5.18 s
[19:50:28] Finished 'copy:fonts:dist' after 8.44 s
[19:50:28] Finished 'copy:assets' after 8.58 s

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: [default] D:/Projects/MEAN/beta/typings/browser/ambient/jquery/index.d.ts:3192:12
Subsequent variable declarations must have the same type.  Variable '$' must be
of type 'cssSelectorHelper', but here has type 'JQueryStatic'.

D:\Projects\MEAN\beta>

[AmirGilboa]

btw, 2 little related questions:

1. how do i know the version of my angular-fullstack-generator?
2. can i keep 2 versions of the generator on my machine? (the latest, for my usual work, and the 4beta for these investigations) how?
   thanks again for all your help.

[Koslun]

@AmirGilboa

1. You can check the version of all your globally installed npm packges with npm list -g --depth=0. Should also be entered into a comment at the top of your gulp file and .yo-rc file.
2. Regarding multiple versions. With nvm you can install multiple versions of node on your machine, with global packages being installed separately for each. The main version was made for linux and mac os x but there is a separate package available for windows: https://github.com/coreybutler/nvm-windows.
   Another option is to clone the project and link it with npm link. You can then switch between different commits.

Given the output of your error I think it might actually be that you have an earlier version of the generator where typings errors would cause the build to explode. Easiest fix would be to remove the protractor typings like @Awk34 mentioned. Meaning remove the protractorentry from typings.json and then run typings prune (to automatically remove untracked typings). Though a more permanent fix would be some small changes in the gulp build pipeline so that any typings errors doesn't break the build. Definitely not ideal to not be able to build without fixing all type errors.

[AmirGilboa]

typings was not installed globally (srroy, i didn't know). so i installed it, removed the line, ran typings prune, ran the gulp build again, and it failed again. the same error, no change.
(that was the typescript version)

i created a babel version. and here also, the gulp serve works well, and the site is displayed.
gulp build fails. here is the command output:

D:\Projects\MEAN\beta2>gulp build
[23:24:03] Requiring external module babel-register
(node:4224) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[23:24:09] Using gulpfile D:\Projects\MEAN\beta2\gulpfile.babel.js
(node:4224) DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead.
(node:4224) DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead.
[23:24:09] Starting 'build'...
[23:24:09] 'build' errored after 3.16 ms
[23:24:09] Error: Task typings is not configured as a task on gulp.  If this is
a submodule, you may need to use require('run-sequence').use(gulp).
    at D:\Projects\MEAN\beta2\node_modules\run-sequence\index.js:20:10
    at Array.forEach (native)
    at verifyTaskSets (D:\Projects\MEAN\beta2\node_modules\run-sequence\index.js:13:11)
    at D:\Projects\MEAN\beta2\node_modules\run-sequence\index.js:32:4
    at Array.forEach (native)
    at verifyTaskSets (D:\Projects\MEAN\beta2\node_modules\run-sequence\index.js:13:11)
    at runSequence (D:\Projects\MEAN\beta2\node_modules\run-sequence\index.js:92:2)
    at Gulp.<anonymous> (D:\Projects\MEAN\beta2\gulpfile.babel.js:401:31)
    at module.exports (D:\Projects\MEAN\beta2\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (D:\Projects\MEAN\beta2\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (D:\Projects\MEAN\beta2\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (D:\Projects\MEAN\beta2\node_modules\orchestrator\index.js:134:8)
    at C:\Users\Ron\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^3.7.0\index.js:46:20
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:577:11)
    at run (bootstrap_node.js:352:7)
    at startup (bootstrap_node.js:144:9)
    at bootstrap_node.js:467:3

D:\Projects\MEAN\beta2>

i'm a bit confused to see the word 'typings' in the output of the babel version. isn't typings a way to provide type definitions for existing js libraries, for easy development with typescript?

thanks guys.

[Koslun]

@AmirGilboa You are correct and I can see that the task is there in the generator without being removed in Babel https://github.com/angular-fullstack/generator-angular-fullstack/blob/master/templates/app/gulpfile.babel.js#L495.

Possibly in a future where Flow can make use of them, but that is not something happening in the short-term at least.

The babel version should work after removing the typings task from the build pipeline.

[Koslun]

Ok, now see that I forgot to create a PR to fix this bug for Typescript. The issue has been described and solved earlier in #2039.

Will have to get a PR going then.

[ronrbc]

great. following... pls let me know when can i update the generator and repeat the process. thanks!