Angular-cli: ng new --mobile fails with peerDependencies not satisfied for angular2-universal

[duergner]

MacOSX El Capitan

$ ng -v
angular-cli: 1.0.0-beta.5
node: 4.4.5
os: darwin x64

Very clean install, fresh OS, fresh Node (from pkg install)

$ ng new --mobile NAME
installing ng2
  create .clang-format
  create .editorconfig
  create src/app/NAME.component.spec.ts
  create src/app/NAME.component.ts
  create src/app/environment.ts
  create src/app/index.ts
  create src/app/shared/index.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/system-config.ts
  create src/tsconfig.json
  create src/typings.d.ts
  create angular-cli-build.js
  create angular-cli.json
  create config/environment.dev.ts
  create config/environment.js
  create config/environment.prod.ts
  create config/karma-test-shim.js
  create config/karma.conf.js
  create config/protractor.conf.js
  create e2e/app.e2e.ts
  create e2e/app.po.ts
  create e2e/tsconfig.json
  create e2e/typings.d.ts
  create .gitignore
  create package.json
  create public/.npmignore
  create tslint.json
  create typings.json
installing mobile
  create src/icons/android-chrome-144x144.png
  create src/icons/android-chrome-192x192.png
  create src/icons/android-chrome-36x36.png
  create src/icons/android-chrome-48x48.png
  create src/icons/android-chrome-72x72.png
  create src/icons/android-chrome-96x96.png
  create src/icons/apple-touch-icon-114x114.png
  create src/icons/apple-touch-icon-120x120.png
  create src/icons/apple-touch-icon-144x144.png
  create src/icons/apple-touch-icon-152x152.png
  create src/icons/apple-touch-icon-180x180.png
  create src/icons/apple-touch-icon-57x57.png
  create src/icons/apple-touch-icon-60x60.png
  create src/icons/apple-touch-icon-72x72.png
  create src/icons/apple-touch-icon-76x76.png
  create src/icons/apple-touch-icon-precomposed.png
  create src/icons/apple-touch-icon.png
  create src/icons/favicon-16x16.png
  create src/icons/favicon-32x32.png
  create src/icons/favicon-96x96.png
  create src/icons/icon.png
  create src/icons/mstile-144x144.png
  create src/icons/mstile-150x150.png
  create src/icons/mstile-310x150.png
  create src/icons/mstile-310x310.png
  create src/icons/mstile-70x70.png
  create src/icons/safari-pinned-tab.svg
  create src/main-app-shell.ts
  create src/manifest.webapp
  create src/system-import.js
Successfully initialized git.
⠇ Installing packages for tooling via npm
├── es6-shim (ambient)
├── node (ambient)
├── angular-protractor (ambient dev)
├── jasmine (ambient dev)
└── selenium-webdriver (ambient dev)

