Gulp build failed.

[dylannnn]

• 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.3
Node	6.2.2
npm	3.9.5
Operating System	Windows 10

Item	Answer
Transpiler	TypeScript
Markup	HTML
CSS	SCSS
Router	ui-router
Build Tool	Gulp
Client Tests	Jasmine
DB	MongoDB
Auth	Y

ERROR:
[21:05:29] Starting 'build'...
[21:05:29] 'build' errored after 1.34 ms
[21:05:29] Error: Task transpile:client is not configured as a task on gulp.  If this is a submodule, you may need to use require('run-sequence').use(gulp).
    at C:\Users\Yunfei\www\mean\node_modules\run-sequence\index.js:20:10
    at Array.forEach (native)
    at verifyTaskSets (C:\Users\Yunfei\www\mean\node_modules\run-sequence\index.js:13:11)
    at C:\Users\Yunfei\www\mean\node_modules\run-sequence\index.js:32:4
    at Array.forEach (native)
    at verifyTaskSets (C:\Users\Yunfei\www\mean\node_modules\run-sequence\index.js:13:11)
    at runSequence (C:\Users\Yunfei\www\mean\node_modules\run-sequence\index.js:92:2)
    at Gulp.<anonymous> (C:\Users\Yunfei\www\mean\gulpfile.babel.js:432:31)
    at module.exports (C:\Users\Yunfei\www\mean\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Users\Yunfei\www\mean\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Users\Yunfei\www\mean\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\Users\Yunfei\www\mean\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
    at C:\Users\Yunfei\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 (node.js:348:7)
    at startup (node.js:140:9)
    at node.js:463:3

I tried to comment:

line 515 //'transpile:client'
line 520 //'generate-favicon'

because this two tasks are not exist.

Then I got the error:

Subsequent variable declarations must have the same type. Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'.

I don't know how to fix it. I searched online, vladimir-ivanov commened on angular/angular#4725 with a solution:

declare module "jquery" {
    export var $:JQueryStatic;
}
//declare var jQuery: JQueryStatic;
//declare var $: JQueryStatic;

but every time when I run gulp command, it will reset back.

Any ideas?

[Awk34]

@dylannnn let me release a new beta version... hold on..

[Awk34]

4.0.0-beta.4 has been pushed to npm

[dylannnn]

Hi Awk34,

That's great!!!

But, I got some other small errors, which I can fix it manually:
#2025

But still, I'm keeping get this ERROR (every time when I run "gulp build"):

...
[22:28:47] Finished 'copy:assets' after 6.73 s

stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: [default] C:/Users/Yunfei/www/triple/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'.

I've no idea how to fix this. Tried:

declare module "jquery" {
export var $:JQueryStatic;
}
//declare var jQuery: JQueryStatic;
//declare var $: JQueryStatic;

But still not works, because when I run build, those will change back automatically.

Thanks for your effort! Let's make a better Angular-Fullstack!
Yunfei

[Awk34]

@dylannnn what about just removing the jQuery dependency? I don't believe the generator needs jQuery out-of-the-box, since Angular provides JQLite itself.

[dylannnn]

@Awk34, I tried to remove the jQuery library from typings.json, and the typings/main.d.ts, typings/browser.d.ts, and remove jquery folder from typings/main/ambient and typings/browser/ambient, then, I run "gulp build", I got the error as below:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: [default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:65:42
Cannot find name 'JQuery'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:986:42
Cannot find name 'JQuery'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:1205:18
Cannot find name 'JQuery'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:1230:25
Cannot find name 'JQuery'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:1827:45
Cannot find name 'JQueryStatic'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:1832:17
Cannot find name 'JQuery'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:1838:39
Cannot find name 'JQuery'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:1844:18
Cannot find name 'JQuery'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:1856:48
Cannot find name 'JQuery'.[default] C:/Users/Yunfei/www/triple/typings/browser/ambient/angular/index.d.ts:1857:53
Cannot find name 'JQuery'.

angular does need it?

Let me do more research on "Typings".

Thanks.

[Koslun]

I believe it's protractor and jquery both having the $ as a global variable. Which was not an issue before when we differentiated between test and regular typings.

Think it should be fine to remove both explicit jquery dependency and its typings.

@dylannnn Angular does not explicitly need JQuery but unsure how the typings for it has been written. Will look into it.

[Awk34]

ugh damn, why do the Angular typings also require JQuery typings....

at it's worst, you'll just have that typings error, which I guess you can ignore..

[Koslun]

Yeah the Angular typings really do depend on JQuery: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/angularjs/angular.d.ts#L7.

This is just a type error so should be able to just ignore it imo.

[dylannnn]

I think I know why I can't build.

I checked the "gulpfile.babel.js", in the "gulp serve" task, this
// 'webpack:dev',
has been comment, so it will be able to run "gulp serve" task by ignore the error, and in the "gulp build" task, I modify:

[
'copy:extras',
'copy:assets',
'copy:fonts:dist',
'copy:server',
'webpack:dist'
]

to

[
'copy:extras',
'copy:assets',
'copy:fonts:dist',
'copy:server',
//'webpack:dist'
]

and now I can build successfully. But I can still see the error in the command line, which I can ignore.

Best,

[Awk34]

@dylannnn webpack:dev isn't in serve because it's run by server/config/express.js (livereload stuff).

I don't see why you'd comment out webpack:dist in you build

[Koslun]

Build seems broken on canary. Getting:

gulp build
[15:22:03] Requiring external module babel-register
(node) crypto.createCredentials is deprecated. Use tls.createSecureContext instead.
(node) crypto.Credentials is deprecated. Use tls.createSecureContext instead.
[15:22:05] Using gulpfile ~/apps/gen-tmps/4.0.0-beta/def-build/gulpfile.babel.js
[15:22:05] Starting 'build'...
[15:22:05] Starting 'clean:dist'...
[15:22:05] Starting 'clean:tmp'...
[15:22:05] Finished 'clean:dist' after 5.31 ms
[15:22:05] Finished 'clean:tmp' after 3.62 ms
[15:22:05] Starting 'inject'...
[15:22:05] Starting 'inject:scss'...
[15:22:05] gulp-inject 5 files into app.scss.
[15:22:05] Finished 'inject:scss' after 42 ms
[15:22:05] Finished 'inject' after 42 ms
[15:22:05] Starting 'transpile:server'...
[15:22:06] Finished 'transpile:server' after 587 ms
[15:22:06] Starting 'build:images'...
[15:22:06] Starting 'typings'...
[15:22:07] gulp-imagemin: Minified 1 image (saved 3.73 kB - 30.2%)
[15:22:07] Finished 'build:images' after 644 ms
[15:22:07] Finished 'typings' after 1.27 s
[15:22:07] Starting 'copy:extras'...
[15:22:07] Starting 'copy:assets'...
[15:22:07] Starting 'copy:fonts:dist'...
[15:22:07] Starting 'copy:server'...
[15:22:07] Starting 'webpack:dist'...
[15:22:08] Finished 'copy:server' after 541 ms
[15:22:09] Finished 'copy:extras' after 1.78 s
[15:22:10] Finished 'copy:fonts:dist' after 2.89 s
[15:22:10] Finished 'copy:assets' after 2.95 s

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: [default] /home/adam/apps/gen-tmps/4.0.0-beta/def-build/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'.

The resulting dist folder contains all of the server files but none of the client js|css|html files. Only robots.txt, favicon and the assets folder with fonts, images and rev-manifest.json.

Looking into it now, the webpack build did work a while ago so just have to work out what broke it. Only thing I can see from the output now is that the task webpack:dist does not appear to finish due to an unknown error, thus causing webpack to not output the client code.

@Awk34 Any idea what could have broken the build or how to get the errors to be more verbose? Going with the assumption that it's some change to the webpack file

Configuration:

Item	Version
generator-angular-fullstack	canary#44f1a39a61f739dd18249462e2415ffe6ebb1334 (latest)
Node	4.4.7
npm	3.10.3
Operating System	Ubuntu 15.10
MongoDB	3.0.3

Item	Answer
Transpiler	TypeScript
Markup	HTM
CSS	SCSS
Router	ui-router
Build Tool	Gulp
Client Tests	Jasmine
DB	MongoDB
Auth	Y
Bootstrap	yes
UI Bootstrap	yes

[Koslun]

Going back to an earlier version of the webpack file did not change anything. Looking into changes in the gulp script now.

Using commit c85dac2 (16 days ago) as a reference as I know for sure that it worked back then.

[Koslun]

Only changes to remove bower files and the constant task. Along with lazy-loading webpack config and css task changes. Tried reverting the latter two but still no changes. Also tried updating the dependencies of the earlier working project to verify that it's not one of those updates that are not working.

[Koslun]

Commenting out new webpack.NoErrorsPlugin(), in the build section of the webpack config and swallowing the error in the gulp file allows for at least a quick-fix. Following that the build seems to work just fine.

Specifically changed the webpack:dist task by adding an on error function as follows:

gulp.task('webpack:dist', function() {
    const webpackDistConfig = makeWebpackConfig({ BUILD: true });
    return gulp.src(webpackDistConfig.entry.app)
        .pipe(webpack(webpackDistConfig))
        .on('error', function handleError(err) {
            console.log('start of errors in webpack');
            console.log(err);
            console.log('end of errors in webpack');
            this.emit('end'); // Recover from errors
        })
        .pipe(gulp.dest(`${paths.dist}/client`));
});

As seen from the output below it seems like the error caught is simply the type error that currently exists. So a more permanent fix seems to be to avoid having such type errors register as errors. Given that there are more serious errors that we wish to catch and prevent from being built. Though I am unsure how they've come to start being registered as such to begin with.

...
[19:23:38] Starting 'webpack:dist'...
[19:23:39] Finished 'copy:server' after 565 ms
[19:23:40] Finished 'copy:extras' after 1.82 s
[19:23:41] Finished 'copy:fonts:dist' after 2.94 s
[19:23:41] Finished 'copy:assets' after 3.01 s
start of errors in webpack
{ [Error: [default] /home/adam/apps/gen-tmps/4.0.0-beta/def-build4/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] /home/adam/apps/gen-tmps/4.0.0-beta/def-build4/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 ] } }
end of errors in webpack
[19:23:54] Version: webpack 1.13.1
                                Asset     Size  Chunks             Chunk Names
          app.71a217d033ed77859e03.js   283 kB       0  [emitted]  app
    polyfills.71a217d033ed77859e03.js   136 kB       1  [emitted]  polyfills
       vendor.71a217d033ed77859e03.js   721 kB       2  [emitted]  vendor
      app.71a217d033ed77859e03.js.map   945 kB       0  [emitted]  app
