upgrade angular2 rc6 to rc7 - npm

How can I upgrade my angular2 project from rc6 to rc7 ?
After hours of googling, I haven't find a solution.
This command line:
npm update angular2
Say that there are no update available.

First: The official 2.0.0 Release is there! :)
To face your problem, just change your package.json.
From this:
"dependencies": {
"#angular/common": "2.0.0-rc.x",
"#angular/compiler": "2.0.0-rc.x",
"#angular/core": "2.0.0-rc.x",
"#angular/forms": "2.0.0-rc.x",
"#angular/http": "2.0.0-rc.x",
"#angular/platform-browser": "2.0.0-rc.x",
"#angular/platform-browser-dynamic": "2.0.0-rc.x",
"#angular/router": "3.0.0-rc.x",
...
},
To this:
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"core-js": "^2.4.1", // !! UPDATE THESE ENTRIES TOO !!
"rxjs": "5.0.0-beta.12", // !! UPDATE THESE ENTRIES TOO !!
"ts-helpers": "^1.1.1", // !! UPDATE THESE ENTRIES TOO !!
"zone.js": "^0.6.23" // !! UPDATE THESE ENTRIES TOO !!
},
and run in the same directory npm i or the long command: npm install

Related

ng serve has no ouput

I recently cloned a repo onto a new machine and now I have run into some issues in getting my development server up and running. When I run ng serve, there is no output in the terminal as seen below.
This is strange to me because when I created a fresh angular project and ran the same command, the server builds successfully. I'm not sure what I'm missing here to allow my server to build and run.
I have taken the following steps so far:
uninstalled #angular/cli globally and locally, and reconciled their versions to be the same as suggested at https://stackoverflow.com/a/39774999/12936248
installed angular-devkit/build-angular#0.80 to match the local version within my repo
Matched angular.json in the original and the fresh project, as the fields for development within the serve object did not exist in the original project.
But none of these can bring output to this command. Could someone please point me in the right direction so I may be able to get through this issue? This is my package.json below, and you may view my project at https://github.com/andrervincent/nbd
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/architect": "^0.1300.4",
"#angular-devkit/core": "^13.0.4",
"#angular/animations": "~8.2.14",
"#angular/cli": "^13.0.4",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"cors": "^2.8.5",
"jwt-decode": "^3.1.2",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.25",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}```

ERROR TypeError: Object(...) is not a function