The package [email protected] does not satisfy its siblings' peerDependencies requirements!
Error: The package [email protected] does not satisfy its siblings' peerDependencies requirements!
    at /usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/lib/install.js:125:32
    at /usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/lib/install.js:268:7
    at /usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/node_modules/read-installed/read-installed.js:142:5
    at /usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/node_modules/read-installed/read-installed.js:263:14
    at cb (/usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
    at /usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/node_modules/read-installed/read-installed.js:263:14
    at cb (/usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
    at /usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/node_modules/read-installed/read-installed.js:263:14
    at cb (/usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
    at /usr/local/lib/node_modules/angular-cli/node_modules/angular-cli/node_modules/npm/node_modules/read-installed/read-installed.js:263:14

[filipesilva]

Yeah it seems that a dependency of angular2-universal has a peerDependency on itself, but with a difference version. I put up a PR that addresses that.

[filipesilva]

Meanwhile, while a new CLI version that that change isn't included, you can do the following:

• ng new --mobile NAME --skip-npm
• cd NAME
• change the angular2-univeral version to 0.101.5 in package.json
• npm install

[mackelito]

Doing this and then ng serve ends up in "undefined" on http://localhost:4200/..
The build works fine...

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

[drewsmith-uk]

After doing what @filipesilva suggested, I am now getting the same result as @mackelito - when I ng serve my page on localhost:4200 just says "undefined".

Version details:

C:\PROJECTS\ngmob>ng -v
(node:11108) 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.
angular-cli: 1.0.0-beta.5
node: 6.2.0
os: win32 x64

[mackelito]

Not sure why but now it works for me...
ng new test-site && cd test-site --mobile

[delight]

@mackelito the last command you send would not create a mobile app, hence you don't use angular-universal !

I can confirm the undefined result described before.

[mackelito]

Ah.. My bad! 😬
Problem is still there..!

[delight]

@filipesilva did you give it a test-spin ? because with the dep "angular2-universal":"0.101.5" it starts but as mentioned by @mackelito and @drewstiff the served page is displaying only:

undefined

[filipesilva]

Ugh... this bad. @jeffbcross can you have a look and propose a possible solution?

[amitevski]

same problem here. after running ng serve the dist/index.html actually only contains the string "undefined" instead of the html code. so it may be some build step?

[hetunandu]

Im getting this build error with [email protected]

`The Broccoli Plugin: [AppShellPlugin] failed with:
Error: Command failed: /bin/sh -c node /Users/hetu/code/Projects/Noted/angular/node_modules/angular2-broccoli-prerender/dist/child_proc.js --sourceHtml=/Users/hetu/code/Projects/Noted/angular/tmp/app_shell_plugin-input_base_path-Po8CJDrl.tmp/0/index.html --optionsPath=/Users/hetu/code/Projects/Noted/angular/tmp/app_shell_plugin-input_base_path-Po8CJDrl.tmp/0/main-app-shell --outputIndexPath=/Users/hetu/code/Projects/Noted/angular/tmp/app_shell_plugin-output_path-JFQpNvbH.tmp/index.html

at ChildProcess.exithandler (child_process.js:213:12)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:827:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

The broccoli plugin was instantiated at:
at AppShellPlugin.Plugin (/Users/hetu/code/Projects/Noted/angular/node_modules/angular2-broccoli-prerender/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
at AppShellPlugin.CachingWriter as constructor
at new AppShellPlugin (/Users/hetu/code/Projects/Noted/angular/node_modules/angular2-broccoli-prerender/dist/prerender.js:15:16)
at Angular2App._buildTree (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/lib/broccoli/angular2-app.js:153:48)
at new Angular2App (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
at module.exports (/Users/hetu/code/Projects/Noted/angular/angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
at new Class (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
at /Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
at lib$rsvp$$internal$$tryCatch (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at /Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (/Users/hetu/code/Projects/Noted/angular/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:420:9)`

[riccardomerolla]

Same 'undefined' problem after tried the @filipesilva workaround

angular-cli: 1.0.0-beta.5
node: 6.2.1
os: linux x64

[HintikkaKimmo]

Here is my experience on this > at office I am using node 4.4.5 and it seems that changing angular2-univeral version to 0.101.5 actually serves the app with --mobile. This however creates build error with `The Broccoli Plugin.

At home I am using 6.x.x version of node. In this case using universal 0.101.5 causes angular just serve undefined in the page

[jeffbcross]

@filipesilva is this issue resolved by https://github.com/angular/angular-cli/commit/740805b2d396a1fa99a5c288cf4640f8c248b6a9?

[filipesilva]

@jeffbcross no, that fix did not work, see https://github.com/angular/angular-cli/issues/958#issuecomment-223602972

[worldspawn]

I had some success going back to 1.0.0-beta.4. ng new still failed with a similar error, however a subsequent npm install seems to have given me a working app despite warnings about unmet peer dependencies. I'm not getting undefined in the index like i was with 1.0.0-beta.5 after making filipesilva's suggestion.

[hetunandu]

@worldspawn this works but then you cannot ng build the project because there is an error

Build failed.
The Broccoli Plugin: [AppShellPlugin] failed with:
Error: Command failed: /bin/sh -c node /Users/hetu/teas/node_modules/angular2-broccoli-prerender/dist/child_proc.js --sourceHtml=/Users/hetu/teas/tmp/app_shell_plugin-input_base_path-riaLdRNK.tmp/0/index.html --optionsPath=/Users/hetu/teas/tmp/app_shell_plugin-input_base_path-riaLdRNK.tmp/0/main-app-shell --outputIndexPath=/Users/hetu/teas/tmp/app_shell_plugin-output_path-5Fkk3dYH.tmp/index.html

[ajayiyer1]

with [email protected] i get the Build failed. The Broccoli Plugin: [AppShellPlugin] failed with:...
with [email protected], my index.html in dist contains just undefined.

[sijintv]

did anyone able to resolve this?

[ghost]

@tvsijin +1 on that, I've been waiting for about a week to hear news of this issue being solved.

I'm under the impression that we can't make --mobile web apps until it is solved. Is this true, or is there some work around that allows us to start building with the --mobile flag boilerplate?

I'm supposed to be building a web app for a friend's business, but I'm stuck between using Angular Mobile or making an Ionic 2 app and just running it in the browser...

I was hoping that this issue would be resolved soon, because I'm already proficient in Angular, and would much rather use Angular Mobile than have to learn Ionic 2 in a short amount of time.

[MauroJr]

I found a workaround for this in stack overflow, and worked well for me.

[ghost]

@MauroJr thanks!

[mackelito]

Tried the solution and at first it seems to work..
But when changing "app.component.html" in any way I get this error:

Build error

The Broccoli Plugin: [AppShellPlugin] failed with:
Error: There can be only one platform. Destroy the previous one to create a new one.
at new BaseException (/Users/markus/projects/baby/client/node_modules/@angular/core/src/facade/exceptions.js:17:23)
at Object.createPlatform (/Users/markus/projects/baby/client/node_modules/@angular/core/src/application_ref.js:36:15)
at Bootloader.platform (/Users/markus/projects/baby/client/node_modules/angular2-universal/dist/node/bootloader.js:48:23)
at new Bootloader (/Users/markus/projects/baby/client/node_modules/angular2-universal/dist/node/bootloader.js:16:33)
at Function.Bootloader.create (/Users/markus/projects/baby/client/node_modules/angular2-universal/dist/node/bootloader.js:23:16)
at AppShellPlugin.build (/Users/markus/projects/baby/client/node_modules/angular2-broccoli-prerender/dist/prerender.js:26:58)
at /Users/markus/projects/baby/client/node_modules/broccoli-caching-writer/index.js:152:21
at lib$rsvp$$internal$$tryCatch (/Users/markus/projects/baby/client/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/markus/projects/baby/client/node_modules/rsvp/dist/rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (/Users/markus/projects/baby/client/node_modules/rsvp/dist/rsvp.js:1019:11)
at lib$rsvp$asap$$flush (/Users/markus/projects/baby/client/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 AppShellPlugin.Plugin (/Users/markus/projects/baby/client/node_modules/broccoli-plugin/index.js:10:31)
at AppShellPlugin.CachingWriter as constructor
at new AppShellPlugin (/Users/markus/projects/baby/client/node_modules/angular2-broccoli-prerender/dist/prerender.js:15:16)
at Angular2App._buildTree (/Users/markus/projects/baby/client/node_modules/angular-cli/lib/broccoli/angular2-app.js:153:48)
at new Angular2App (/Users/markus/projects/baby/client/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
at module.exports (/Users/markus/projects/baby/client/angular-cli-build.js:10:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/ember-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/ember-cli/lib/models/builder.js:89:10)
at new Class (/Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (/Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/ember-cli/lib/tasks/serve.js:15:19)
at /Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/ember-cli/lib/commands/serve.js:64:24
at lib$rsvp$$internal$$tryCatch (/Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at /Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (/Users/markus/projects/baby/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)

[filipesilva]

I also tested this solution right now, and can verify that ng new app-name --mobile and ng serve works.

I found that ng serve -prod produces some console errors, but still seems to work somewhat.

I don't think that this issue is fully solved by the solution in https://github.com/angular/angular-cli/issues/958#issuecomment-227258879, but it is greatly alleviated. I will put up a PR that implements it.

[mackelito]

@filipesilva if you edit "app.component.html" does http://localhost:4200 show the wanted result?

[filipesilva]

@mackelito what change did you make?

[mackelito]

Well.. any kind of change breaks it hehe..
Even changing from
<h1> {{title}} </h1>
to
<h1>{{title}}</h1>

Edit: Just opening and saving the file without changes breaks Broccoli

[filipesilva]

@mackelito I tried changing something simple like the whitespaces or adding some text on app.component.html, and the build still worked (no build errors) - but the browser app is showing the old content. I think's cache busting or the service worker problem.

Changing app.component.ts works though.

This issue won't be closed anyway, the problem is still there, it's just alleviated.

[mackelito]

hmmm.. strange that I don´t get the same problem as you!.. oh well.. I guess I´ll just have to wait :)

[ZloiBubr]

Having same issue on mac + node 6 + last angular-cli. workaround does not work. the only way to use it now without --mobile option.

[MarkPieszak]

@filipesilva I fixed The peerDependencies issue w Universal PR https://github.com/angular/universal/pull/449, but still trying to look into what's causing nothing to render.

[manuelfink]

can confirm the problem

angular-cli: 1.0.0-beta.6
node: 6.0.0
os: darwin x64

updating the angular universal version to latest 0.101.9 makes it npm installable. however running ng serve ends in an ton of errors in console and only show undefined in the browser.

[filipesilva]

Issue made obsolete by #1455. In addition to normal upgrade steps for webpack, I'd like to add that main-app-shell.ts was changed a LOT. Full control of dependencies was also passed onto the generated project so you should be able to update them yourself for whatever is needed.

See https://github.com/angular/angular-cli/blob/master/addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts for an example. The important bit is the getBootloader() and serialize functions, those are all the build system picks up.

I should add a comment there to explain it tbh... Also see https://github.com/angular/universal/pull/464.

Let me know if you're still experiencing problems on the upcoming webpack release.

[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._}