How make bootstrap datetimepicker to select only time - javascript

Using bootstrap datetimepicker with init like :
$('#departure-time').datetimepicker({
todayHighlight: true,
autoclose: true,
format: 'yyyy-mm-dd hh:ii'
}).on('change', function () {
});
I did not find how can I make to select only time
Setting format :
format: 'hh:ii'
Did not help.
Which way is correct ?
I have :
"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "^0.0.7",
MODIFIED :
In my project "jquery": "^3.3.1" is used and I can not move to "jquery 2,
Can it be reason of
“Uncaught Error: Invalid date format. at Object.parseFormat” error
in console when I init
Datetimepicker as :
$('#time_utc').datetimepicker({
todayHighlight: true,
autoclose: true,
format: 'LT',
}).on('change', function () {
});
Can I fix the error ?
MODIFIED # 2:
I try to raise bootstrap-datetimepicker to version 4.17.47, which seems latest at
https://github.com/Eonasdan/bootstrap-datetimepicker
But I have problems with it, as
In package.json of my project I have line:
"bootstrap-datetimepicker": "^0.0.7",
I modified it to
"bootstrap-datetimepicker": "^4.17.47",
But running npm install I got error:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker#^4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
I modified it to
"bootstrap-datetimepicker": "4.17.47",
But running npm install I got similar error:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker#4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
I cleared bootstrap-datetimepicker from package.json
and run
npm install bootstrap-datetimepicker
on installation I again see in package.json:
"bootstrap-datetimepicker": "0.0.7",
What I have from the start.
Also, please take a look at package.json :
{
"private": true,
"scripts": {
"cleanup": "rm -rf public/assets public/css public/fonts public/images public/js public/mix-manifest.json ",
"predev": "npm run cleanup",
"dev": "npm run fix && npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run fix && npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"lint": "npx standard 'resources/js/**/*.js'",
"fix": "npx standard 'resources/js/**/*.js' --fix"
},
"dependencies": {
"#ckeditor/ckeditor5-alignment": "^11.2.0",
"#ckeditor/ckeditor5-build-balloon": "^12.4.0",
"#ckeditor/ckeditor5-build-balloon-block": "^12.4.0",
"#ckeditor/ckeditor5-build-classic": "^12.4.0",
"#ckeditor/ckeditor5-build-decoupled-document": "^12.4.0",
"#ckeditor/ckeditor5-build-inline": "^12.4.0",
"#fortawesome/fontawesome-free": "^5.13.0",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/google-calendar": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/list": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#uppy/core": "^1.8.2",
"#uppy/progress-bar": "^1.3.7",
"#uppy/tus": "^1.5.5",
"#yaireo/tagify": "^2.23.1",
"animate.css": "^3.5.2",
"autosize": "^4.0.0",
"block-ui": "^2.70.1",
"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "0.0.7",
"bootstrap-markdown": "^2.10.0",
"bootstrap-maxlength": "^1.6.0",
"bootstrap-notify": "^3.1.3",
"bootstrap-select": "1.13.10",
"bootstrap-switch": "3.3.4",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-touchspin": "^4.2.5",
"chart.js": "^2.7.3",
"clipboard": "^2.0.6",
"corejs-typeahead": "^1.3.0",
"counterup": "^1.0.2",
"datatables.net-autofill-bs4": "^2.3.4",
"datatables.net-bs4": "^1.10.20",
"datatables.net-buttons-bs4": "^1.6.0",
"datatables.net-colreorder-bs4": "^1.5.2",
"datatables.net-fixedcolumns-bs4": "^3.3.0",
"datatables.net-fixedheader-bs4": "^3.1.6",
"datatables.net-keytable-bs4": "^2.5.1",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.1",
"datatables.net-rowreorder-bs4": "^1.2.6",
"datatables.net-scroller-bs4": "^2.0.1",
"datatables.net-select-bs4": "^1.3.1",
"dompurify": "^1.0.9",
"dropzone": "^5.7.0",
"dual-listbox": "1.1.0",
"es6-promise": "^4.2.8",
"es6-promise-polyfill": "^1.2.0",
"flot": "^3.2.2",
"gmaps": "^0.4.25",
"handlebars": "^4.7.3",
"inputmask": "^4.0.6",
"ion-rangeslider": "^2.2.0",
"jkanban": "^1.2.1",
"jquery": "^3.3.1",
"jquery-form": "^4.2.2",
"jquery-ui": "^1.12.1",
"jquery-validation": "1.19.0",
"jquery.repeater": "^1.2.1",
"jqvmap": "^1.5.1",
"js-cookie": "^2.2.0",
"jstree": "^3.3.9",
"jszip": "^3.2.2",
"leaflet": "^1.6.0",
"markdown": "^0.5.0",
"morris.js": "^0.5.0",
"nouislider": "^13.1.0",
"owl.carousel": "^2.3.4",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"pdfmake": "^0.1.65",
"perfect-scrollbar": "^1.5.0",
"popper.js": "^1.16.1",
"prismjs": "^1.8.4",
"quill": "^1.3.6",
"raphael": "^2.2.7",
"select2": "^4.0.13",
"socicon": "^3.0.5",
"sticky-js": "^1.2.0",
"stream-exhaust": "^1.0.2",
"summernote": "^0.8.16",
"sweetalert2": "^8.0.6",
"tagify": "^0.1.1",
"tether": "^1.4.3",
"tinymce": "^5.2.0",
"toastr": "^2.1.4",
"tooltip.js": "^1.2.0",
"underscore": "^1.8.3",
"uppy": "^1.10.1",
"waypoints": "^4.0.1",
"whatwg-fetch": "^3.0.0",
"wnumb": "^1.1.0"
},
"devDependencies": {
"#turf/turf": "^5.1.6",
"axios": "^0.19.2",
"cross-env": "^5.1",
"laravel-mix": "^5.0.4",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.0",
"standard": "^14.3.3",
"vue-template-compiler": "^2.6.11"
},
"standard": {
"globals": [
"$",
"jQuery",
"_",
"moment",
"turf",
"swal",
"toastr",
"axios",
"L",
"FormData",
"KTUtil",
"KTApp"
]
}
}
It has alot of packages. This project is not mine, I just joined to the team.
Can reason of the error be errors in this file?
Thanks!