polyfills.71a217d033ed77859e03.js.map   584 kB       1  [emitted]  polyfills
   vendor.71a217d033ed77859e03.js.map   5.6 MB       2  [emitted]  vendor
                 ../client/index.html  1.43 kB          [emitted]  

ERROR in [default] /home/adam/apps/gen-tmps/4.0.0-beta/def-build4/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'.
Child html-webpack-plugin for "../client/index.html":

[19:23:54] Finished 'webpack:dist' after 15 s
[19:23:54] Starting 'revReplaceWebpack'...
[19:23:54] Finished 'revReplaceWebpack' after 11 ms
[19:23:54] Finished 'build' after 18 s

[Awk34]

@Koslun does noEmitOnError need to explicitly be set to false?

Edit: Well, it does look like TS is emitting, and subsequently Webpack is emitting. Hmm.

[Koslun]

@Awk34 Setting noEmitOnError in tsconfig options changed nothing for me.

I am also curious what it was that somehow caused TS errors to suddenly become emitted through Webpack to Gulp.

Slightly related news, looks like v2 of awesome-typescript-loader launched today and that it will be exclusively supporting webpack 2 and typescript 2. Which both seem pretty done, webpack in particular only having some bug fixes left but with a severe lack of documentation.

Gulp 4 additionally seems extremely close to launch, the issues they are waiting on might be fixed by this weekend. So thinking the documentation and plugins might be ready by the time we have Angular 2 support somewhat supported.