angular 2 app component not loading - javascript

I am doing a simple angular 2 tutorial, but i just get 'loading' when trying to run my app.
this is my index.html file
<html>
<head>
<title>Angular CV </title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill for older browsers -->
<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>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Still Loading...</my-app>
</body>
</html>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: ''
})
export class AppComponent {
}
full code here: https://github.com/trinajoy/angularcv

Angular-cli changed their system from SystemJS to Webpack since beta.14. It seems you're still using SystemJS, though.
You can migrate to Webpack following these instructions. However, as you're just following a tutorial, I'd recommend to install angular-cli from scratch.

Related

external js from keenthemes metronic theme not working in angular

hey guys so I am using metronic theme and I made an angular version of demo3 HTML version
and everything looks fine except
if I import external js like this
<!doctype html>
<html lang="fa" direction="rtl" dir="rtl" style="direction: rtl">
<head>
<meta charset="utf-8" />
<base href="/">
<script src="assets/plugins/global/plugins.bundle.js" type="application/javascript"></script>
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js" type="application/javascript"></script>
<script src="assets/js/scripts.bundle.js" type="application/javascript"></script>
<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js" type="application/javascript"></script>
<script src="assets/js/pages/widgets.js" type="application/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body kt-root id="kt_body" class="header-mobile-fixed subheader-enabled aside-enabled aside-fixed aside-secondary-enabled page-loading">
</body>
</html>
I don't have any error but toggle buttons not working
and if I added like this to angualr.json file
"scripts": [
"src/assets/plugins/global/plugins.bundle.js",
"src/assets/plugins/custom/prismjs/prismjs.bundle.js",
"src/assets/js/scripts.bundle.js",
"src/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js",
"src/assets/js/pages/widgets.js"
]
when I serve the project I get this error
add
import 'core-js';
in the polyfills.ts file before the zone
and if you have or imported es6-shim just remove that
and I don't know why your external js not working that's the other problem

Can I use ES modules in browser with babel, without bundling my code?

I'd like to load my reactjs code in the browser using babel-standalone.
So I'm looking for the correct configuration for babel standalone (or any other solution) in order to load ES modules in the browser while using babel.
I created the Glitch below to show my problem.
https://glitch.com/edit/#!/example-es-modules-with-babel?path=index.html:1:0
Edit: Above link now contains a working example.
I spent a fair amount of time looking and trying things out, but it seems quite difficult to figure out this on my own.
So I'm wondering if someone could help me to get above Glitch working.
For a similar issue discusstion please see: https://github.com/babel/babel/issues/9976
Edit: Motivation
This is just for fun and for prototyping ideas like in a codepen.
Creating a dev setup and bundling the js code is the best thing for any non-trivial app.
I got it to work with your code by making a few changes. Here is the glitch link. I'm putting both your original code and the modified version at the bottom of this post - good idea to include code with your SO question in case glitch ever goes down or your project gets deleted.
Changes:
Switched from AMD to UMD. AMD uses require.js, which seems to conflict with babel-standalone as far as transpiling goes. Also removed the require.js script as part of that process.
Explicitly imported app.js with a script tag:
<script type="text/babel" src="./app.js" data-plugins="transform-modules-umd"></script>
If you want to switch to inline modules, you will need to use the data-module attribute. See this change to babel-standalone.
Also, please note that you are going down a route that you probably don't want. At the point where you are dealing with export/imports/modules and multiple component files, you really should switch to a bundler like webpack - there is a reason why most threads about this issue just recommend switching to it.
Original HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<script src="https://unpkg.com/#babel/standalone#7.4.4/babel.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<script>
Babel.registerPreset("my-preset", {
presets: [
[Babel.availablePresets["es2015"], { "modules": false }],
[Babel.availablePresets["react"]]
],
plugins: [
[Babel.availablePlugins["transform-modules-amd"]]
],
moduleId: "main"
});
</script>
<script type="text/babel" data-presets="my-preset">
import App from './app.js'
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</head>
<body>
<p>Output should appear below.</p>
<hr/>
<div id="root"></div>
</body>
</html>
Modified HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<script src="https://unpkg.com/#babel/standalone#7.4.4/babel.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script> -->
<script>
Babel.registerPreset("my-preset", {
presets: [
[Babel.availablePresets["es2015"], { "modules": false }],
[Babel.availablePresets["react"]]
],
plugins: [
[Babel.availablePlugins["transform-modules-umd"]]
],
moduleId: "main"
});
</script>
<script type="text/babel" src="./app.js" data-plugins="transform-modules-umd"></script>
<script type="text/babel" data-presets="my-preset">
import App from './app'
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</head>
<body>
<p>Output should appear below.</p>
<hr/>
<div id="root"></div>
</body>
</html>
And app.js stays the same:
export default () => <h1>It Works!</h1>

