I am building a web app with Angular 2 framework and I want to use an external template. Trying to convert it into an angular2 SPA.
I need to run some scripts (custom.js). All CSS and JavaScript file are added in Index.html.
Everything is working fine except external js. JavaScripts are not working properly. But the CSS files are working. Material components and modals other JavaScript functionality nothing is working inside angular component file.
In your .angular-cli.json file you need to add the external js file under your app's scripts property.
{
// other app config
apps:[
{
// Your app config
"scripts":[
"path/to/your/custom.js"
]
}
]
}
If you would like to use the script in a component, you should declare it before the component class.
declare var customLibraryName: any;
See the Angular Cli Wiki for more details.
thanks #JosephDragovich for your fast reply. To be honest, I am a fresher in Javascript and angular 2. Following your suggestion, I updated my code as below:
javaScript not working
angular-cli.json
"scripts": [
"./src/assets/Js/jquery-2.2.4.min.js",
"./src/assets/Js/bootstrap.min.js",
"./src/assets/Js/jquery-ui.min.js",
"./src/assets/Js/jquery-plugin-collection.js",
"./src/assets/Js/custom.js"
],
my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LocumMedApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body class="has-side-panel side-panel-right fullwidth-page side-push-panel">
<app-root></app-root>
</body>
</html>
place script in index.html also using <script> tag.
Related
I am using vue cli within wordpress. Wordpress has it's own way of adding scripts to the DOM. Because of this I do not need vue cli to add the script the final index.html file. When I run npm run build I get something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>my-app</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
I want when I run build to not have the tags and css injected. What's happening is when the html file is run I get a bunch of 404 errors. So it would be great if there is a way to stop the injection completely but still build the actual bundle files.
You can do that by disabling injection in the HTML Webpack Plugin options. Add the following to your vue.config.js file.
chainWebpack: (config) => {
config.plugin('html').tap((args) => {
args[0].inject = false
return args
})
}
I need to run a Svelte app and be able to execute it without a server.
With other frameworks this is possible as it is just javascript but I can't find a way to just click my index.html and run my app built with Svelte
I need to run a Svelte app and be able to execute it without a server. With other frameworks this is possible as it is just javascript but I can't find a way to just click my index.html and run my app built with Svelte
I'll break it down into two components, building and executing the svelte app.
Firstly, you require a computer to build the Svelte app as it executes rollup (and runs a node server) to perform the compilation, but this isn't what the OP is asking for...
To address the execution of the Svelte app, you can execute this without a running server.
Please see attached
You are given a npm run build from the Svelte create-svelte app generate command which outputs a public.html.
This can be used to host the file say, on Surge.sh, however to make this "local file friendly", You will need to edit the outputting html to the following (i.e. remove base /).
original source index.html
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
Final html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='favicon.png'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
<script defer src='build/bundle.js'></script>
</head>
<body>
</body>
</html>
If you're using Svelte (not SvelteKit) and has a single page only. You can use https://github.com/richardtallent/vite-plugin-singlefile to merge everything into one file on build, and it will then work through file://
None of the resources I've read about Vue attempt to explain how a Vue application is launched.
There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The comment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.
In order to run uncss to remove unused css rules I need to generate a single page containing all the the css rules used by the angular templates. I think Rendertron might fit this usecase, but was wondering whether it's possible to do the same with the Angular CLI?
For example if we run ng build angular will generate a dist/index.html file with the custom element selectors in the dist/index.html file. However this cannot be targeted with uncss because the template has not been rendered. It is still represented by for example <app-root>, thus uncss cannot see the css rules applied by the <app-root> template.
Yes, by default all the compiled CSS and js files will be generated into dist folder via angular cli.If required, you can configure this using angular-cli.json present in your project. As you can see in below sample of index.html, it contains the path for all the css and JS files. Usually it creates one css file, as it's good to load entire css in one request.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My APP</title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="styles.3e523e6b74c68b0940ab.bundle.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.5d1afc94d5922f9e85f3.bundle.js"></script>
<script type="text/javascript" src="polyfills.45da1a3263e1321501bf.bundle.js"></script>
<script type="text/javascript" src="scripts.4d46a754e6ffe4a0ff23.bundle.js"></script>
<script type="text/javascript" src="main.cec0d2d86e8c98d02873.bundle.js"></script>
</body>
</html>
You can also instruct cli to separate any vendor specific CSS/js into separate files. Follow the link to know more about configuration.
Since, you would be specifying all your css and js in uncss, so you can go with dist folder content.
I've installed Angular for trying this out. I have node.js installed with npm, and I installed the #angular/cli package globally. Then I did: ng new testproject. I now have all the files installed. I did npm install and npm start and everything worked, even the app said so! (LOL).
Now, when I look into the files and see the index.html file in my ./src, there is not a lot of stuff going on.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testproject</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>
<app-root>Loading...</app-root>
</body>
</html>
This feels strange. Angular is made with JavaScript (compiled Typescript). But when I look at the developer tools in Google Chrome, I can see that there are actually script tags inside my html.
Can someone explain me how these files got here? What is happening on the server-side, and which files make this happen? Thank you.
The <base href="/"> is the reference your looking for. If you build(ng build --prod), it will reference all the default complied scripts to this path, in the default case being root of your application.