Use format: 'LT', check the documentation:
$('#departure-time').datetimepicker({
// todayHighlight: true,
// autoclose: true,
format: 'LT'
}).on('change', function () {
});
Update
Working example (jQuery 2.x, Bootstrap 3):
$(function() {
$('#departure-time').datetimepicker({
// todayHighlight: true,
// autoclose: true,
format: 'LT'
}).on('change', function() {});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='departure-time'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
I used jQuery version 2.x because of this bug.
Update 2
Here's another working example using
jQuery 3.3.1
Bootstrap 4.4.1
Bootstrap-datetimepicker 4.17.47
The Glyphicons removed in Bootstrap 4, so I included them from Bootstrap 3.
The bootstrap-datetimepicker you use is very old, you should update it to a newer version.
Use npm update or npm update bootstrap-datetimepicker or bootstrap-datetimepicker#4.17.47 for a specific version or you can change it in the package.json file.
If the version not changed, you can try to remove the file package-lock.json (save a copy of it) and modify the version in your package.json and run npm install.
$(function() {
$('#departure-time').datetimepicker({
format: 'LT'
}).on('change', function() {});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='departure-time'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>

Related

Angular 14 ng build --configuration production after upgrading

Recently I update my project from ng 13 to ng 14.
What I execute ng build --configuration production, CLI creates some compiled and minimized js files.
One of the minimized files was scripts.js.
When I deploy it in IIS it is crushed and not displayed on the browser.
One of the errors in the console was :
Unexpected token
The project was not compiled well and I saw that when I execute ng build without --production, the js if different and OK.
Does anyone face this issue?
package.json
{
"name": "knesset-website-app",
"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/animations": "^14.0.6",
"#angular/cdk": "^14.1.0",
"#angular/cli": "^14.0.6",
"#angular/common": "^14.0.6",
"#angular/compiler": "^14.0.6",
"#angular/core": "^14.0.6",
"#angular/forms": "^14.0.6",
"#angular/localize": "^14.0.6",
"#angular/platform-browser": "^14.0.6",
"#angular/platform-browser-dynamic": "^14.0.6",
"#angular/router": "^14.0.6",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "^7.0.0",
"#progress/kendo-angular-buttons": "^8.0.0",
"#progress/kendo-angular-common": "^3.1.0",
"#progress/kendo-angular-dateinputs": "^7.0.1",
"#progress/kendo-angular-dialog": "^7.1.2",
"#progress/kendo-angular-dropdowns": "^7.0.2",
"#progress/kendo-angular-excel-export": "^5.0.1",
"#progress/kendo-angular-grid": "^7.2.2",
"#progress/kendo-angular-icons": "^2.0.1",
"#progress/kendo-angular-inputs": "^9.0.3",
"#progress/kendo-angular-intl": "^4.1.0",
"#progress/kendo-angular-l10n": "^4.0.0",
"#progress/kendo-angular-label": "^4.0.0",
"#progress/kendo-angular-layout": "^7.1.0",
"#progress/kendo-angular-pager": "^4.0.1",
"#progress/kendo-angular-pdf-export": "^4.0.0",
"#progress/kendo-angular-popup": "^5.0.0",
"#progress/kendo-angular-progressbar": "^3.0.0",
"#progress/kendo-angular-tooltip": "^4.0.1",
"#progress/kendo-angular-treeview": "^7.1.0",
"#progress/kendo-data-query": "^1.6.0",
"#progress/kendo-drawing": "^1.16.3",
"#progress/kendo-licensing": "^1.2.2",
"#progress/kendo-svg-icons": "^0.2.0",
"#progress/kendo-theme-default": "latest",
"#types/jquery": "^3.5.5",
"#videogular/ngx-videogular": "^5.0.1",
"bootstrap": "^4.6.0",
"bootstrap-v4-rtl": "^4.6.0-2",
"core-js": "^2.5.4",
"dashjs": "^4.3.0",
"font-awesome": "^4.7.0",
"hls.js": "^1.1.5",
"jquery": "^3.6.0",
"ng-recaptcha": "^10.0.0",
"ngx-device-detector": "^2.1.1",
"popper.js": "^1.12.3",
"primeicons": "^4.1.0",
"primeng": "^10.0.3",
"rxjs": "~6.6.6",
"scriptjs": "^2.5.9",
"tslib": "^2.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.6",
"#angular/compiler-cli": "^14.0.6",
"#angular/language-service": "^14.0.6",
"#types/core-js": "^2.5.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^0.0.28",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.17",
"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",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.6.3"
}
}

Angular 7 IE11 not working. Getting SCRIPT1002 Syntax Error vendor.js

I'm running an Angular 7 application and I'm trying to run it in IE11 and its showing me this error:
"SCRIPT1002: Syntax error " "vendor.js"
and the web page shows as a blank page.
In other browsers its working fine.
I have tried with uncomment polyfills and also tried with adding below line in index.html file
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
Below is my package.json file :
{
"name": "eyerne-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node --max_old_space_size=5045 node_modules/#angular/cli/bin/ng serve --aot",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.6",
"#alyle/ui": "^2.7.6",
"#angular/animations": "^7.2.15",
"#angular/cdk": "^7.3.7",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/material": "^7.3.7",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#ng-bootstrap/ng-bootstrap": "^4.1.3",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"amazing-time-picker": "^1.8.0",
"angular-datatables": "^8.0.0",
"angular-gridster2": "^8.2.0",
"angular-resizable-element": "^3.2.4",
"angular2-resizing-cropping-image": "^1.0.2",
"angular2-toaster": "^7.0.0",
"bootstrap": "^4.3.1",
"chroma-js": "^2.0.6",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.7",
"datatables": "^1.10.18",
"datatables.net": "^1.10.19",
"datatables.net-dt": "^1.10.19",
"echarts": "^4.2.1",
"exif-js": "^2.3.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.4",
"jquery": "^3.4.1",
"merge-images": "^1.1.0",
"moment": "^2.24.0",
"ng-http-loader": "^5.1.0",
"ng2-validation": "^4.2.0",
"ng5-slider": "^1.2.4",
"ngx-bootstrap": "^4.3.0",
"ngx-chips": "^2.0.0-beta.0",
"ngx-color-picker": "^8.1.0",
"ngx-cookie-service": "^2.2.0",
"ngx-echarts": "^4.2.1",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-slick-carousel": "^0.4.4",
"ngx-webcam": "^0.2.6",
"ngx-xml2json": "^1.0.2",
"recordrtc": "^5.5.8",
"rxjs": "^6.3.3",
"slick-carousel": "^1.8.1",
"socket.io-client": "^2.3.0",
"ts-ebml": "^2.0.2",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.0",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/datatables.net": "^1.10.17",
"#types/echarts": "^4.1.9",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.30",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.3.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "^5.11.0",
"typescript": "~3.2.2"
}
}
What am I doing wrong? Please let me know if you can help me with this.

facing some issues while integrating google maps in my angular 8 project

Implementing gooogle maps for my angular project,
I have used #google/maps with angular 8.
And I am getting this error:
ERROR in ./node_modules/#google/maps/lib/internal/make-url-request.js
Module not found: Error: Can't resolve 'https' in '/var/www/html/googleMap/node_modules/#google/maps/lib/internal'
I have gone through all stack overflow solutions but nothing helped me
my package.json file:
{
"name": "google-map",
"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": {
"#agm/core": "^1.0.0-beta.7",
"#agm/snazzy-info-window": "^1.0.0-beta.7",
"#angular/animations": "~8.0.0",
"#angular/common": "~8.0.0",
"#angular/compiler": "~8.0.0",
"#angular/core": "~8.0.0",
"#angular/forms": "~8.0.0",
"#angular/platform-browser": "~8.0.0",
"#angular/platform-browser-dynamic": "~8.0.0",
"#angular/router": "~8.0.0",
"#google/maps": "^0.5.5",
"rxjs": "~6.4.0",
"snazzy-info-window": "^1.1.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.800.0",
"#angular/cli": "~8.0.0",
"#angular/compiler-cli": "~8.0.0",
"#angular/language-service": "~8.0.0",
"#types/googlemaps": "^3.37.0",
"#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.4.3"
},
"browser": {
"crypto": false
}
}
I need to overcome this problem please help
or if anyone of you are integrated google maps in your projects please provide github link, it will be really helpful.

angular service worker ngsw_serviceworker.es6.js.map not found

I have registered a service worker with angular 4, when build in prod mode over https it console a message
DevTools failed to parse SourceMap: https://www.somewebsite.com/ngsw_worker.es6.js.map
My Package.json file
{
"name": "healthcare",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"pree2e": "webdriver-manager update",
"sw": "sw-precache --root=dist --config=precache-config.js",
"static-serve": "cd dist && live-server --port=4200 --host=localhost --entry-file=/index.html",
"build-prod-ngsw": "ng build -prod && node_modules/.bin/ngsw-config dist ./src/ngsw-config.json && cp node_modules/#angular/service-worker/ngsw-worker.js ./dist/ngsw-worker.js"
},
"private": true,
"dependencies": {
"#angular/animations": "6.0.6",
"#angular/common": "6.0.6",
"#angular/compiler": "6.0.6",
"#angular/core": "6.0.6",
"#angular/forms": "6.0.6",
"#angular/http": "6.0.6",
"#angular/platform-browser": "6.0.6",
"#angular/platform-browser-dynamic": "6.0.6",
"#angular/pwa": "^0.6.8",
"#angular/router": "6.0.6",
"#angular/service-worker": "6.0.6",
"angular-sweetalert-service": "^2.0.2",
"angular2-cookie": "^1.2.6",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.3.1",
"ngx-clipboard": "^11.1.1",
"ngx-owl-carousel": "^2.0.7",
"ngx-snackbar": "^1.2.0-rc.2",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"sw-precache-webpack-dev-plugin": "^0.2.0",
"sw-toolbox": "^3.6.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "6.0.8",
"#angular/compiler-cli": "6.0.6",
"#angular/language-service": "6.0.6",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.3.4",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"sw-precache": "^5.2.1",
"sw-precache-webpack-plugin": "^0.11.5",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "2.7.2",
"#angular-devkit/build-angular": "~0.6.8"
}
}

Angular2 Failing to update to RC7 - zone.js & reflect-metadata

I'm trying to get my application to run with the new RC7 of angular but i cant seem to be able to get it done, as the console shouts:
Promise rejection: Zone.assertZonePatched is not a function angular2-polyfills.js:489
And when this somehow disappears, this pops up:
Reflect.getMetadata is not a function (..) core.umd.js:472
Looks like the implementation changed, and mine isn't updated although i npm installed everything from scratch, update my package.json as follows:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.7",
"#angular/compiler": "2.0.0-rc.7",
"#angular/core": "2.0.0-rc.7",
"#angular/forms": "2.0.0-rc.7",
"#angular/http": "2.0.0-rc.7",
"#angular/platform-browser": "2.0.0-rc.7",
"#angular/platform-browser-dynamic": "2.0.0-rc.7",
"#angular/router": "3.0.0-rc.3",
"#angular/upgrade": "2.0.0-rc.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.21",
"angular2-in-memory-web-api": "0.0.19",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.3",
"angular2": "2.0.0-beta.17",
"angular2-apollo": "^0.4.6",
"apollo-client": "^0.4.13",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.1",
"moment": "^2.14.1",
"source-map-loader": "^0.1.5"
},
"devDependencies": {
"ts-loader": "^0.8.2"
}
}
index.html: (I have also tried refering to unpkg.com for the packages, no success)
<html>
<head>
<title>My App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css"
integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"
integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="dist/bundle.js"></script>
</html>
Any idea how to fix this?
Thanks in advance! :)
NOTEs:
As per package.json, you are using Angular2.0.0 You don't need angular2-polyfills.js
Remove "angular2": "2.0.0-beta.17", from package.json
Remove angular2-polyfills.js from index.html
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
Infact, if you have angular2 folder under node_modules then delete that folder. latest angular2 packages will be available in #angular folder under node_modules.

Categories