npm install showing up to date instead of installing the packages - node.js

I am having some trouble with npm install.
npm install package-name is working perfectly, but when I add a new dependency in the package.json file manually (by pulling via git) and then try to npm install only, it returns
up to date in 4.2 sec
And doesn't install the package.
FYI: I am using git to pull the package.json file. So there is no any issue in the package name. It just doesn't work when i pull and try to install it with npm install only.
My package.json is:
{
"name": "ap",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/platform-server": "^4.1.3",
"#angular/router": "^4.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
"#ngx-translate/core": "^6.0.1",
"#ngx-translate/http-loader": "0.0.3",
"#types/underscore": "^1.8.0",
"angular-datatables": "^4.1.0",
"angular2-busy": "^2.0.4",
"angular2-jwt": "^0.2.3",
"angular2-toaster": "^4.0.0",
"chart.js": "^2.6.0",
"core-js": "^2.4.1",
"datatables.net": "^1.10.15",
"datatables.net-dt": "^1.10.15",
"jquery": "^3.2.1",
"ng2-charts": "^1.5.0",
"ng2-simple-timer": "^1.3.1",
"rxjs": "^5.1.0",
"underscore": "^1.8.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/animations": "^4.1.3",
"#angular/cli": "1.0.4",
"#angular/compiler-cli": "^4.0.0",
"#types/datatables.net": "^1.10.1",
"#types/jasmine": "2.5.38",
"#types/jquery": "^2.0.45",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}

As #j7an said, the problem must depend on the environment. I had the same problem and I didn't know how my NODE_ENV was set to production. Anyway, I did this: (as explained in this answer )
Remove package-lock.json
Remove node_modules
After that:
npm install
npm install --only=dev
This must solve the problem.

I experienced this issue when I ran export NODE_ENV=production based on the book "Modern JavaScript". After deleting node_modules, package.json, and also clearing npm cache didn't fix the issue, I found the answer from this stackoverflow entry: npm install won't install devDependencies
To fix the issue, I ran export NODE_ENV= which removed the production flag. Once I did that I was able to install dev dependencies again. Hope this helps.

Related

Module '"../../../../#types/parse5"' has no exported member 'DefaultTreeElement'

When attempting to build an angular app, this error comes up:
node_modules/#angular/cdk/schematics/utils/html-manipulation.d.ts:9:10 - error TS2305: Module '"../../../../#types/parse5"' has no exported member 'DefaultTreeElement'.
Angular 11.2.14
Angular CLI: 11.2.13
Node: 14.17.0
I'm working with 4 more people using the same app and nobody is having this problem.
I've tried the following solutions that didn't work:
Delete the entire app and clone it back in from git.
Clear the node_modules and install it all over again.
Updated Node.js (to the current one)
Updated npm (to the current one)
Updated Angular CLI (to the current one)
Installed #types/parse5 (using npm install #types/parse5)
In between every of these I did a npm cache clean -f
This is how the package.json is right now:
{
"name": "rferp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"#angular-devkit/build-angular": "^0.1102.5",
"#angular-devkit/core": "^11.2.5",
"#angular/animations": "^11.2.6",
"#angular/cdk": "^11.2.13",
"#angular/common": "^11.2.14",
"#angular/compiler": "^11.2.14",
"#angular/core": "^11.2.14",
"#angular/flex-layout": "^11.0.0-beta.33",
"#angular/forms": "^11.2.14",
"#angular/platform-browser": "^11.2.14",
"#angular/platform-browser-dynamic": "^11.2.14",
"#angular/router": "^11.2.14",
"#fullcalendar/core": "^5.4.0",
"#fullcalendar/daygrid": "^5.4.0",
"#fullcalendar/interaction": "^5.4.0",
"#fullcalendar/rrule": "^5.4.0",
"#fullcalendar/timegrid": "^5.4.0",
"#ngrx/component-store": "^11.0.1",
"#ngrx/effects": "^11.0.1",
"#ngrx/entity": "^11.0.1",
"#ngrx/router-store": "^11.0.1",
"#ngrx/store": "^11.0.1",
"#ngrx/store-devtools": "^11.0.1",
"#types/bingmaps": "0.0.0",
"#types/node": "^13.13.33",
"#types/parse5": "^6.0.0",
"azure-maps-control": "^2.0.32",
"azure-maps-drawing-tools": "^0.1.6",
"chart.js": "^2.9.4",
"clone": "^2.1.2",
"core-js": "^3.8.0",
"exceljs": "^4.2.0",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"moment": "^2.29.1",
"ng-azure-maps": "^4.0.0",
"parse5": "^6.0.1",
"prettier": "^2.2.0",
"primeicons": "^4.1.0",
"primeng": "^11.4.2",
"quill": "^1.3.7",
"rrule": "^2.6.6",
"rxjs": "~6.6.6",
"ts-node": "^8.10.2",
"tslib": "^2.0.0",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular/cli": "^11.2.5",
"#angular/compiler-cli": "^11.2.6",
"#angular/language-service": "^11.2.6",
"#fortawesome/fontawesome-pro": "^5.15.1",
"#types/jasmine": "^3.6.2",
"#types/jasminewd2": "^2.0.6",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.3",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng-packagr": "^11.0.3",
"protractor": "~7.0.0",
"resize-observer-polyfill": "^1.5.1",
"typescript": "4.0.2"
}
}
I had the same problem, suddenly a few days ago.
Also using Angular 11.
Somehow the parse5 package was updated to version 6.0.1, I think, because reverting back to 5.0.0 fixed it.

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.

