Trying to build a simple Angular 2 app with modal dialogs using 'ng2-bs3-modal'
index.html
<!doctype html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
package.json
{
"name": "ng2-test",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.17",
"systemjs": "0.19.27",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
typings.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}
app/main.ts
import {bootstrap} from 'angular2/platform/browser' // import bootstrap
import {AppComponent} from './app.component' // import the component we just created
import {AComponent} from './a.component' //
//import {UserLoginModalComponent} from './user-login.component' //
bootstrap(AppComponent); // finally bootstrap it.
bootstrap(AComponent);
//bootstrap(UserLoginModalComponent);
app/app.component.ts
import {Component} from 'angular2/core'; // <-- importing Component from core
//import {AComponent} from './a.component';
#Component({
selector: 'my-app', //<----the element defined in the index.html
template: '<h1>Angular2, Hello {{name}}</h1><br>' // <---this is the template to put in the component.
// directives: [AComponent],
})
export class AppComponent {
name: string;
constructor(){
this.name = "ANIL";
}
} // <--- we need to export the class AppComponent.
app/a.component.ts
import {Component} from 'angular2/core'; // <-- importing Component from core
//import {AComponent} from './a.component';
#Component({
selector: 'my-app', //<----the element defined in the index.html
template: '<h1>Angular2, Hello {{name}}</h1><br>' // <---this is the template to put in the component.
// directives: [AComponent],
})
export class AppComponent {
name: string;
constructor(){
this.name = "ANIL";
}
} // <--- we need to export the class AppComponent.
app/user-login.component.ts
import {Component} from 'angular2/core';
import {MODAL_DIRECTIVES, ModalComponent} from 'ng2-bs3-modal/ng2-bs3-modal';
#Component({
selector: 'user-login-modal',
directives: [MODAL_DIRECTIVES],
template: `
<modal #modal [keyboard]="false" [backdrop]="'static'">
<modal-header [show-close]="false">
<h4 class="modal-title">I am a modal!</h4>
</modal-header>
<modal-body>
Hello World!
</modal-body>
<modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
`
})
export class UserLoginModalComponent {
#ViewChild(ModalComponent)
modal: ModalComponent;
open(){
this.modal.open();
}
close(){
this.modal.close();
}
}
I see ng2-bs3-modal module is still trying to access #angular/core, i think it should point to angular2/core?
I also tried adding 'map' in system config js, but it was not taking the '.js' extension while accessing the #angular/core(even though defaultExtension: 'js' was present in system config js).
Please help!!!
Below is console log trace,
angular2-polyfills.js:127 GET http://localhost:3000/#angular/core 404 (Not Found)scheduleTask # angular2-polyfills.js:127ZoneDelegate.scheduleTask # angular2-polyfills.js:362Zone.scheduleMacroTask # angular2-polyfills.js:299(anonymous function) # angular2-polyfills.js:148send # VM1684:3fetchTextFromURL # system.src.js:1156(anonymous function) # system.src.js:1739ZoneAwarePromise # angular2-polyfills.js:610(anonymous function) # system.src.js:1738(anonymous function) # system.src.js:2764(anonymous function) # system.src.js:3338(anonymous function) # system.src.js:3605(anonymous function) # system.src.js:3990(anonymous function) # system.src.js:4453(anonymous function) # system.src.js:4705(anonymous function) # system.src.js:408ZoneDelegate.invoke # angular2-polyfills.js:349Zone.run # angular2-polyfills.js:242(anonymous function) # angular2-polyfills.js:597ZoneDelegate.invokeTask # angular2-polyfills.js:382Zone.runTask # angular2-polyfills.js:282drainMicroTaskQueue # angular2-polyfills.js:500ZoneTask.invoke # angular2-polyfills.js:452
angular2-polyfills.js:349 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/#angular/core(…)
Very silly of me, missed to include the bootstrap CSS
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css
and add ng2-bs3-modal latest version(it looks for #angular/ packages not angular/
"ng2-bs3-modal": "^0.6.1"
used mapping for angular rc version in system config js as below
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'angular2': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
and
package.json
"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/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"ng2-bs3-modal": "^0.6.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.10",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"canonical-path": "0.0.2",
"http-server": "^0.9.0"
},
Related
I am trying to build a simple single page application so i created a project selecting (Default (Vue 3 Preview) ([Vue 3] babel, eslint)), and i setup the routing manually following vue mastery tutorial https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
the problem is 17 warnings are raised in cmd after i run (npm run serve)
output of my cmd: (some of it as it is too large)
WARNING Compiled with 17 warnings 11:40:21 PM
warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
"export 'computed' was not found in 'vue'
warning in ./src/main.js
"export 'createApp' was not found in 'vue'
warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
"export 'defineComponent' was not found in 'vue'
Here is my App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Here is my /src/router/index.js
import { createWebHistory, createRouter } from "vue-router";
import Home from "#/views/Home.vue";
import About from "#/views/About.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
Here is my /src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---
createApp(App).use(router).mount('#app')
my package.json
{
"name": "frontend-gp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^2.0.2",
"core-js": "^3.6.5",
"vue": "^3.1.4",
"vue-router": "^4.0.10",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.1.4",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^6.0.1",
"sass-loader": "^10.2.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
if you need more resources please let me know
You should uninstall the current vue version and install the new one :
npm uninstall vue -S
then
npm install vue#next -S
Issue with loading third party library which is dependence on another third party library. In my case, i'm using bootstrap(v3.3.7) which is required JQuery. I included these libraries as per angular suggested way and successfully compile the application, if run it in browser i got a console error.
Versions
"dependencies": {
"#angular/animations": "^6.0.0",
"#angular/common": "^6.0.0",
"#angular/compiler": "^6.0.0",
"#angular/core": "^6.0.0",
"#angular/forms": "^6.0.0",
"#angular/http": "^6.0.0",
"#angular/platform-browser": "^6.0.0",
"#angular/platform-browser-dynamic": "^6.0.0",
"#angular/router": "^6.0.0",
"#types/bootstrap": "^3.3.33",
"#types/jquery": "^3.3.1",
"bootstrap": "^3.3.7",
"core-js": "^2.5.4",
"jquery": "3.3.1",
"malihu-custom-scrollbar-plugin": "3.1.5",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26" }
Sample code and console error
app.component.ts
import { Component, ElementRef, OnInit, AfterViewInit } from
'#angular/core';
import * as $ from 'jquery';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(private element: ElementRef){ }
ngOnInit() {
$('.dropdown-toggle').dropdown();
}
}
angular.json
"options": {
"outputPath": "dist/ang6",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
{ "input": "node_modules/bootstrap/dist/css/bootstrap.min.css" },
{ "input": "src/styles.css" }
],
"scripts": [
{ "input": "node_modules/jquery/dist/jquery.js" },
{ "input": "node_modules/bootstrap/dist/js/bootstrap.min.js" }
]
},
console error
error_message_pic
Is angular 6 changed the way of load/include the third party library files? Can anyone please help me to resolve this issue?
I have been killing myself over this to work for days, but to no avail.
I am using ReactJS and Babel. I have node JS installed as well as webpack.
It is a simple Hello World app.
The error I get is:
Uncaught SyntaxError: Unexpected token import
Here is the source code:
package.json
{
"name": "app",
"version": "1.0.0",
"main": "webapp.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-react": "^6.3.13",
"express": "^4.15.3",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^2.5.1"
},
"description": ""
}
webpack.config.js
var path = require('path');
module.exports = {
entry: './webapp.js',
output: {
path: './',
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
webapp.js
var express = require('express')
var app = express();
app.use(express.static('static'));
var server = app.listen(3000, function() {
var port = server.address().port;
console.log("Started server at port", port);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="App.js">
</script>
</body>
</html>
App.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Your webpack is configured to build webapp.js source. This is server side node applications. So add this:
target: "node"
to your webpack config.
This option enable node build environment.
In order to build client application you need another configuration.
The webpack config must have
target: "web"
entry: './App.js',
And your html must have:
<script type="text/javascript" src="index.js">
instead of
<script type="text/javascript" src="App.js">
Because browser can not understand modern syntax. And you need to build and load compiled js bundle.
To add to what oklas mentioned,
I noticed that you have:
test: /\.js$/,
instead you should have:
test: /\.jsx?/,
(because the react preset is looking for jsx in order to transpile it to js)
If after that change you still have issues, I'd recommend npm i -D the latest babel presets, as follows:
module.exports = {
mode: 'development',
target: 'web',
entry: `${SRC_DIR}\\app.jsx`,
output: {
filename: CHANGE_ME,
path: DIST_DIR
},
module: {
rules: [
{
test: /\.jsx?/,
include: SRC_DIR,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/preset-react', '#babel/preset-env']
}
},
EDIT: adding var google : any; to the global scope of autocomplete.ts did not solve the issue, just deffered it by a bit.
After dealing with this and following several forums for this error and implementing every npm install, both --save-dev to global.
-I've installed google-maps and #types/googlemaps in the package.json devDependencies', i've also installed the global typeings npm which I later used to install another dt-google.maps file, I've pretty much done everything and it's still showing cannot find 'google'.
I think it's a package issue, if i'm wrong -correct me.
package.json
{
"name": "githubIonic",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.1.0",
"#angular/compiler": "4.1.0",
"#angular/compiler-cli": "4.1.0",
"#angular/core": "4.1.0",
"#angular/forms": "4.1.0",
"#angular/http": "4.1.0",
"#angular/platform-browser": "4.1.0",
"#angular/platform-browser-dynamic": "4.1.0",
"#ionic-native/core": "3.7.0",
"#ionic-native/splash-screen": "3.7.0",
"#ionic-native/status-bar": "3.7.0",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.2.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.10"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-ionic-angular": "1.2.0",
"typescript": "2.2.1",
"google-maps": "^3.2.1",
"#types/googlemaps": "^3.26.11"
},
"description": "An Ionic project"
}
And
src/pages/autocomplete/autocomplete.ts
import { Component, NgZone } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ViewController} from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
/**
* Generated class for the AutocompletePage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-autocomplete',
templateUrl: 'autocomplete.html',
})
export class AutocompletePage {
autocompleteItems;
autocomplete;
service = new google.maps.places.AutocompleteService();
constructor(public viewCtrl: ViewController, private zone: NgZone, public navCtrl: NavController, public navParams: NavParams) {
this.autocompleteItems = [];
this.autocomplete = {
query: ''
};
}
dismiss() {
this.viewCtrl.dismiss();
}
chooseItem(item: any) {
this.viewCtrl.dismiss(item);
}
updateSearch() {
if (this.autocomplete.query == '') {
this.autocompleteItems = [];
return;
}
let me = this;
this.service.getPlacePredictions({
input: this.autocomplete.query,
componentRestrictions: {country: 'TH'}
}, function (predictions, status) {
me.autocompleteItems = [];
me.zone.run(function () {
predictions.forEach(function (prediction) {
me.autocompleteItems.push(prediction.description);
});
});
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad AutocompletePage');
}
}
I know I am a bit late but I hat the same issue. What I did was
First I installed typings
npm install -g typings#latest
on linux maybe
sudo npm install -g typings#latest
the next step is to install the google maps typings:
typings install dt~google.maps --global
Then I had to add the following line to the tsconfig.json file
under "include": [
// something like "src/**/*.ts"
, "typings/*.d.ts"
]
Include Google Maps API in your index.html
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
And then declare google var in your typescript file see below.
declare var google;
#IonicPage()
#Component({
selector: 'page-autocomplete',
templateUrl: 'autocomplete.html',
})
you can also refer this blog: Google Maps Autocomplete for Ionic 2 applications
I'm trying to move my React code base to ES2016, but can't get pass the simplest sample, need some help here!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<wrapper></wrapper>
<script src="js/lib/react-with-addons.min.js"></script>
<script src="js/lib/react-dom.min.js"></script>
<script src="js/bundle.js"></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './app';
ReactDOM.render(
<App/>,
document.querySelector('wrapper')
);
app.js
import React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<app>something goes there</app>
)
}
};
gulpfile.js
var gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
gutil = require('gulp-util'),
babelify = require('babelify');
gulp.task('jsx', function() {
browserify({
entries: './src/web/js/main.jsx',
extensions: ['.jsx'],
debug: true
})
.transform(babelify, {presets: ['es2015', 'react']})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dist/web/js/'))
});
gulp.task('default', ['jsx']);
and package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "?.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1"
},
"devDependencies": {
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-util": "^3.0.7",
"reactify": "^1.1.1",
"vinyl-source-stream": "^1.1.0"
}
}
Seems like it should work, but I keep getting the following two errors
warning.js:44 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
and
invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I know it must be something stupidly simple, but just can't figure it out. Please help.
Change this
import { App } from './app';
to:
import App from './app';