With a recent update to angular js, cordova, and ionic 2 I cannot install the unmet peer dependencies. Every time I try, they don’t save. Here are my dependencies:
├── UNMET PEER DEPENDENCY @angular/common@2.3.0
├── UNMET PEER DEPENDENCY @angular/compiler-cli@*
├── UNMET PEER DEPENDENCY @angular/core@2.3.0
├── UNMET PEER DEPENDENCY @angular/forms@2.2.1
├── UNMET PEER DEPENDENCY @angular/http@2.2.1
├── UNMET PEER DEPENDENCY @angular/platform-browser@2.2.1
├── UNMET PEER DEPENDENCY @angular/platform-browser-dynamic@2.2.1
├── UNMET PEER DEPENDENCY @angular/platform-server@2.2.1
├── UNMET PEER DEPENDENCY @angular/tsc-wrapped@*
├── UNMET PEER DEPENDENCY rxjs@5.0.0-beta.12
└── UNMET PEER DEPENDENCY zone.js@0.7.2 extraneous
npm WARN @angular/compiler@2.2.1 requires a peer of @angular/core@2.2.1 but none was installed.
npm WARN @ionic/app-scripts@0.0.47 requires a peer of @angular/compiler-cli@* but none was installed.
npm WARN @ionic/app-scripts@0.0.47 requires a peer of @angular/tsc-wrapped@* but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of @angular/common@2.2.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of @angular/compiler-cli@2.2.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of @angular/core@2.2.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of @angular/forms@2.2.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of @angular/http@2.2.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of @angular/platform-browser@2.2.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of @angular/platform-browser-dynamic@2.2.1 but none was instal
led.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of @angular/platform-server@2.2.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3-201612122136 requires a peer of zone.js@~0.6.26 but none was installed.
I tried installing each of the packages by themselves but they all seem to depend on each other and the @angular/common@2.3.0 will not install.
Could you show us you package.json content?
UNMET PEER DEPENDENCY is displayed, if I understand correctly, when a required library version as to be installed but specified with an older version in the package.json.
Like installing Ionic X which require Angular Z but where Angular Y is specified in package.json
Here is my package.json file. Ther version I added for node js and for the ios platform I did manually since they weren’t auto generating.
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"version": "1.0.0",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "^2.3.0",
"@angular/core": "^2.3.0",
"@ionic/storage": "^1.0.3",
"ionic-angular": "^2.0.0-rc.3",
"ionic-native": "^2.0.3",
"ionicons": "^3.0.0"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "^2.0.3"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "1.0.0",
"locator": "ios"
}
],
"description": "swe2: An Ionic project"
}
I have the feeling that you try to use a too recent version of angular and that you are missing some package. Try these:
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/platform-server": "2.1.1",
"ionic-angular": "^2.0.0-rc.3",
"rxjs": "5.0.0-beta.12",
"ionic-native": "2.2.3",
"ionicons": "3.0.0"
I replaced in package.json file those depedencies and ran npm install but whenever I am running ionic serve I am still getting an 404 not found error for build/main.css and main.js
Did you deleted node_modules (rm -r node_modules) first and then run “npm install” again?
I just did that which installed all the modules again correctly. I installed the zone js unmet dependency, but I am still getting those 404 errors on ionic serve.
Could you parse your package.json again and also the updated error stacktrace?
Sorry to hear it is still not solved…
Here is my package.json file
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"version": "1.0.0",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/platform-server": "2.1.1",
"ionic-angular": "^2.0.0-rc.3",
"rxjs": "5.0.0-beta.12",
"ionic-native": "2.2.3",
"ionicons": "3.0.0"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "^2.0.3"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "1.0.0",
"locator": "ios"
}
],
"description": "swe2: An Ionic project"
}
and here is my stacktrace via the browser
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8100/build/main.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8100/build/main.js
I’ve found one missing lib…I forgot zone.js, my bad, sorry
"zone.js": "0.6.26"
Could you try to add it, npm install? if still doesn’t work, could you copy here the console output of the ionic serve cmd?
I added that, removed the node modules, reinstalled them using npm and it still didn’t work.
Here is the console of the ionic serve:
bash-3.2$ ionic serve
Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*, !www/**/*.map
√ Running dev server: http://localhost:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit
ionic $
Wait…it’s me or you still use Ionic 1 ? Did you install Ionic 2 first ? Or have you a special configuration ?
Ionic (2) serve look like:
$ ionic serve
> ionic-hello-world@ ionic:serve /Users/me/Documents/projects/test/testLoadPush
> ionic-app-scripts serve
[18:28:56] ionic-app-scripts 0.0.45
[18:28:57] watch started ...
[18:28:57] build dev started ...
etc
I am using ionic 2 but you are right, my version does not look correct. It says I have ionic version 2.1.0 when I run ionic -v
according last blog entry, ionic -v should at least return 2.1.12 …
what does “ionic info” print out ?
maybe you should try to reinstall ionic 2
from http://blog.ionic.io/rc3-error-reporting-final-oh-my/
$ npm install -g ionic
$ ionic -v
# should return at least 2.1.12
Ok. yeah I just uninstalled ionic and cordova and then reinstalled them. When I run ionic serve in visual studio code with my project folder opened up in it it appears to show the old console, but now when I run ionic serve from a random terminal window it tells me that main.dev.ts has been deprecated and I need to replace it with main.ts
Now it is telling me to do the following but the url is not working, it says it can not be found:
Error: "main.dev.ts" and "main.prod.ts" have been deprecated. Please create a new file "main.ts" containing
the content of "main.dev.ts", and then delete the deprecated files. For more information, please see the
default Ionic project main.ts file here:
https://github.com/driftyco/ionic2-app-base/tree/master/src/app/main.ts
Good, that some cleared 
Maybe the first thing to do is maybe to create a brand new project from scratch using a random terminal?
If no, then in a random terminal, delete node_modules and doing npm install again
Okay I can try some of that. I really don’t want to create a new project. It seems like I have to do this literally everytime there is an ionic/angular update. It can be very time consuming and frustrating. Can you supply me with the latest main.ts file template? That url they give does not work.
1 Like
main.dev.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
main.prod.ts
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
No, did you see my above post. It says those files are deprecated and that I need a new main.ts file.