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

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.

Related

How make bootstrap datetimepicker to select only time

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>

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.

Material-icons not rendering

Following is my package.json:
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/cdk": "^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/material": "^5.2.0",
"#material/form-field": "^0.39.1",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"angular4-fusioncharts": "^1.0.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"material-design-icons": "^3.0.1",
"fusioncharts": "^3.12.2",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
}
And I have tried to implement it as:
<mat-icon>date_range</mat-icon>
The icons are missing.
Please help.
Perhaps you missed font import in index.html file:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I removed "material-design-icons": "^3.0.1" from my dependencies and cleared material icons form my angular.json styles:[] section, and import sections of my styles.css. The only thing required is the index.html head to correctly use the material.io names, before this some of the icons worked but others like dark_mode did not work
In index.html import using all types (outline, two+Tone,,) - required if you want to use more than just the standard set
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet">
</head>

Setting up React, Bable environment. Complaining on the first "<" in the HTML layout

So, I am stuck on this error:
Babel seems to work fine. It makes all the changes to the file in another folder. I guess I have all the necessary dependencies installed.
Package.json :
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Dima",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.5.2",
"babel-preset-react": "^6.24.1",
"webpack-dev-server": "^2.9.7"
},
}
After some researching it seems that the code doesn't properly update the HTML file after a couple of changes to the dependencies (I tried several versions), or something with connection app.js file to HTML. But I don't know how to approach this, particularly in my environment.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Indecision App</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="/public/scripts/app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
app.js
console.log('App.js is running, but not really!');
// JSX - JavaScript XML
var template = (
<div>
<h1>Indecision App</h1>
<p>This is some info</p>
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
</div>
);
var appRoot = document.getElementById("app");
ReactDOM.render(template, appRoot);

vue+webpack, system told me "Module build failed: TypeError: this._init is not a function"

I don't know how to fix it, I have been search too many informations, all of people told me I don't install npm module, but my 'package.json' file has already installed them.
I have installed all npm module
dependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "^6.22.0",
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"vue": "^2.1.10",
"vue-hot-reload-api": "^2.0.8",
"vue-html-loader": "^1.2.3",
"vue-loader": "^10.3.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"}
other files
webpack.config.js
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel-loader', exclude:/node_modules/}
]
}};
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'body',
components:{
app:App
}
});
App.vue
<template>
<h1>welcome Vue</h1>
</template>
<script type="text/javascript"></script>
<style type="text/css"></style>
and the final file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
</html>
when I start webpack-dev-server, shell told me
TypeError: this._init is not a function
(ps : my English is not good, so....)
I have solved this problem, In 'webpack.config.js' file
{test:/\.vue$/, loader:'vue'}
change to
{test:/.vue$/, loader:'vue-loader'}
Because I use vue 2.0 version.
The line in webpack.config.js should be full name:
{test:/\.vue$/, loader:'vue-loader'},

Categories