Error: Failed to transpile TypeScript Error: Failed to transpile TypeScript - node.js

I have an application that uses ionic and angular. For deploying the same application as a mobile app, I tried ionic cordova build android, which gave me an error. bash: ionic: command not found
So, without realizing what disaster it could cause I installed it using the command.
npm install -g #ionic/cli.
Then I again run the command ionic cordova build android.
But due to the version of node being 8.12.0 installed in my machine, it gave me an error and I couldn't run that command.
and I reinstall the node, and tried again.
And now coming back to the application, I tried to build that to production, since then it is always giving me an error saying
Cannot find type definition file for '#types'.
I removed the ionic CLI, uninstall node js, and uninstall npm. Uninstall everything related to node. But the problem has not been gone yet.
I also deleted node_modules and package-lock json and npm cache clean --force, npm install.
But it did not work.
As the error says Cannot find type definition file for '#types', I also added the types in tsconfig.json,
"types": [],
into
"compilerOptions"
Though the error goes away while npm run build --prod --verbose, but the application doesn't run further, it gave a lot of error in the console and the application just stopped.
package.json
{
"name": "ClientApp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "node --max-old-space-size=8192 ./node_modules/#ionic/app-scripts/bin/ionic-app-scripts.js build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/animations": "5.2.9",
"#angular/common": "5.2.9",
"#angular/compiler": "5.2.9",
"#angular/compiler-cli": "5.2.9",
"#angular/core": "5.2.9",
"#angular/forms": "5.2.9",
"#angular/http": "5.2.9",
"#angular/platform-browser": "5.2.9",
"#angular/platform-browser-dynamic": "5.2.9",
"#ionic-native/core": "4.6.0",
"#ionic-native/splash-screen": "4.6.0",
"#ionic-native/status-bar": "4.6.0",
"#ionic/pro": "1.0.20",
"#ionic/storage": "2.1.3",
"alertify.js": "^1.0.12",
"angular-tree-component": "^7.1.0",
"angular2-cookie": "^1.2.6",
"angular2-indexeddb": "^1.2.2",
"blueimp-canvas-to-blob": "^3.20.0",
"bootstrap": "^4.1.0",
"chart.js": "^2.9.3",
"cordova-android": "7.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"dragula": "^3.7.2",
"idlejs": "^2.1.0",
"ionic-angular": "3.9.2",
"ionic3-star-rating": "^2.1.2",
"ionicons": "3.0.0",
"jquery": "^3.3.1",
"microsoft-applicationinsights-angular5": "^0.1.6",
"ng2-ckeditor": "^1.2.0",
"ng2-dragula": "^2.1.1",
"ng2-google-charts": "^6.0.0",
"ng2-img-max": "^2.2.4",
"ng2-order-pipe": "^0.1.5",
"ng2-pagination": "^2.0.2",
"ng4-validators": "^6.0.0",
"ngx-autosize": "^1.8.0",
"ngx-color-picker": "^7.0.2",
"ngx-order-pipe": "^2.0.4",
"ngx-pinch-zoom": "^2.4.4",
"ngx-skeleton-loader": "^1.2.7",
"node-sass": "^4.14.1",
"popper.js": "^1.14.3",
"rxjs": "5.5.8",
"sw-toolbox": "3.6.0",
"xlsx": "^0.17.0",
"zone.js": "0.8.20"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.4",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
},
"config": {
"ionic_www_dir": "../",
"ionic_build_dir": "../build"
}
}
what should I do to build this application, which was built before but now had stopped?

Related

Cant run react-native app in iOS but, i upgrade my xcode to 12

