In Angular 6 app, I have a custom JavaScript file which I would like to load after minified bundles created by ng build --prod.
The desired output
<!doctype html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="runtime.06daa30a2963fa413676.js"></script>
<script src="polyfills.f6ae3e8b63939c618130.js"></script>
<script src="scripts.3093c8de343a90aee8a5.js"></script>
<script src="main.2f79061174841f85d990.js"></script>
<script src="customScript.js"></script>
</body>
</html>
The problem
By default, JavaScript bundles are added at the end of the <body> tag, which makes the customScript.js loads before them.
Is it possible to set in which line of the index.html Angular CLI should add script bundles created using Angular CLI or at least put them before the custom script?
Related
I have got 2 files: index.html and index.js. I am using them to try and do autobahn communication. Autobahn works, but 'When' doesn't work.
I have used bower to download and install Autobahn, and then manually included autobahn.js from withing the html. I have done the same for When, but an error appears in the When library.
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Autobahn</title>
</head>
<body>
<p> Fancy paragraph! </p>
<!--Bower-->
<script src="./bower_components/module/module.js"></script>
<script src="./bower_components/autobahn/autobahn/autobahn.min.js"></script>
<script src="./bower_components/when/when.js"></script>
<!--Node.js-->
<!--<script src="./node_modules/autobahn/lib/autobahn.js"></script>-->
<!--Browserify-->
<!--<script src="./bundle.js"></script>-->
<!--The actual main script file-->
<script type="text/javascript" src="index.js"></script>
</body>
</html>
When I open index.html in a web browser I get the following:
Found the answer. The deal was to install the libraries using npm. After that in the node-modules folder there are 2 folders containing the libs:
1) autobahn-browser
2) when
After including them like this it worked like a charm:
this is my base html script
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head><title>React.js on Repl.it</title>
<link rel="stylesheet" href="/app.css">
</head>
<body>
<div id="asdf"></div>
<script src="/bundle.js"></script>
</body>
</html>
and it calls to the app.js, how do i make it call to a different file such as otherapp.js
Bundle.js calls to app.js
What you see in the HTML file is bundle.js which is the artifact that webpack creates.
If you use Create React App, open index.js. This file basically renders App to an element in your dom. In other words, it bootstraps your application. You can change App to OtherApp if you wish.
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!
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">
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.