I have a simple angular app with a directory structure that looks like the following:
-lpbm
-shared
- js
- css
-public
app.js
index.html
I run http-server within the lpbm folder which creates http://localhost:8080
I then try to access http://localhost:8080/public/index.html but i get a blank page and the following error in my terminal window: "GET /public/index.html" Error (404): "not found"
This was working before, and something random must be stopping it from working correctly, as the directory and url structure are correct. I've tried removing all my custom files other than my index.html and app.js which are below
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cheapest Fares</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../shared/css/bootstrap-cerulean.css">
<link rel="stylesheet" href="../shared/css/app.css">
<link rel="stylesheet" href="../shared/css/lpbm.css">
<script src="../shared/js/angular.js"></script>
<script src="../shared/js/angular-messages.js"></script>
<script src="../shared/js/angular-message-format.js"></script>
<script src="../shared/js/angular-route.js"></script>
<script src="../shared/js/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body class="container" ng-app="app" ng-strict-di ng-controller="AppController as app">
<h1>Our cheapest fares from London</h1>
<div class="row">
<ng-view autoscroll></ng-view>
</div>
</body>
</html>
app.js:
angular.module('app', ['ngMessages', 'ngMessageFormat', 'ngRoute', 'ngAnimate'])
.controller('AppController', function() {
console.log('working?');
})
Is there any obvious reason this is not working? if i open up a test angular app and do the same http-server process it works, suggesting it is something wrong with my app.js or index.html but i can't spot what, i've literally removed everything and it still refuses to load.
I've moved your code to Plunker and removed additional dependecies and all seems to be working fine.
I would sugest to do the same on your side as well. If this is not an issue, try to look on the server side of the app.
Also the error
"GET /public/index.html" Error (404): "not found"
you've mentioned might be sugesting this.
Plunker link: http://plnkr.co/edit/MLkrJdzyd7mPEHyYe1v6?p=preview
The reason your files are accessible at http://localhost:8080/ and not http://localhost:8080/public/ is because you are using a virtual mount path. In a framework like express, for example, that is done like this:
app.use('/', express.static('public'));
This determines what parts of your server are accessible client-side. The first argument ('/') sets the location that clients navigate to in order to access the files at the location in the second argument ('public'). The reason your /shared folder was not accessible until you place it in the /public directory is because it was outside the scope of what was being exposed to the client.
If you aren't using express, the code may look slightly different, but this is essentially what is happening. Somehow this line of code was uncommented or added to your server.
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 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 have followed the simple step-by-step instructions in the Basic Aurelia Project Setup guide. But starting the index.html in a browser results in the config-esnext.js file throwing: "JavaScript runtime error: 'System' is undefined". This is on the first line: System.config({...
The browser's output window has this to say:
"Could not find file 'C:\Users\Bruce\Dropbox\Projects Aurelia\Basic Aurelia Setup\scripts\system.js.map'..Unhandled exception at line 1, column 1 in http://localhost:56477/scripts/config-esnext.js"
Is there some "map" configuration missing from the simple instructions? I am running the project from Visual Studio 2015, configured for Esnext.
The comments to the original question have some good discussion going. But for the sake of providing an "answer" for others to find, here goes.
Without seeing your index.html file, I can't determine exactly what is going on. But the error you're seeing is happening because System isn't defined on the window. This will happen if you haven't loaded up System yet. You need to make sure that your index.html file loads up SystemJS first, then you load up your config file.
You can see in the skeleton project's index.html found here, that system.js is loaded before we bring in the configuration file. Here is an example of a proper index.html using SystemJS.
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<span>Loading...</span>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
As an alternative, the CLI helps get a skeleton project up quickly (it doesn't include a navigation example, it is a bare-bones skeleton). It uses RequireJS however, but we have plans to support other module loaders (such as SystemJS) down the road.
Issue updated. Please check the edit
I want to use the debugger included in Webstorm to run my project. I'm
using Angular2 and TypeScript. I need to place breakpoints into my typescript files.
Basically, my index.html just imports some .js files and starts my
app by calling a function named bootstrap defined in another .js file (transpiled from a .ts file !).
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title></title>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="build/core/system.config.js"></script>
<script src="build/core/moduleLoader.js"></script>
<script src="build/core/bootstrap.js"></script>
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
<script>
bootstrap();
</script>
</head>
<body>
<app-view>Loading...</app-view>
</body>
</html>
bootstrap is defined as follow :
const bootstrap:()=>Promise<void>= async function() {
await ModuleLoader.loadAll();
System.import('core/app').then(null, console.error.bind(console));
};
window.bootstrap = bootstrap;
When I run my index.html in debug mode, an error is thrown,
bootstrap() is not defined.
When I run the app inside a browser, it works well. Have I missed some configuration ?
I've installed the jetbrains plugin (I'm using chrome) and configured the port. I can see the "Loading..." on my browser.
EDIT
Maybe a usefull information :
I'm using node. Into my main server-side script, I set up express and do some configuration. When I'm trying to debugging, my server is listening but on another port (8080). The debugger uses the port 63343.
You can start a JavaScript debug session for any URL - you just need to specify it in the JavaScript run configuration. If you app is running on localhost:8080, then use that URL in the JavaScript debug configuration.
Another important point: make sure you generate source maps when compiling your TypeScript code.