I have a very simple angular2 project, configured to work with Gulp, Bundle and ECM6. Bundle will create a big file which contains the translated ECM5 of angular plus my app.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Test</title>
<script src="bundle.js"></script>
</head>
<body>
<mainapp>
</mainapp>
</body>
</html>
The angular app is defined as follows:
import {Component, View, bootstrap} from 'angular2/core';
export class mainComponent {
static get annotations() {
return [
new Component({
selector: 'mainapp'
}),
new View({
template: `<div>Hello!</div>`
})
];
}
}
bootstrap(mainComponent);
However when I load it, I keep on getting an error
"selector 'mainapp' did not match any element"
The problem was that I was including the bundle.js before the mainapp component was defined in the HTML. This fixed the issue.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Test</title>
</head>
<body>
<mainapp>
</mainapp>
<script src="bundle.js"></script>
</body>
</html>
Update:
<script src="bundle.js" defer></script>
Seems to also solve the problem regardless of the order of the elements.
Related
I am complete beginner in JavaScript and web-dev. Most of my programming experience comes from Python and so I am very comfortable with the way python files can be arranged in different folders as modules and can play sort of a plug and play role. So far I am unable to discover that flexibility in JS.
Here is my current project structure:
-root
|-index.html
|-app.js
|-modules
|-test.js
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
My app.js:
let hello = Hello()
Finally my modules/test.js:
class Hello(){
constructor(){
console.log('Hello World');
}
}
When I run it I get the error message: Uncaught ReferenceError: Hello is not defined at app.js:1:1
What do I do to achieve my desired results? Regards.
Have you tried:
modules/test.js:
export class Hello(){
constructor(){
console.log('Hello World');
}
}
app.js:
import { Hello } from './modules'
let hello = new Hello()
Or, if you use the expor default, do not need the curly braces, as you do not need to secify what you are exporting. Like so:
modules/test.js:
export default class Hello(){
constructor(){
console.log('Hello World');
}
}
app.js:
import Hello from './modules'
let hello = new Hello()
First of all, in your index.html, when you are working with modules, you should add the type of the script
<script type="module"></script>
In the modules, after you do some code and logic, you export your class with the export declaration at the end, like so:
export default Hello;
in your app.js, when you want to use some module, you import it like so:
import Hello from "./modules/test.js";
And then you would be able to use the imported data. You can use as many imports as you want.
Here is a working example with the minor tweaks on your code:
CodeSanbox demo
So both the answers provided by rustyBucketBay and Yavor are correct but incomplete. The working solution is doing what each of the two suggested but together. Here is what eventually works:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project</title>
</head>
<body>
<script type="module" src="app.js"></script>
</body>
</html>
modules/test.js:
export default class Hello{
constructor(){
console.log('Hello World');
}
}
app.js:
import Hello from 'modules/test.js'
let hello = new Hello()
You need to export the function from test.js and import it in app.js
I am trying to add a vuejs frontend to my java backend (spring boot) without using node. I created a simple index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello Test!</title>
</head>
<body>
<h1>test test</h1>
<div id="app"></div>
<script type="module" src="main.js"></script>
</body>
</html>
which is supposed to import the following main.js (located in the same folder) as module:
import Vue from './vue.js'
import {
Navbar
} from './component/navbar.js'
import {
MainTemplate
} from './templates/main-template.js'
new Vue({
el: '#app',
components: {
'navbar': Navbar
},
template: MainTemplate
})
When accessing localhost in either chrome or firefox, I get the header 'test test', but an error saying 'Failed to load resource: the server responded with a status of 404 ()' regarding the main.js.
I have found different tutorials stating that this should be working. Trying out different ways of importing the main.js didn't change the error.
As I really need to get this to work I would really appreciate any tips on that! Thanks in advance!
Can someone explain the WHY of how Import Vue from 'vue' breaks the rendering of the template? I've seen other answers on how to work around this, but none of them have gone into the details of why it breaks.
I ran npm init and npm install vue, not using the CLI.
I created an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<first-task></first-task>
{{msg}}
</div>
<script src="app.js"></script>
</body>
</html>
and an app.js looking like:
import Vue from 'vue/dist/vue.js'; //Remove to fix
Vue.component('first-task', {
template: '<p>Hello World!</p>'
});
var app = new Vue({
el: '#app',
data: {
msg: "Hello World"
}
});
Removing the import, it renders fine, but it's unclear to me why this happens. My only guesses are that the default new Vue doesn't reference the full build, or that the implicit Render() doesn't get called, but I'm unsure of how to look into this more.
import statements may only appear in a javascript module
<script type="module" src="app.js"></script>
Should fix it, though you would not need to import Vue with your current code anyway, as you have seen
I added my vue.js in the header but it has an error that says element root can't be found, because I have a div with an id of root.
But when I add it on the body everything works fine.
This is my js code.
new Vue({
el: '#root'
});
And this is my html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#2.1.3/dist/vue.js"></script>
</head>
<body>
<div id="root">
<task-list>
</task-list>
</div>
</body>
</html>
you need to import your vue js library at the bottom part of your body because your #app HTML container needs to be loaded first before it can be analysed by vue js.
<body>
<div id="app">
</div>
<script src="vue.js"></script>
</body>
Hi I didn't see any included js(except for vue package) in your html. But I think the solution is to place your script in footer.
Also if that doesnt work place it inside window.onload
window.onload = function() {
new Vue({
el: '#root'
});
};
you could also use the defer attribute on your script, this will make sure the entire page is loaded before processing the Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#2.1.3/dist/vue.js" defer ></script>
<!-- Assuming that you saved your vue code in a seperate file called vue.js -->
<script src="vue.js" defer ></script>
</head>
<body>
<div id="root">
<task-list>
</task-list>
</div>
</body>
</html>
So I'm learning angular and I have a very basic html with a js script and I keep getting 'angular is undefined' on line 1 of App.js. I have all of the angular scripts and my script in a Scripts folder. What am I missing?
index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="Scripts/angular-min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/App.js"></script>
</body>
</html>
App.js
var appMainModule = angular.module('appMain', []);
appMainModule.controller("homePageViewModel", function($scope, $http, $location){
$scope.Heading = "This is the heading";
$scope.SayHello = function () {
alert('Hello');
}
});
Folder structure in VS:
your script is wrongly named it should be this
<script src="Scripts/angular.min.js"></script>
instead of this:
<script src="Scripts/angular-min.js"></script>
Look at your file name and look at your script name.
Given that I've copied your code into a codepen; and the only changes I've made are to reference the CDNJS versions of Angular and Angular Route; and I'm not seeing an issue.
Your issue lies elsewhere.
Specifically, if you're building this project, your output folders need the same relative path to Scripts. In other words, your directory structure expects the following to be true:
- index.html
|
- Scripts
|
- app.js
- angular-min.js
- angular-route.js
Another issue could be that you don't have Copy to output Directory=true or don't have the angular-min.js set as Content (something to be copied to the output folder).
Here's the codepen changes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
</body>
</html>
you need to set type="text/javascript" in your angular script definitions.
try
<script type="text/javascript" src="Scripts/angular-min.js"></script>
<script type="text/javascript" src="Scripts/angular-route.min.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
I faced the same issue about angular being undefined. In my code type="text/javascript" attribute was missing. After I added this attribute, it worked fine. Try this also if the solutions above do not work.