Skip to content

ng new --mobile fails with peerDependencies not satisfied for angular2-universal #958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
duergner opened this issue May 30, 2016 · 34 comments · Fixed by #961
Closed

ng new --mobile fails with peerDependencies not satisfied for angular2-universal #958

duergner opened this issue May 30, 2016 · 34 comments · Fixed by #961
Assignees
Labels
effort2: medium (days) P0 Issue that causes an outage, breakage, or major function to be unusable, with no known workarounds type: bug/fix

Comments

@duergner
Copy link

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 added a commit to filipesilva/angular-cli that referenced this issue May 30, 2016
@filipesilva
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

mackelito commented Jun 3, 2016

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
Copy link

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
Copy link

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

@delight
Copy link

delight commented Jun 3, 2016

@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
Copy link

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

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jun 3, 2016
filipesilva added a commit that referenced this issue Jun 3, 2016
@delight
Copy link

delight commented Jun 3, 2016

@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 filipesilva reopened this Jun 3, 2016
@filipesilva filipesilva self-assigned this Jun 3, 2016
@filipesilva
Copy link
Contributor

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

@amitevski
Copy link

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
Copy link

hetunandu commented Jun 4, 2016

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)`

@filipesilva filipesilva added effort2: medium (days) P0 Issue that causes an outage, breakage, or major function to be unusable, with no known workarounds labels Jun 4, 2016
@riccardomerolla
Copy link

Same 'undefined' problem after tried the @filipesilva workaround

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

@HintikkaKimmo
Copy link

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
Copy link
Contributor

@filipesilva is this issue resolved by 740805b?

@filipesilva
Copy link
Contributor

@jeffbcross no, that fix did not work, see #958 (comment)

devCrossNet pushed a commit to devCrossNet/universal-cli that referenced this issue Jun 9, 2016
devCrossNet pushed a commit to devCrossNet/universal-cli that referenced this issue Jun 9, 2016
@worldspawn
Copy link

worldspawn commented Jun 12, 2016

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
Copy link

@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

@sijintv
Copy link

sijintv commented Jun 18, 2016

did anyone able to resolve this?

@ghost
Copy link

ghost commented Jun 19, 2016

@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
Copy link

MauroJr commented Jun 20, 2016

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

@ghost
Copy link

ghost commented Jun 20, 2016

@MauroJr thanks!

@mackelito
Copy link

mackelito commented Jun 20, 2016

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
Copy link
Contributor

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 #958 (comment), but it is greatly alleviated. I will put up a PR that implements it.

@mackelito
Copy link

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

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jun 20, 2016
@filipesilva
Copy link
Contributor

@mackelito what change did you make?

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jun 20, 2016
@mackelito
Copy link

mackelito commented Jun 20, 2016

Well.. any kind of change breaks it hehe..
Even changing from
`


{{title}}

` to `

{{title}}

`

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

@filipesilva
Copy link
Contributor

@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.

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jun 20, 2016
@mackelito
Copy link

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

@ZloiBubr
Copy link

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
Copy link
Contributor

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

@manuelfink
Copy link

manuelfink commented Jun 23, 2016

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.

emma-mens pushed a commit to emma-mens/angular-cli that referenced this issue Jul 1, 2016
emma-mens pushed a commit to emma-mens/angular-cli that referenced this issue Jul 1, 2016
@filipesilva
Copy link
Contributor

filipesilva commented Jul 27, 2016

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 angular/universal#464.

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

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
effort2: medium (days) P0 Issue that causes an outage, breakage, or major function to be unusable, with no known workarounds type: bug/fix
Projects
None yet
Development

Successfully merging a pull request may close this issue.