error TS2305: Module "/node_modules/rxjs/Rx" has no exported member 'Subscribable'

I have a project that is built in angular 5. here is the package.json
{
"name": "ff-client",
"version": "0.2.0",
"license": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint --type-check",
"e2e": "ng e2e",
"xprecommit": "ng lint --type-check && ng test --single-run --code-coverage",
"xprepush": "ng build --prod",
"i18n": "ng xi18n --i18n-format xlf --output-path src/locale --locale en --progress",
"i18n-merge": "xliffmerge --profile xliffmerge.json",
"browserstack": "ng e2e --no-serve --config protractor.browserstack.conf.js",
"upgrade": "yarn upgrade-interactive --latest",
"build-en": "ng build --prod --e deploy --output-path=dist/en --i18nFile=src/locale/messages.en.xlf --i18nFormat=xlf --locale=en --base-href /en/",
"build-da": "ng build --prod --e deploy --output-path=dist/da --i18nFile=src/locale/messages.da.xlf --i18nFormat=xlf --locale=da --base-href /da/",
"build-fo": "ng build --prod --e deploy --output-path=dist/fo --i18nFile=src/locale/messages.fo.xlf --i18nFormat=xlf --locale=fo --base-href /fo/",
"build-root": "copy dist\\en\\web.config dist\\ && del dist\\en\\web.config && del dist\\da\\web.config && del dist\\fo\\web.config",
"build-prod": "npm run build-en && npm run build-da && npm run build-fo && npm run build-root"
},
"private": true,
"dependencies": {
"#angular/animations": "5.2.9",
"#angular/cdk": "^5.2.4",
"#angular/common": "5.2.9",
"#angular/compiler": "5.2.9",
"#angular/core": "5.2.9",
"#angular/flex-layout": "^5.0.0-beta.14",
"#angular/forms": "5.2.9",
"#angular/http": "5.2.9",
"#angular/material": "^5.2.4",
"#angular/platform-browser": "5.2.9",
"#angular/platform-browser-dynamic": "5.2.9",
"#angular/router": "5.2.9",
"#angular/service-worker": "5.2.9",
"#aspnet/signalr": "^1.0.0-rc1-update1",
"#auth0/angular-jwt": "^1.0.0-beta.9",
"#ngrx/effects": "^5.1.0",
"#ngrx/router-store": "^5.0.1",
"#ngrx/store": "^5.1.0",
"#ngrx/store-devtools": "^5.1.0",
"angular-in-memory-web-api": "^0.5.2",
"applicationinsights-js": "^1.0.15",
"core-js": "^2.5.3",
"hammerjs": "^2.0.8",
"moment": "^2.20.1",
"ng-recaptcha": "^3.0.3",
"ng2-file-upload": "^1.3.0",
"ngrx-store-logger": "^0.2.0",
"ngx-perfect-scrollbar": "^5.3.5",
"redux-beacon": "^1.2.1",
"rxjs": "^5.5.8",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "1.7.4",
"#angular/compiler-cli": "5.2.9",
"#angular/language-service": "5.2.9",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~9.4.6",
"chai": "^4.1.2",
"codelyzer": "~4.1.0",
"cucumber": "^4.0.0",
"husky": "^0.14.3",
"jasmine-core": "~2.99.1",
"jasmine-marbles": "^0.2.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-teamcity-reporter": "^1.0.1",
"ngx-i18nsupport": "^0.12.0",
"protractor": "^5.3.0",
"protractor-cucumber-framework": "^4.2.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.6.2"
}
}
I have download npm and angular-cli.
after installing these, I did npm install to get the required modules. but when I do "ng serve" it shows an error.
ERROR in
node_modules/#angular/flex-layout/core/typings/observable-media/observa
ble-media.d.ts(1,22): error TS2305: Module
'"D:/Projects/FlexFunding/app-dk/Clie
nt/node_modules/rxjs/Rx"' has no exported member 'Subscribable'.
I know now it is angular 6 and rxjs has updated in this version. but how can I solve this issue without migrating this project from angular version 5 to 6. I just need to build and run the project.
i have tried replace rxjs folder under node modules from a running a project. but no luck.
Edit: I have uninstall current version and downgraded to version angular cli version 1.7.4 but the error is same.
ERROR in
node_modules/#angular/flex-layout/core/typings/observable-media/observa
ble-media.d.ts(1,22): error TS2305: Module
'"D:/Projects/FlexFunding/app-dk/Clie nt/node_modules/rxjs/Rx"' has no
exported member 'Subscribable'.
in package.json one of the dependency is
"#angular/flex-layout": "^5.0.0-beta.14"
for ^ of "^5.0.0-beta.14", npm installs the latest version of flex-layout and in the latest version felx-layout uses RxJS 6. But as the project is an Angular 5 project, it uses previous version of RxJs. So, flex-layout failed to import the required libraries because RxJs 6 is not there.
so, the solution that worked for me is to change package.json
"#angular/flex-layout": "5.0.0-beta.14"
then npm install
Try reinstall your application
npm i
If this doesn't work, try delete node_modules folder and reinstall.

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