When I run my app in the terminal I get this error:
error Failed to build iOS project. We ran "xcodebuild" command but it
exited with error code 65. To debug build logs further, consider
building your app with Xcode.app, by opening app.xcworkspace.
But when I try to run the app.xcworkspace I get another error:
ld: warning: directory not found for option
'-L-L/Users/josecuetosimancas/Library/Developer/Xcode/DerivedData/app-arkyvclpjmalkpagzxpefttuuars/Build/Products/Debug-iphonesimulator/BoringSSL-GRPC'
ld: library not found for -lBoringSSL-GRPC clang: error: linker
command failed with exit code 1 (use -v to see invocation)
this is my PODFILE:
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/#react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target 'app' do
config = use_native_modules!
use_react_native!(:path => config["reactNativePath"])
target 'appTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable these next few lines.
use_flipper!
post_install do |installer|
flipper_post_install(installer)
end
end
target 'app-tvOS' do
# Pods for app-tvOS
target 'app-tvOSTests' do
inherit! :search_paths
# Pods for testing
end
end
and my package.json
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"ios": "react-native run-ios --simulator=\"iPhone 11 Pro Max\"",
"android": "react-native run-android",
"android:apk": "cd ./android && ./gradlew assembleRelease",
"android:aab": "cd ./android && ./gradlew bundleRelease",
"android:clean": "cd ./android && ./gradlew clean"
},
"dependencies": {
"#gorhom/bottom-sheet": "2.0.0",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/checkbox": "^0.5.6",
"#react-native-community/datetimepicker": "^3.0.8",
"#react-native-community/netinfo": "^5.9.9",
"#react-native-community/picker": "^1.8.1",
"#react-native-community/viewpager": "^4.2.1",
"#react-native-firebase/app": "^9.0.0",
"#react-native-firebase/auth": "^9.3.5",
"#react-native-firebase/firestore": "^7.10.3",
"accounting": "^0.4.1",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"react": "16.13.1",
"react-native": "0.63.3",
"react-native-dots-pagination": "^0.1.11",
"react-native-gesture-handler": "^1.9.0",
"react-native-navigation": "^7.3.0",
"react-native-navigation-hooks": "^6.2.0",
"react-native-progress-steps": "^1.3.4",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-safe-area-view": "^1.1.1",
"react-native-stars": "^1.2.2",
"react-native-svg": "^12.1.0",
"react-native-user-avatar": "^1.0.7",
"react-native-vector-icons": "^7.1.0"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#react-native-community/eslint-config": "^1.1.0",
"#types/accounting": "^0.4.1",
"#types/jest": "^25.2.3",
"#types/lodash": "^4.14.165",
"#types/moment": "^2.13.0",
"#types/react-native": "^0.63.2",
"#types/react-native-vector-icons": "^6.4.6",
"#types/react-test-renderer": "^16.9.2",
"#typescript-eslint/eslint-plugin": "^2.27.0",
"#typescript-eslint/parser": "^2.27.0",
"babel-jest": "^25.1.0",
"babel-plugin-import": "^1.13.1",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^6.5.1",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.13.1",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}

Run Out of Memory Using Node Build 'ng build' - Angular App

I am trying to build my angular application using 'ng build'. It is failing because it is running out of memory to build as I surmise from my research. I have tried several of the solutions out there with no luck. After typing 'ng build' either from VSC terminal or on DOS line, it runs for about 3 minutes during this step:
Generating ES5 bundles for differential loading...
then it fails with this error written to my angular-errors.log file:
[error] Error: Call retries were exceeded
at ChildProcessWorker.initialize (c:\development\gems\Frontend_Serenity_A9_SLIM\Frontend_Serenity_A9\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
at ChildProcessWorker.onExit (c:\development\gems\Frontend_Serenity_A9_SLIM\Frontend_Serenity_A9\node_modules\jest-worker\build\workers\ChildProcessWorker.js:263:12)
at ChildProcess.emit (events.js:203:13)
at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
I have tried increasing my memory as some articles/stack overflows have indicated. I tried this:
npm install -g increase-memory-limit
and then ran this command at the root of my angular project:
increase-memory-limit
to no avail. Using es5 rather than es2015 is not a solution for our app. Any help or ideas you can offer are GREATLY appreciated. I have been trying everything for a week now and am still stuck. Thanks!
package.json contents:
{
"name": "serenity",
"version": "9.0.0",
"license": "PrimeNG Commercial",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "9.0.4",
"#angular/cdk": "9.1.0",
"#angular/common": "9.0.4",
"#angular/compiler": "9.0.4",
"#angular/core": "9.0.4",
"#angular/forms": "9.0.4",
"#angular/material": "^9.1.0",
"#angular/platform-browser": "9.0.4",
"#angular/platform-browser-dynamic": "9.0.4",
"#angular/router": "9.0.4",
"#aspnet/signalr": "^1.1.4",
"#fullcalendar/core": "4.0.2",
"#fullcalendar/daygrid": "4.0.1",
"#fullcalendar/interaction": "4.0.2",
"#fullcalendar/timegrid": "4.0.1",
"#handsontable/angular": "^5.1.1",
"#mdi/svg": "^5.3.45",
"#types/leaflet-draw": "^1.0.2",
"#types/plotly.js": "^1.50.12",
"chart.js": "2.7.3",
"d3": "^5.16.0",
"font-awesome": "4.7.0",
"handsontable": "^7.4.2",
"intl": "1.2.5",
"leaflet": "^1.6.0",
"leaflet-draw": "^1.0.4",
"leaflet-sidebar-v2": "^3.2.2",
"leaflet.control.layers.tree": "^1.0.0",
"leaflet.glify": "^3.0.0",
"material-design-icons": "^3.0.1",
"plotly.js-dist": "^1.54.1",
"primeflex": "1.0.0",
"primeng": "9.0.1",
"prismjs": "1.15.0",
"quill": "1.1.8",
"rxjs": "6.5.4",
"three": "^0.117.1",
"web-animations-js": "github:angular/web-animations-js#release_pr208",
"xlsx": "^0.16.2",
"zone.js": "0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.900.4",
"#angular/cli": "9.0.4",
"#angular/compiler-cli": "9.0.4",
"#angular/language-service": "9.0.4",
"#types/jasmine": "3.5.7",
"#types/jasminewd2": "2.0.8",
"#types/leaflet": "^1.5.17",
"#types/node": "12.12.29",
"codelyzer": "5.2.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.3.0",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.5.2",
"protractor": "5.4.3",
"ts-node": "8.3.0",
"tslint": "5.18.0",
"typescript": "3.7.5"
}
}
Note sure if this will help in your case, but have you tried increasing the maximumError in the budgets section under configurations in the angular.json file?
Yes, it was a memory issue and I was having a hard time getting node to change the memory limit before it built my project. I was able to get it to allocate 3 gigs and then it worked fine.