I have this error with angular-material in a mat-select tag. The option tag is a *ngFor list from a service. I get this error in the prod mode, but not in development mode.
ERROR TypeError: Object(...) is not a function ...
my package.json:
"dependencies": {
"#angular/animations": "^10.0.11",
"#angular/common": "^10.0.11",
"#angular/compiler": "^10.0.11",
"#angular/cdk": "^10.1.3",
"#angular/core": "^10.0.11",
"#angular/flex-layout": "^10.0.0-beta.32",
"#angular/forms": "^10.0.11",
"#angular/google-maps": "^10.1.3",
"#angular/localize": "^10.0.11",
"#angular/material": "^10.1.3",
"#angular/material-moment-adapter": "^10.1.3",
"#angular/platform-browser": "^10.0.11",
"#angular/platform-browser-dynamic": "^10.0.11",
"#angular/router": "^10.0.11",
...
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1000.7",
"#angular/cdk": "^10.1.3",
...
I resolved this issue by changing:
if (isArray(json)) {
json = json.pop();
}
with
if (Array.isArray(json)) {
json = json.pop();
}
Because isArray was a homemade class that crashed.

How to update the offline registry of verdaccio?

I installed the verdaccio in windows 8 os and It's working well.
my problem started when I tried to update the npm-cache.
after the update version of package.json file, I use the npm install --registry="http://localhost:4873 command for update npm-cache.
when I exec above command, it's start to install the packages, But after a while, I encountered with errors:
or
when I add that package (e.g request#^2.88.0) in package.json=>dependencies, It's installed but I encountered with next error package and loop ...
I clean the catch with npm cache clean --force. and remove the C:\Users\xxx\AppData\Roaming\npm-cache folder physicsally and reinstall. But to no avail.
I use the verdaccio#^4.4.0.
npm version is 6.3.14.
node version is 12.14.0.
how to fix this problem?
UPDATE:
I did the following:
update veraccio to version 4.4.2.
set registry config npm config set registry http://registry.npmjs.com/.
clean cache with this command npm cache clean --force.
update npm globally with npm i -g.
set registry config npm config set registry http://localhost:4873/.
and run npm i.
much better and resolve above errors. but I have new error:
config.yaml:
storage: ./storage
plugins: ./plugins
web:
title: Verdaccio
auth:
htpasswd:
file: ./htpasswd
uplinks:
#npmjs:
#url: https://registry.npmjs.org/
packages: '#*/*':
access: $all
publish: $all
unpublish: $all
#proxy: npmjs
'**':
access: $all
publish: $all
unpublish: $all
#proxy: npmjs
server: keepAliveTimeout: 60
middlewares: audit:
enabled: true
logs:
- { type: stdout, format: pretty, level: http }
package.json:
{
"name": "AngularModules",
"version": "2.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "node package-builder",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.1.0",
"#angular/animations": "^6.1.4",
"#angular/cdk": "^7.3.7",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/flex-layout": "^6.0.0-beta.17",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/material": "^6.4.7",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/router": "^6.1.10",
"#aspnet/signalr": "^1.1.4",
"#asymmetrik/ngx-leaflet": "^4.0.0",
"#ngu/carousel": "^1.5.5",
"#ngx-loading-bar/core": "2.1.2",
"#ngx-loading-bar/router": "2.1.2",
"#ngx-prism/core": "^2.0.1",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"#swimlane/ngx-datatable": "^13.1.0",
"#types/prismjs": "^1.16.0",
"angular-calendar": "^0.25.2",
"angular-material-fileupload": "0.0.11",
"angular-tree-component": "^7.2.1",
"buffer": "^5.4.3",
"chart.js": "2.7.2",
"core-js": "^2.6.11",
"d3": "^5.15.0",
"devextreme": "18.1.5",
"devextreme-angular": "18.1.5",
"dragula": "3.7.2",
"events": "^3.1.0",
"hammerjs": "2.0.8",
"intl": "1.2.5",
"jszip": "3.1.5",
"leaflet": "^1.6.0",
"lodash-es": "^4.17.15",
"material-design-icons": "^3.0.1",
"moment": "^2.24.0",
"ncp": "^2.0.0",
"ng-animate": "^0.3.4",
"ng2-charts": "1.6.0",
"ng2-dragula": "^2.1.1",
"ng2-file-upload": "1.3.0",
"ng2-jalali-date-picker": "^2.2.7",
"ng2-pdfjs-viewer": "^0.2.29",
"ng2-validation": "4.2.0",
"ng6-breadcrumbs": "1.0.7",
"ngx-export-as": "^1.4.0",
"ngx-perfect-scrollbar": "^6.3.1",
"ngx-quill": "^3.6.0",
"primeicons": "^1.0.0",
"primeng": "^6.1.7",
"print-js": "^1.0.63",
"prismjs": "^1.19.0",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",
"screenfull": "3.3.2",
"stream": "0.0.2",
"timers": "^0.1.1",
"webpack-bundle-analyzer": "^2.13.1",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.7.5",
"#angular-devkit/build-ng-packagr": "^0.7.5",
"#angular/cli": "^6.2.9",
"#angular/compiler-cli": "^6.1.10",
"#angular/language-service": "^6.1.10",
"#schematics/angular": "0.8.9",
"#schematics/update": "0.8.9",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.8",
"#types/node": "^10.5.8",
"codelyzer": "~4.4.4",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.4",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.5.1",
"ng-packagr": "^3.0.0",
"node-sass": "^4.13.1",
"protractor": "^5.4.2",
"sass-loader": "^7.3.1",
"ts-node": "~7.0.1",
"tsickle": "^0.38.0",
"tslib": "^1.10.0",
"tslint": "~5.11.0",
"typescript": "^2.9.2"
}
}
any opinion?
The reason you are running into errors is that those packages do not exist in your local verdaccio, but on the regular npm registry.
You could solve this by either:
setting the regular npm registry as an uplink
set a scope for your registry by running npm config set #<scope>:registry <your verdaccio>
now all packages that start with #<scope>/ will be fetched from you verdaccio, but all others will be fetched from npm.

Angular 6 aspnetcore angular/compiler-cli to be 2.3.1 or greater

I create an application with visual studio 2017
ASP.Net core
angular
the template come with angular 4
I updated for angular 6.1.3
but I get this error
crit: Microsoft.AspNetCore.Hosting.Internal.WebHost[6]
Application startup exception
System.AggregateException: One or more errors occurred. (Version of #angular/compiler-cli needs to be 2.3.1 or greater. Current version is "6.1.3".
here is my package.json
{
"name": "WebApplication1",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"#angular/animations": "6.1.3",
"#angular/common": "6.1.3",
"#angular/compiler": "6.1.3",
"#angular/compiler-cli": "^6.1.3",
"#angular/core": "6.1.3",
"#angular/forms": "6.1.3",
"#angular/http": "6.1.3",
"#angular/platform-browser": "6.1.3",
"#angular/platform-browser-dynamic": "6.1.3",
"#angular/platform-server": "6.1.3",
"#angular/router": "6.1.3",
"#ngtools/webpack": "1.5.0",
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/webpack-env": "1.13.0",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.3",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "^4.1.3",
"chai": "4.0.2",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "6.2.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.9.2",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.26"
},
"dependencies": {
"#angular/cli": "^6.1.4",
"popper.js": "^1.14.4",
"rxjs-compat": "^6.0.0-rc.0"
}
}

npm downloading hundreds of packages?

I'm working on an Angular2 (currently on RC1) project in Visual Studio 2015; and straining my understanding of NPM.
Looking in the Dependencies/npm folder, and /node_modules there are hundreds of npm packages. Most of which are labeled as extraneous by Visual Studio (in Dependencies/npm)
I went through and removed all the extraneous packages manually (npm prune did nothing).
I apparently accidentally removed a non-extraneous package, which I attempted to restore. NPM went ahead and re-downloaded all 500+ extraneous packages again...
What am I missing?
My package.json:
{
"name": "MySite",
"version": "0.0.1",
"description": "My Site",
"repository": "./src",
"license": "UNLICENSED",
"dependencies": {
"#angular/common": "^2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "^2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/router": "^2.0.0-rc.1",
"es6-promise": "3.1.2",
"es6-shim": "0.35.0",
"jquery": "2.2.2",
"jquery-validation": "1.15.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"gulp": "3.9.1",
"gulp-cssmin": "0.1.7",
"gulp-concat": "2.6.0",
"gulp-sass": "2.3.1",
"typings": "0.8.1",
"typescript": "^1.8.10",
"null-loader": "^0.1.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1",
"webpack-merge": "0.12.0"
},
"scripts": {
"postinstall": "typings install"
}
}