I have an index html file and i need to inject some configuration based scrips in production/staging environments.
Workspace index.html
<body>
<app-root></app-root>
</body>
Generated index.html in dist/my-app through ng build
<body>
<app-root></app-root>
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script src="styles-es5.js" nomodule defer></script>
<script src="vendor-es5.js" nomodule defer></script>
<script src="main-es5.js" nomodule defer></script>
</body>
My Requirement:
<body>
<app-root></app-root>
<script src="script-staging.js"></script>
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script src="styles-es5.js" nomodule defer></script>
<script src="vendor-es5.js" nomodule defer></script>
<script src="main-es5.js" nomodule defer></script>
</body>
I am using Angular 8 + Webpack with CLI. I've included custom-webpack.configuration.js pointed from angular.json. I'm trying to achieve this using HTMLWebpackPlugin.
Be informed that dynamic script loading is optional, means I will or will not inject that script.js in generated index.html that would be decided during build time. So injection of script in generated html has to be done during build time which I should happen through plugin of webpack.
Any help would be appreciated, struggling for some days.
You can point full path from ./scr/script-staging.js in angular.json in script array of your app object.
Here shown:-
"styles": [
"styles.scss"
],
// like this
"scripts": [
"./src/script-staging.js"
]
After adding this line of code you should build your app again "ng build"/"ng build --prod" and hopefully if everything gone correct then it should add you file to index.html.
Related
I have done the installation steps. I tried every way but I can't run it in HTML file. Even if I throw the "gsap" file in the "node_modules" section and call it with the <script> tag, it doesn't work.
This is how I call "all.js" in HTML file. Tried all other ways too.
<script src="src/all.js"></script>
<script src="app.js"></script>
I want to use all plugins locally in my project.
<html>
<body>
<h1>Some content</h1>
<script src="path-to-my-scripts/gsap.min.js"></script>
<script src="path-to-my-scripts/ScrollTrigger.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Okay, I solved it. It is necessary to write the "min.js" files, not the "all.js" file directly.
getting error while integrating bundle.js, and i used "script-loader" in but no use.
libraries used
vuejs, vuex, ssr, vuetify, webpack.js
Error:
build.js:1 Uncaught ReferenceError: module is not defined
at build.js:1 .
change script from
<script src="/dist/build.js"></script>
to
<script nomodule src="/dist/build.js"></script>
add nomodule attribute in script tag, its happen because we used libraryTarget: 'commonjs2' in webpack config
finally my index.html will be like
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<script nomodule src="/dist/build.js"></script>
</body>
</html>
Note:
do not make any changes in src attribute
I'm trying to deploy a Vue app in production. After executing the command "npm run build" I copied "index.html" and "dist" into my apache root directory. When I access to my website, the next mistake appears:
external "vue-axios":1 Uncaught ReferenceError: vue is not defined
Do you know if I have to do an additional step before deploying my app?
PX: This app works properly by using "npm run dev"
So it looks like the reason you are getting Uncaught ReferenceError: vue is not defined is likely due to the fact that you are requiring your source code bundle before you are requiring Vue.js. (Assuming you don't have vue bundled into your source)
So when the browser hits <script src="/dist/build.js"></script>, any code that relies on vue is going to fail.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>soporte_7x24</title> <link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/…; crossorigin="anonymous"> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> <script src="cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/…;"/> </body> </html>
Change the order of <script src="/dist/build.js"></script> so that it is after <script src="cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/…;"/>
what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.
I have a single HTML file in which I load a bunch of script files, like so:
index.html
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<script src="bower_components/angular-morris-chart/src/angular-morris-chart.min.js"></script>
<script src="jquery.js"></script>
I was wondering maybe there is a way to "require" all these in one script file like so:
bower_components.js
require('bower_components/angular-ui-router/release/angular-ui-router.min.js');
require('bower_components/angular-local-storage/dist/angular-local-storage.min.js');
etc ...
and later in production, compile bower_components.js to contain the actual scripts so that I could simply just use this:
<script src="bower_components.js"></script>
Please note that I don't wish to run any sort of task in development environment. I don't want to compile my scripts when I work locally.
thanks in advance.