ionic env becomes unstable after updating nodejs

My ionic environment becomes unstable after updation nodejs from v8.1 to v12..
Any idea what all i have to update?
[abc]$ ionic cordova emulate android
ng run app:ionic-cordova-build --platform=android
An unhandled exception occurred: Cannot find module '#angular/compiler-cli/src/tooling'
Require stack:
-
- /home/user/workspace1/node_modules/#ngtools/webpack/src/index.js
- /home/user/workspace1/node_modules/#angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js
- /home/user/workspace1/node_modules/#angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/index.js
- /home/user/workspace1/node_modules/#angular-devkit/build-angular/src/browser/index.js
- /home/user/workspace1/node_modules/#angular/cli/node_modules/#angular-devkit/architect/node/node-modules-architect-host.js
- /home/user/workspace1/node_modules/#angular/cli/node_modules/#angular-devkit/architect/node/index.js
- /home/user/workspace1/node_modules/#angular/cli/models/architect-command.js
- /home/user/workspace1/node_modules/#angular/cli/commands/run-impl.js
- /home/user/workspace1/node_modules/#angular/cli/node_modules/#angular-devkit/schematics/tools/export-ref.js
- /home/user/workspace1/node_modules/#angular/cli/node_modules/#angular-devkit/schematics/tools/index.js
- /home/user/workspace1/node_modules/#angular/cli/utilities/json-schema.js
- /home/user/workspace1/node_modules/#angular/cli/models/command-runner.js
- /home/user/workspace1/node_modules/#angular/cli/lib/cli/index.js
- /home/user/workspace1/node_modules/#angular/cli/lib/init.js
- /home/user/workspace1/node_modules/#angular/cli/bin/ng
See "/tmp/ng-wzIyd3/angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.
ng run app:ionic-cordova-build --platform=android exited with exit code 127.
Here is package.json
{
"name": "test",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "^8.1.0",
"#angular/core": "^8.1.0",
"#angular/forms": "^8.1.0",
"#angular/http": "^7.2.16",
"#angular/platform-browser": "^8.1.0",
"#angular/platform-browser-dynamic": "^8.1.0",
"#angular/router": "^8.1.0",
"#ionic-native/android-permissions": "^5.27.0",
"#ionic-native/camera": "^5.27.0",
"#ionic-native/core": "^5.26.0",
"#ionic-native/splash-screen": "^5.26.0",
"#ionic-native/status-bar": "^5.26.0",
"#ionic-native/uid": "^5.26.0",
"#ionic-native/unique-device-id": "^5.26.0",
"#ionic/angular": "^5.2.3",
"#ionic/angular-toolkit": "^2.2.0",
"#ionic/pro": "2.0.4",
"cordova-android": "^8.1.0",
"cordova-hot-code-push-plugin": "1.5.3",
"cordova-plugin-android-permissions": "1.0.2",
"cordova-plugin-camera": "4.1.0",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-file": "6.0.2",
"cordova-plugin-filepath": "1.5.8",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^3.1.2",
"cordova-plugin-splashscreen": "^5.0.4",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-unique-device-id2": "2.0.0",
"cordova-plugin-uniquedeviceid": "1.3.2",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-sqlite-storage": "5.0.0",
"core-js": "^2.6.11",
"rxjs": "~6.3.3",
"zone.js": "~0.8.29"
},
"devDependencies": {
"#angular-devkit/architect": "^0.1000.3",
"#angular-devkit/build-angular": "^0.1000.3",
"#angular-devkit/core": "^10.0.3",
"#angular-devkit/schematics": "^10.0.3",
"#angular/cli": "^8.3.28",
"#angular/compiler": "^7.2.16",
"#angular/compiler-cli": "^7.2.16",
"#angular/language-service": "^7.2.16",
"#ionic/app-scripts": "^3.2.4",
"#types/jasmine": "^2.8.17",
"#types/jasminewd2": "^2.0.8",
"#types/node": "^10.12.30",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.4",
"ts-node": "^8.0.3",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-hot-code-push-plugin": {},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-file": {},
"cordova-sqlite-storage": {},
"cordova-plugin-filepath": {},
"cordova-plugin-android-permissions": {}
},
"platforms": []
}
}
Try this:
Update Ionic to the latest version: npm install -g ionic#latest
Remove node_modules folder, then npm install to put it back all the dependencies with the new Ionic version reflected with the updated node version.
#dev.doc ...Highly appreciate your response...
There is change in error,I hope it past the error
npm install #angular/compiler-cli#latest
npm install #angular/cli#latest
which brings to different error now..
> ng run app:ionic-cordova-build --platform=android
An unhandled exception occurred: Object prototype may only be an Object or null: undefined
See "/tmp/ng-ZAbd9i/angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.
ng run app:ionic-cordova-build --platform=android exited with exit code 127.
Re-running this command with the --verbose flag may provide more information.
...details--------
[error] TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf (<anonymous>)
at Object.__extends (../workspace/node_modules/#angular/compiler-cli/node_modules/tslib/tslib.js:68:9)
at ..ion/mygrd/node_modules/#angular/compiler-cli/src/ngtsc/indexer/src/template.js:118:17
at ..ion/mygrd/node_modules/#angular/compiler-
My updated package.json reflects the version..it know its slightly higher that your version..
"#angular/cli": "^10.0.3",
"#angular/compiler-cli": "^10.0.4"

NPM install results in 404 when installing angular deps

I have the latest node.js 8.x and npm 5.6.0 installed. When trying to do a npm install, I constantly get the following error:
npm ERR! code E404
npm ERR! 404 Not Found: #angular/router#5.2.0
The module that fails is different every time I retry the installation, but most typically it's #angular/forms#5.2.0, #angular/animations#5.2.0 and #angular/platform-browser#5.2.0
I do have a working internet connection
I have run npm config set registry https://registry.npmjs.org/.
I deleted the node_modules folder
I have deleted the cache: npm cache clean --force
An npm search does find the module:
C:\windows\system32>npm search #angular/router
NAME | DESCRIPTION | AUTHOR | DATE | VERSION | KEYWORDS
#angular/router | Angular -
the… | =angular | 2018-04-16 | 5.2.10 | angular router
What else can be wrong?
Here is the package.json for completeness:
{
"name": "App",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --env=scapp",
"build-local": "ng build --env=dev",
"build-nonevis": "ng build --env=nonevis",
"test": "ng test",
"lint": "ng lint",
"lint-fix": "ng lint --fix",
"e2e": "ng e2e"
},
"dependencies": {
"#angular/animations": "5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "5.2.0",
"#angular/http": "5.2.0",
"#angular/platform-browser": "5.2.0",
"#angular/platform-browser-dynamic": "5.2.0",
"#angular/router": "5.2.0",
"#ngx-translate/core": "9.1.1",
"#ngx-translate/http-loader": "2.0.1",
"#types/arcgis-js-api": "^4.4.0",
"#types/node": "9.4.0",
"angular2-esri-loader": "^1.0.0",
"cerialize": "^0.1.18",
"chart.js": "2.7.1",
"core-js": "^2.5.1",
"esri-loader": "^1.1.0",
"fullcalendar": "3.7.0",
"intl": "^1.2.5",
"jquery": "3.2.1",
"moment": "2.18.1",
"nanoscroller": "0.8.7",
"ngx-perfect-scrollbar": "5.3.4",
"primeng": "5.2.0",
"quill": "1.1.8",
"rxjs": "5.5.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"#angular/cli": "^1.6.5",
"#angular/compiler-cli": "^5.2.0",
"#types/jasmine": "2.5.53",
"#types/jasminewd2": "2.0.2",
"#types/node": "6.0.60",
"codelyzer": "4.0.1",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.1",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-coverage-istanbul-reporter": "1.3.0",
"protractor": "5.1.2",
"ts-node": "3.2.0",
"tslint": "5.7.0",
"typescript": "2.4.2"
}
}
The problem was caused by a local file .npmrc which contained the line always-auth = true. Removing this line resolved the issue. I have no idea how a 404 error is related to authentication, but noticed that after I switched to a mirror registry, it suddenly reported E401 instead of E404 like the official registry.
In my case, such issue was resolved by adding #latest to the command.
npm install -g #angular/cli#latest

