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
Related
I'm trying to use some protocol buffer code generated with protoc for javascript. I got some javascript files that i can import (after choosing the commonjs style) into other javascript files.
I've installed an npm dependency called google-protobuf and am able to bundle all javascript with webpack. When i try to run the page in firefox i get no errors related to this, chrome however gives me:
Invalid regular expression: /[Ö‘-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]/: Range out of order in character class
I've tried adding some additional tags to <meta> and <script> and they don't work. I've never seen an error like this and don't know where to start looking.
The end goal is, i'd like all my npm i and all my import { Foo } from 'foo.js' to work on a web page without errors.
What webpack injected using HTMLWebpackPlugin is:
<script type="text/javascript" src="frontseat.bundle.js"></script>
Originally there are no <meta> tags, i just added the one under head so it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...
Try to update your regex to this regex below:
[Ö‘\-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]
And your meta tag is like this? <meta charset="utf-8"> with this charset
I got the same issue as you have.I cannot upgrade google-protobuf over than 3.6.1. Only version 3.6.1 works for me before. All versions later 3.6.1 raise the same errors in my project.
However, the <meta charset="utf-8"> helps now on my side. I create a minimum sample and hope it can give you some idea.
google-protobuf version: 3.11.2
index.js
import * as pb from 'google-protobuf';
console.log(pb);
build command
npx webpack index.js -o bundle.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="bundle.js"></script>
</head>
</html>
Then, you should be able to see something like this on chrome devtools console without the error.
{Map: ƒ, Message: ƒ, BinaryReader: ƒ, BinaryWriter: ƒ, ExtensionFieldInfo: ƒ, …}
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
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.
The reason to have src and dist folders is pretty clear: we change source code commit it to repository and use compiled dist files for production.
But what could you recommend for development? We still want to keep src clean from compiled file and make it very fast to review the changes.
Before we just transpiled SAAS into CSS and put it into source and keep JS files as they are(without compiling in one file or coping them to dist). And now we decided to rethink the concept.
we are doing web development, but I think question is more broad.
If I well understood, you are looking for a development architecture/workflow to directly serve you sources to the browser (and use DevTools edition features btw). In fact, there are 2 things to do to achieve this.
1) For compiled/transpiled languages (SAAS, LESS, TypeScript, ...) and unsupported languages (ES6, ES7), you will need to compile/transpile them on the client side. Tools like LESS.js, typescript.js, BabelJS are great to do that. I don't know any SAAS compiler implementation in Javascript.
2) Then, you need 2 different html indexes. For example index.hml for production and dev.html for development.
index.html with bundled (dist) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title</title>
<link rel="stylesheet" type="text/css" href="dist/app.bundle.css">
<script type="text/javascript" src="dist/app.bundle.js"></script>
</head>
<body>
...
</body>
</html>
dev.html with all sources (src) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title (Dev)</title>
<link rel="stylesheet/less" type="text/css" href="src/file1.less" />
<script type="text/javascript" src="src/file1.js"></script>
<script type="text/javascript" src="src/file2.js"></script>
<script type="text/javascript" src="src/file3.js"></script>
<script type="text/javascript" src="lib/less.js"></script>
</head>
<body>
...
</body>
</html>
This way, developers access the web app using, let's say http://localhost/dev.html and can enjoy all the goodness to have sources right in the browser. Without taking care of the compilation.
To apply such an architecture you may need to adapt client and/or server code and also build tools to work in both mode (prod and dev).
Hope I helped.