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
Related
But the npm run dev server shows the default counter app that is built. But when i build plain html css javascript with npm run build in dist folder. then run the index.html by clicking it, it shows blank page. Event though the index.html has this content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte</title>
<script type="module" crossorigin src="/assets/index-98081fa1.js"></script>
<link rel="stylesheet" href="/assets/index-65be3931.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
But npm run dev server has the counter app that you get if you initialize with npm init vite
then
$ npm install
$ npm run dev
this is in svelte not sveltekit.
You can't "run" an HTML file by clicking it.
If you do not have it served by an actual HTTP server, the scripts/other assets will not be allowed to load. The command vite preview should do just that. (Maybe this is already defined as a script in your package.json, then you could execute npm run preview.)
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 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
I created a project using the angular2 cli. I also created a separate node js application that acts as the backend. I would like to move my front-end application into the node app, so that I can run both apps using node server.js. My server.js looks like this:
app.use(express.static(__dirname + '/app'));
...
app.get('*', function (req, res) {
res.sendfile('./app/src/index.html');
});
app.listen(8000);
My index.html from the angular2 cli looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
When I now run node server.js and browse to http://localhost:8000/ then I can see the "Loading..." message, but nothing appears after and there are no errors in the console either.
What you should really do is create a prod build with the angular cli in some folder (ng build --prod -o /somefolder) (o is for output), and than have node statically server that folder with app.use(express.static...). Than you can add one route to just return the index.html page so your url will not contain the whole folder path (ex: localhost/somefolder/index.html) (this path is ugly).
This is the best way because the angular app is still separate and not mixed anywhere with the nodejs logic.