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
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"
}
}
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.
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.
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"
}
}
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.