How to 'import' Vuejs component into index.html?

I use Vue.js CDN and I put all the Vuejs code inside a script tag in index.html.
It works fine. However, I'd like to use this component to add tags functionality.
But I receive this error :
This is how my code looks like:
<script>
import VTagInput from 'v-tag-input'
Vue.use(VTagInput)
var app = new Vue({
el: '#app',
delimiters: ["[[", "]]"],
components: {VTagInput},
tags: []
data: {
errors: [],
I npm installed the package as specified in the github repo.
This is the head tag:
<head>
<meta charset="utf-8">
<meta name="author" content="Seif Elmughrabi">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="(( url_for('static', filename='materialize.css') ))" media="screen, projection">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="(( url_for('static', filename='style.css') ))">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Insurance Policy Planner</title>
</head>
You cant import another files in browser using 'import' you need to use webpack, however you can use this cdn to load the plugin in your html after loading vue.js file, https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js , here is a working example
new Vue({
el:"#app",
data: {
tags: ['foo', 'bar']
}
})
<script src="https://unpkg.com/vue#2.5.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js"></script>
<div id="app">
<v-tag-input v-model="tags"></v-tag-input> {{tags}}
</div>
You should load the script where VTagInput is located in your head, right after Vue. Then no need to import anything, VTagInput will be accessible globally

How to include jquery plugin in ionic 3

I'm trying to implement jQuery FloatLabel in my ionic app -> https://github.com/m10l/FloatLabel.js/tree/master
I used that plugin because that plugin also was implemented in a web version, so to be uniform in design.
I included that inside src/index.html with jquery
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
I want to execute this script on page load
$( '.js-float-label-wrapper' ).FloatLabel();
Here's my src/index.html code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
It works on web version but not in ionic. How do I implement that on ionic?
I want it like this fiddle -> https://jsfiddle.net/acrmktq3/
link jquery.js in your index.html:
<script src="assets/js/jquery-3.2.1.min.js"></script>
run in node:
npm install jquery
and import it in your page like:
import * as $ from "jquery";
Try adding your JavaScript code in the bottom of your body like this:
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</body>
You're addng it before your app initialization, the main.js wasn't even loaded and you've already executed your code, so using it on the bottom of your code should do the trick.
Also, have you ever tried using this FloatLabel in a Ionic application? Since the page may not be loaded and the code already had been executed you need it to be more "Angular way". You can use it inside the component that's having the floating label, just use this to be able to use JQuery inside your component:
declare var $: any; // declare this bellow your page imports to be able to use jQuery
Or you can try Ionic floating Label, so there's no need to have JQuery and other library inside your project, even if it's not "uniform" design
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<!-- Use the floating attribute to have your label to float when you focus on the input -->
<ion-input></ion-input>
</ion-item>
Hope this helps.

Module error Angular 1.5

It looks like I can't instantiate my module. Here is my files :
--tv
-- contents (folder)
-- contents.template.html
-- contents.component.js
-- index.html
-- bootstrap.js
Now, here's the code :
Contents.component.js :
angular
.module('contents', [])
.component('myContents', {
controller: contentController,
templateUrl: 'contents/content.template.html',
});
function contentController() {
console.log('Le content est appelée !');
}
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TV</title>
<!-- SCRIPT DE CONNEXION -->
<script src="bower_components/angular/angular.js"></script>
<script src="bootstrap.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
</head>
<body ng-app="app">
<my-contents></my-contents>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>
Finally bootstrap.js :
angular
.module('app', ['ngComponentRouter', 'contents'])
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
})
.value('$routerRootComponent', 'myApp')
.component('app', {
});
And the error catched in the browser console :
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module contents due to:
[$injector:nomod] Module 'contents' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=contents
minErr/<#http://127.0.0.1:8080/bower_components/angular/angular.js:68:12
module/<#http://127.0.0.1:8080/bower_components/angular/angular.js:2082:17
ensure#http://127.0.0.1:8080/bower_components/angular/angular.js:2006:38
module#http://127.0.0.1:8080/bower_components/angular/angular.js:2080:14
loadModules/<#http://127.0.0.1:8080/bower_components/angular/angular.js:4617:22
forEach#http://127.0.0.1:8080/bower_components/angular/angular.js:321:11
loadModules#http://127.0.0.1:8080/bower_components/angular/angular.js:4601:5
loadModules/<#http://127.0.0.1:8080/bower_components/angular/angular.js:461
I made a copy/paste of another project that I built yesterday that works. I have no idea why it's not working.
You are bootstrapping your app, then you load the contents script. Change their order, like this:
<script src="bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
<script src="bootstrap.js"></script>

Categories