I'm having trouble with some components running in MS IE 10/11.
And according to this arcticle from Angular.io (https://angular.io/docs/ts/latest/guide/browser-support.html) I need to import an external script.
<script src="node_modules/core-js/client/shim.min.js"></script>
Which I placed in my index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
...
<script src="../node_modules/core-js/client/shim.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
But when i build for production it doesn't add it to the build, it just leaves it there ending in a script not found error when running the application.
I'm probably missing something but I don't know what.
Thanks in advance!
In your .angular-cli.json file, locate (or create) the "scripts" key in the definition for your app, and add an entry in the array for the shim.js script, e.g.:
"scripts": [
"../node_modules/core-js/client/shim.min.js"
],
Restart your ng serve or rebuild your bundles and you should be good to go.
Hope this helps!
You need to add CSS files and JS files in the angular-cli.json file. If you are not using angular-cli in this case you need to configure in the build tool which you are using
Related
I am not completely sure if this is wrong or not, but when I generate prod build with angular:
"ng build --outputPath=.. --base-href="./path" --prod"
the static resources are still fetch from ./ root like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ask</title>
<base href="./path">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js">
</script><script type="text/javascript" src="es2015-polyfills.358ed1827c991dd2afb0.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.d1ac828f1974a06a0fe5.js"></script>
</body>
</html>
Shouldn't it be prefixed with base-href?
href="path/styles.3ff695c00d717f2d2a11.css"
src="path/runtime.a5dd35324ddfd942bef1.js
I ended up here searching for a solution where we have a fixed
<base href="/APP-NAME">
in the index file. The statement of JanS "That way the browser does the prefixing when fetching the resources" triggered me that something was wrong, because the styles.css was fetched from the url without the "/APP-NAME" added, from https://localhost:43468/styles.css instead of https://localhost:43468/APP-NAME/styles.css.
Now that I write it down it seems pretty obvious, we needed to add the slash at the end:
<base href="/APP-NAME/">
The misleading issue here was that it worked when we started our .NET Core Angular application from Visual Studio 2017, but didn't work anymore when using Visual Studio 2019. It appeared that starting the app with Visual Studio 2017 on IIS Express launches the app both on
https://localhost:43468
and
https://localhost:43468/APP-NAME
Therefore it worked to retrieve the static resources from the 'wrong' url. They seem to have fixed the issue of starting 2 ulr's in IIS Express.
The --base-href "xyz" (notice the missing =) option should generate a <base href="xyz"> in the <head> of your index.html.
That way the browser does the prefixing when fetching the resources.
You should remove the equal sign and quotes from the command.
ng build --outputPath=.. --base-href ./path --prod
I'm new to Angular and recently I started working on a simple personal SPA project. It was created using the angular cli, and the folder structure is nothing special:
- myApp
----e2e
----node_modules
----src
--------app
------------ main app module with two .ts components and html for each of them
...
Everything works fine when I use ng serve: I can see my components on localhost:4200 and Angular's functionality works as a charm.
However, when I run ng build and from inside the newly created dist folder I open index.html, I can't see my components at all.
The index.html file is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RoutingDemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<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="main.js"></script></body>
</html>
I get no errors in the console for missing files and all of the JS and CSS files are being successfully read by the index.html.
Can someone explain why am I not seeing the components?
So you need to serve your page, easiest way is to do npm i -g http-server and the run http-server from command lint in your dist folder, then you will be able to see your page
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 installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>
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.