UNMET PEER DEPENDENCY D3.js and Angular 2

I have an existing Angular 2 project, and I'm trying to get started integrating some D3.js into my project. I'm new to Angular, and this will be my first go at using D3. I'll be following this tutorial: https://keathmilligan.net/create-reusable-chart-components-with-angular-2-and-d3-js-version-4/
I'm running the command npm install --save d3, and I get:
├── UNMET PEER DEPENDENCY #angular/compiler#2.2.3
├── UNMET PEER DEPENDENCY #angular/compiler-cli#2.2.3
├── UNMET PEER DEPENDENCY #angular/core#2.2.3
└── d3#4.4.1
...then
npm WARN #ngtools/webpack#1.2.1 requires a peer of #angular/compiler#^2.3.1 but none was installed.
npm WARN #ngtools/webpack#1.2.1 requires a peer of #angular/compiler-cli#^2.3.1 but none was installed.
npm WARN #ngtools/webpack#1.2.1 requires a peer of #angular/core#^2.3.1 but none was installed.
npm WARN #ngtools/webpack#1.2.1 requires a peer of #angular/tsc-wrapped#^0.5.0 but none was installed.
npm WARN tslint-loader#2.1.5 requires a peer of tslint#^3.0.0 but none was installed.
For one, I guess I'm still not exactly clear on what it really means when I see "UNMET PEER DEPENDENCY". Is this just a warning, or is this indicating that something is really broken? My project works currently (but I haven't started coding with D3)... Is it merely that the wrong version of something is installed? I've taken the steps of updating everything via npm update --save, and NPM did find some updates for me, but I still have the same issue.
My main question though, I'm installing D3js, shouldn't that be completely independent of Angular? Why is NPM barking about Angular stuff when I am installing something unrelated?
Here is my package.json post update:
"name": "cl-test2",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.2.3",
"#angular/compiler": "2.2.3",
"#angular/core": "^2.2.3",
"#angular/forms": "2.2.3",
"#angular/http": "2.2.3",
"#angular/platform-browser": "2.2.3",
"#angular/platform-browser-dynamic": "2.2.3",
"#angular/router": "3.2.3",
"#types/node": "^6.0.58",
"angular-cli": "^1.0.0-beta.22-1",
"core-js": "^2.4.1",
"d3": "^4.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"tslint": "^4.3.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"#angular/compiler-cli": "2.2.3",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"angular-cli": "^1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
}
UNMET PEER DEPENDENCY logs are just warnings not errors.
They warn you that the lib that you are using, #ngtools/webpack#1.2.1, should be using #angular/compiler#^2.3.1 (more info on ^ https://stackoverflow.com/a/22345808/5706293) as I'm sure you figured out yourself.
The author of those libs may have some deprecated APIs and may not support the current code in the later versions, that's one of the reasons that you should upgrade your dependencies.
This doesn't answer all of the questions I had, but it does clear up the warnings I was getting. I just updated several packages to the latest versions.
{
"name": "cl-test2",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.4.2",
"#angular/compiler": "^2.4.2",
"#angular/core": "^2.4.2",
"#angular/forms": "^2.4.2",
"#angular/http": "^2.4.2",
"#angular/platform-browser": "^2.4.2",
"#angular/platform-browser-dynamic": "^2.4.2",
"#angular/router": "^3.4.2",
"core-js": "^2.4.1",
"d3": "^4.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.2",
"types.d3": "^0.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/compiler-cli": "2.4.2",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"angular-cli": "^1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.1.4",
"webdriver-manager": "10.2.5"
}
}
I had also similar issue, I have followed the steps
First, npm install -g #angular/cli
create new project with ng new hero-app
After the go inside the project folder and run server ng serve
and open browser and run http://localhost:4200
This is work for me.. Hope same thing work for you as well

Resources