After building a project with Angular CLI, I keep getting 404:Cannot GET with my inline, styles bundle.js, and main bundle.js.
At the bottom of my index.html:
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
The files are in the same folder as index.html, with all of the angular 2 goodies. When I copy the text into the corresponding script tags, it works just fine.
Thanks #Johan Blomgren for the answer. Adding this fixed it:
<base href="index.html">
Related
I created 2 different Angular projects in the following way:
$ ng new comp-a
$ ng new comp-b
Then, I modified each of them to look different and with each of them I ran the following command to build the corresponding HTML file with the necessary Javascript and CSS files:
$ ng build --base-href "./"
I noticed that on each index.html file generated on each project there are referenced the following Javascript files:
- runtime.js
- polyfills.js
- styles.js
- vendor.js
- main.js
What I want to do:
Create one common HTML file referencing the common files and renaming the non-common files to the component name, something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing Angular Components</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<comp-a></comp-a>
<comp-b></comp-b>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="comp-a.js"></script>
<script type="text/javascript" src="comp-b.js"></script>
</body>
</html>
Requirements of my goal:
I need to generate one Javascript file per each component.
I need to use them out of an Angular project like in a normal HTML page like on the example above. Of course I can add the other common Javascript files like on the example above.
Is this possible?
I did a try and didn't work. Maybe, if that's possible, I didn't in the right way. I have to say that I don't have too much experience with Angular.
Thanks!
Two Angular Components in a single Angular Application is what you need.
To demonstrate, lets create a new Angular Application:
ng new my-app
Go to Angular Application folder:
cd my-app
Notice the index.html file that has just been created. Common HTML that you mentioned above can reside in this index.html file. Just preserve <app-root></app-root> tags and everything else can be replaced as you wish.
Then, create two Angular Components:
ng generate component comp1
ng generate component comp2
Edit inside app.component.html file so that this Bootstrap Component would wrap these two recently created Angular Components:
app.component.html:
<app-comp1></app-comp1>
<app-comp2></app-comp2>
Test your Angular Application:
ng serve --open
You should be seeing something like this:
comp1 works! comp2 works!
I have only been learning React in a week so I am new to it and I am trying to write a simple todo app.
Originally I wrote all of the components in one file and loaded that file into the HTML file and it worked great. Now I am refactoring and trying to split the components into different files.
My full code is on my Github https://github.com/yasgreen93/todolist-react on the extracting-files branch.
I have split up each component into different files and have an linked them in script tags into my HTML. This is what my HTML file looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel" src="scripts/components/TodoListApp.js"> </script>
<script type="text/babel" src="scripts/components/CompleteTodo.js"></script>
<script type="text/babel" src="scripts/components/TodoList.js"></script>
<script type="text/babel" src="scripts/components/SingleTodo.js"></script>
<script type="text/babel" src="scripts/components/AddTodo.js"></script>
<script type="text/babel" src="scripts/components/CompleteTodoButton.js"></script>
<script type="text/babel">
ReactDOM.render(
<TodoListApp url="/api/todos" updateUrl="/api/todos/update" pollInterval={2000}/>,
document.getElementById('container')
);
</script>
</body>
</html>
In the console, I always get the error message Uncaught ReferenceError: TodoListApp is not defined. I have tried loading them in different orders with no success. I have also watched many videos where they do very similar approaches without using webpack and it works for them. I would like to get this working first without using webpack and then move on to learning that.
Can anyone see where I am going wrong?
You have to add your components to a global window variable in order to use them in html script tag. Like window.TodoListApp =.... var declaration is relative to a file in which you declare it.
But it is considered to be a bad practice to expose parts of you code to a global scope and to transpile JSX in the browser. Instead you should consider to use some building system like Webpack.
This way you would be able to use es2015 import syntax to import components from one file to another, bundle everything in one file and much more additional benefits like code minification, sourcemaps, livereload etc.
Setting up React for ES6 with Webpack and Babel
Using React with Webpack Tutorial
There's an app I have been building, and as it grows, so does the <script> tag grows in the index.html
index.html
<html>
<head></head>
<body>
<script src="angular.js"></script>
<script src="a.js"></script>
<script src="b.js"></script>
...
</body>
</html>
Is it possible to include all of these <script> into an external html and then load it into index.html to use it? Like so.
index.html
<html>
<head></head>
<body>
<script src="angular.js"></script>
[**Include jsInclude.html here**]
</body>
</html>
jsIncude.html
<script src="a.js"></script>
<script src="b.js"></script>
...
If so, what are some of the proper methods of performing such a task?
I have read online that I can use Grunt or RequireJS to load JS files dynamically.
However, I wish to avoid lazy loading, I want to load all of the JS files at once on startup.
Will using RequireJS or Grunt able to achieve this? Or is there another way to achieve this?
You could use webpack or browserify to compile all of your JS files into 1 JS file.
https://webpack.github.io/
http://browserify.org/
Grunt is just a task runner, it won't be able to do this task on its own. You can set up a task in Grunt to run browserify/webpack
Yes, it should be that way only. Load app.js first and then follow other files that include controllers, factories and so on in your HTML (index.html)
I am new to JS and I've tried many different ways to try and get this to work but to no avail. (I looked at the other posts but their solution didnt work for me)
My project folder is organized as follows:
+-+ project
+-- css
+-+ js
| +-- index_js.js
+-- index.html
I have got it to work with the index_js.js file outside of the js folder by assigning the script tag src to src="index_js.js". But when I try to assign it to src="../js/index_js.js" while it is in the js folder it doesn't work and won't give me an alert. I have also tried to assign src="/js/index_js.js" but it still does not work.
My index.html is:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="../js/index_js.js"></script>
</body>
</html>
My index_js.js is:
alert("inside of the js folder");
That needs to be:
<script type="text/javascript" src="js/index_js.js"></script>
Or even:
<script type="text/javascript" src="./js/index_js.js"></script>
By specifying ../js, you're searching for a js directory which is on the same level as your project directory.
Your index.html should be like this :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="js/index_js.js"></script>
</body>
</html>
Using
src="../js/index_js.js"
in the code will look for the "index_js.js" the parent folder of "project".
../ refers to up one level.
In the given code, you are at /project/index.html
When you do ../ you are moving to the parent folder i.e /root/project/
Now, when you give
src="../js/index_js.js"
it looks for the js file at:
/root/js/index_js.js
The correct code would be:
<body>
<script type="text/javascript" src="./js/index_js.js"></script>
</body>
or
<body>
<script type="text/javascript" src="js/index_js.js"></script>
</body>
By expressing "../" you will quit your current project folder an move to the root folder. Your script then tries to find the subfolder "js" and the file in a directory that does not exist. Your correct code would be:
<script type="text/javascript" src="/js/index_js.js"></script>
Since, you have the js folder on the same directory as your index.html file, you don't need to use any backslashes.
<script type="text/javascript" src="js/index_js.js"></script>
Now make sure;
You have js folder and index.html file both in the same
directory.
The folder name js is as you have mentioned.
The file name is correctly placed i.e index_js.js and it is inside the js folder.
I'm just starting out with typescript. I wanted to try working with this mankala example from within Visual Studio. Eventually I got it working but I had to include all of the .js files that were generated from .ts files in my default.htm file. The .htm file in the example only included one file - the one that contained the entry point. I'm guessing that there's something set wrong in my configuration that I'm compensating for by the multiple .js includes. Can anyone tell me what I'm doing wrong?
More details follow...
Here's what the original .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
And this is what my modified .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="Driver.js"></script>
<script type="text/javascript" src="Features.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="Position.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
To create the project I created a default ( not quite empty ) typescript project, deleted the automatically created app.ts file from that project and then added 6 new .ts files with the same names as the .ts files in the example. Then I copied the .ts files from the example over the new .ts files that were created by VS. I replaced the automatically generated app.css file with the play.css file from the example and replaced the contents of the automatically generated default.htm file with the contents of the play.htm from the sample. This didn't run but after I added the additional .js files to default.htm it did.
I'm using Visual Studio 2012 Express for the Web and the typescript 0.8.3.1 VS extension. I'm using the Chrome browser on windows7.
The difference here is how the compiler got invoked.
When you build the Mankala sample, assuming you read the README, you ran
tsc Driver.ts -out game.js
The -out flag tells the compiler to concatenate the compilation into one big .js file. However, the default behavior in Visual Studio projects is to build side-by-side, i.e. base.ts creates base.js, Features.ts creates Features.js, etc.
You can fix your project file by adding a <TypeScriptOutFile>game.js</TypeScriptOutFile> element to the project in the same <PropertyGroup> as the other TypeScript settings (near line 57 in a default new project). Be sure to add to both the Debug and Release PropertyGroup elements if you want the same behavior in both compilation settings, or create a new non-conditional PropertyGroup.