Angular-cli: Unable to build on Docker Linux Image (ubuntu)

[nak411]

angular-cli: 1.0.0-beta.5
node: 5.10.1
os: linux x64
(More specifically running in a docker container Linux 4.4.8-boot2docker #1 SMP Mon Apr 25 21:57:27 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux)

No code changes simply ran the following commands

ng new testapp
cd app testapp
ng build

Keep on getting the following error:
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
The Broccoli Plugin: [Funnel] failed with:
Error: ENOENT: no such file or directory, lstat 'typings'
at Error (native)
at Object.fs.lstatSync (fs.js:887:18)
at symlink (/testapp/node_modules/angular-cli/node_modules/symlink-or-copy/index.js:60:26)
at symlinkOrCopySync (/testapp/node_modules/angular-cli/node_modules/symlink-or-copy/index.js:55:5)
at /testapp/node_modules/angular-cli/node_modules/broccoli-funnel/node_modules/broccoli-plugin/read_compat.js:58:9
at lib$rsvp$$internal$$tryCatch (/testapp/node_modules/angular-cli/node_modules/broccoli-funnel/node_modules/broccoli-plugin/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/testapp/node_modules/angular-cli/node_modules/broccoli-funnel/node_modules/broccoli-plugin/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (/testapp/node_modules/angular-cli/node_modules/broccoli-funnel/node_modules/broccoli-plugin/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:1019:11)
at lib$rsvp$asap$$flush (/testapp/node_modules/angular-cli/node_modules/broccoli-funnel/node_modules/broccoli-plugin/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at:
at Funnel.Plugin (/testapp/node_modules/angular-cli/node_modules/broccoli-funnel/node_modules/broccoli-plugin/index.js:7:31)
at new Funnel (/testapp/node_modules/angular-cli/node_modules/broccoli-funnel/index.js:44:10)
at Angular2App._buildInputTree (/testapp/node_modules/angular-cli/lib/broccoli/angular2-app.js:85:7)
at new Angular2App (/testapp/node_modules/angular-cli/lib/broccoli/angular2-app.js:51:41)
at module.exports (/testapp/angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/testapp/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/testapp/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
at new Class (/testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (/testapp/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
at /testapp/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
at lib$rsvp$$internal$$tryCatch (/testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at /testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (/testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)

Update:
The issue seems specific to linux (ubuntu). Running the same commands on OS X builds the app successfully

Here are the mac configurations. Is there a reason why its not building on linux?

angular-cli: 1.0.0-beta.5
node: 5.5.0
os: darwin x64

ng build
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Built project successfully. Stored in "dist/".

Update 2:

Upon further investigation, it seems like ng new on linux does not install typings correctly and for some reason those dependences are not pulled even when manually trying to install them

On OSX
the typings dir
typings
├── browser
│   └── ambient
│   ├── angular-protractor
│   │   └── index.d.ts
│   ├── es6-shim
│   │   └── index.d.ts
│   ├── jasmine
│   │   └── index.d.ts
│   └── selenium-webdriver
│   └── index.d.ts
├── browser.d.ts
├── main
│   └── ambient
│   ├── angular-protractor
│   │   └── index.d.ts
│   ├── es6-shim
│   │   └── index.d.ts
│   ├── jasmine
│   │   └── index.d.ts
│   └── selenium-webdriver
│   └── index.d.ts
└── main.d.ts

On Linux (after manually invoking typings install) the typings directory is not created by ng new
typings
`-- index.d.ts

The content of typings.json are identical on both OS

[monojack]

you have no typings installed. typings install before you run ng build. post-install didnt do it for you because you either don't have typings installed globally or something else.

[nak411]

@monojack but I do have typings installed globally, thats why the error is confusing. Here is output from typings -v

typings -v
1.0.4

[nak411]

@monojack So I read in one of your other post to run typings install in root of the project which got me past the first stack trace now I am getting the following on ng build

/testapp# ng build
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /testapp/tmp/broccoli_type_script_compiler-input_base_path-tXpsChUP.tmp/0/src/typings.d.ts (1, 1): File '/testapp/tmp/broccoli_type_script_compiler-input_base_path-tXpsChUP.tmp/0/typings/browser.d.ts' not found.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/testapp/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/testapp/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /testapp/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/testapp/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/testapp/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/testapp/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/testapp/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at:
    at BroccoliTypeScriptCompiler.Plugin (/testapp/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/testapp/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/testapp/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
    at Angular2App._getTsTree (/testapp/node_modules/angular-cli/lib/broccoli/angular2-app.js:321:18)
    at Angular2App._buildTree (/testapp/node_modules/angular-cli/lib/broccoli/angular2-app.js:116:23)
    at new Angular2App (/testapp/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/testapp/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/testapp/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/testapp/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/testapp/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /testapp/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/testapp/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

[monojack]

@nak411 Sorry, I didn't quite get what happened. In your last post you said that

typings install in root of the project which got me past the first stack trace

but in your fp update you say typings install didn't create the typings directory.

It seems that you are missing the browser.d.ts file inside typings dir. Is that true?

[nak411]

@monojack Sorry I meant that ng new testapp did not create a typings directory. typings install did create a typings directory but it only contains index.d.ts where as the OS X version has many files inside of it as listed in the original post.

You are correct I am missing browser.d.ts in the typings directory.

[filipesilva]

I think I know what's going on. The CLI is still using the pre 1.0 typings version, but you must have the most recent version installed.

Can you do the following from your project root and show me the results?

rm -rf typings
npm run postinstall
ng serve

[nak411]

@filipesilva Thank you. You were absolutely right. Here is the output after ng-serve

Livereload server on http://localhost:49152
Serving on http://localhost:4200/

Build successful - 3476ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler                    | 2564ms
vendor                                        | 703ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler (1)                | 2564ms
vendor (1)                                    | 703ms 

[nak411]

@filipesilva @monojack Would you recommend closing this bug or updating the cli to correctly run postinstall on linux distributions. It seems like that post install is not being run.

[monojack]

@nak411 can you please verify something for me? I currently don't have access to a linux machine nor a vm.
Basically, I'd like you to make a small change inside your global angular-cli package. and generate a new project to see if postinstall works.
Would you be able to do that?

What I want you to do is: inside angular-cli/addon/ng2/blueprints/ng2/files/package.json, change postinstall's value to sudo typings install and go ahead and generate a new project. tell me if postinstall runs then. Cheers!

[nak411]

@monojack I followed the steps that you mentioned but unfortunately got the same result. postinstall is not ran (typings directory isn't created)

However I have narrowed the problem down to Docker or docker image of ubuntu itself.

I did a full installation of ubuntu (linux) on my PC and ran the same commands and the project builds fine (ng new also installs typings correctly).

So it seems like that the problem lies with docker or the ubuntu image for docker. I am using the official docker ubuntu image
https://hub.docker.com/_/ubuntu/

[nak411]

@filipesilva @monojack Ran against a CentOS image in Docker with same results. So it seems like the problem is with docker itself and not necessarily the images. The following are not pulled on ng new and are only installed after explicitly running npm run postinstall

Note this only happens in docker.

[email protected] postinstall /testapp
typings install

├── es6-shim (ambient)
├── angular-protractor (ambient dev)
├── jasmine (ambient dev)
└── selenium-webdriver (ambient dev)

[mathroc]

@monojack I'm also trying to use ng-cli inside a docker container (based on the official node image here) and had the same problem. I don't think changing typings install to sudo typings install will help because sudo is not installed in many image (most run as root)

so I'm not sure why the postinstall script has not run, but running ti manually solves the missing typings directory

[csharpee]

Ubuntu 16.04, OSX,& Angular-CLI Watchman & Broccoli Errors Bug / Fix

Hello everyone,
I have had all the same errors above this thread and this fix for fb-watchman aka watchman seems to be the heart of the problem. I am not sure why this happens via Linux & OSX only, but there are many version of the same problem I feel. I hope this helps resolve many of the issues Linux Ubuntu and OSX has been having. It surely cleared everything up for me. If you try and install watchman globally via NPM, this file is not the same. Source here: http://ember-cli.com/user-guide/#watchman

For Ubuntu version 16.04, it seems we need to manually install watchman via source code. This will enable our material & angular 2 environment to work without any watch related errors. At the moment, my angular-cli build works and launches the server saying hello, but the watchman still errors out and fails to load. It took a couple hours to do some dirty work, but I have traced out the errors each step of the way by trial and error.

The angular-cli system now works with with Linux / Ubuntu 16.04 and possibly also 14.0 may need to do this fix from @yahyaKacem experience. This should also 'help' OSX users.

The Error:

‘$ ng serve`(node:2406) 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.
Could not start watchman; falling back to NodeWatcher for file system events. Visit http://ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:49152
Serving on http://localhost:4200/

_https://facebook.github.io/watchman/docs/install.html#installing-from-source_

Information:

You can use these steps below to get watchman built.
You will need autoconf and automake. For python support, you will also need setuptools and may need to install a python-dev or python-devel package.

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.5.0 # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

Download each git repository for dependencies

• ftp://alpha.gnu.org/pub/gnu/autoconf/
• ftp://alpha.gnu.org/pub/gnu/automake/
• ftp://alpha.gnu.org/pub/gnu/m4/

Install each separate m4, autoconf, & automake via extracted directory.

1. ./configure
2. make
3. sudo make install

Serve the Angular CLI via ng serve

ng serve

Install via Ubuntu python-dev

sudo apt-get install python-dev

Possible Errors / Fixes:

_‘The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl’_

“A non-recoverable condition has triggered. Watchman needs your help! The triggering condition was at timestamp=1464729822: inotify-add-watch(/home/jix/Desktop/Project Development/Angular Material Demo/material-project/node_modules/angular-cli/node_modules/angular-cli/node_modules/markdown-it-terminal/node_modules/markdown-it/lib/common) -> *The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl* All requests will continue to fail with this message until you resolve the underlying problem. You will find more information on fixing this at *https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch*”

_https://facebook.github.io/watchman/docs/install.html#linux-inotify-limits_

• /proc/sys/fs/inotify/max_user_instances impacts how many different root dirs you can watch.
• /proc/sys/fs/inotify/max_user_watches impacts how many dirs you can watch across all watched roots.
• /proc/sys/fs/inotify/max_queued_events impacts how likely it is that your system will experience a notification overflow.

To update / change the default configurations, do the following commands:

_Source: http://unix.stackexchange.com/questions/13751/kernel-inotify-watch-limit-reached#13757_

Step 1: (check current status of inotify watches, instances, & events)

1. cat /proc/sys/fs/inotify/max_user_watches
2. cat /proc/sys/fs/inotify/max_user_instances
3. cat /proc/sys/fs/inotify/max_queued_events

Step 2: (change current status of inotify watches, instances, & events for Ubuntu)

1. echo 10485760 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
2. echo 10485760 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
3. echo 10485760 | sudo tee -a /proc/sys/fs/inotify/max_queued_events

Conclusion:

This has fixed all errors encountered with the fb-watchman aka ‘watchman’ for Ubuntu 16.04 & angular-cli. The NPM ‘watchman’ is not the same file. I assume this needs to be accomplished on v14 too, but let me know if this helps.

Peace

[filipesilva]

@nak411 @monojack @mathroc glad it's working with manual running of postinstall. This problem also happens a lot in https://github.com/angular/quickstart, and as far as I can tell it's something with typings itself... maybe some weird registry connection issue where sometimes it can't be reached.

I don't really know what it is tbh, so the best I can say for containers is that you explicitly call npm run postinstall manually as part of your setup in environments where you see it's not running.

The long term solution is to move to the new typings scheme present in Typescript 2.0, via @types/* packages in npm. So for now I'll close this issue, as there isn't much more that we can do.

@csharpee really nice write-up for the watchman issue, thank you so much!

[colemickens]

Few questions here:

1. Is the fix for watchman required to unblock the ng build scenario? Or does it remove the need for manually running postinstall? Or is it a separate issue that just happened to be solved in this thread?
2. Is there a bug reported upstream? Either on the docker-ubuntu image or npm?
3. Is this documented anywhere for the time being?
4. Am I correct in understanding that this will soon by a moot issue due to retrieving typings via npm, thus removing the need for the postinstall step?

[filipesilva]

@colemickens the only place where I've seen it documented is in https://github.com/angular/quickstart#install-npm-packages. You are correct that the point will soon be moot due to npm typings.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}