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.
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.
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.
This is a section on our _Layout.cshtml that I'm about to throw out the window.
<!-- CSS Scripts -->
<environment include="Development">
<script src="/ts/CS.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
<script src="/ts/CS.Url.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
<script src="/ts/CS.Settings.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
<script src="/ts/CS.Alert.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
<script src="/ts/CS.Modal.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
</environment>
<environment include="Staging,Production">
<script abp-src="/ts/CS.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Url.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Settings.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Alert.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Modal.js" asp-append-version="true"></script>
</environment>
We use the environment tag helper in some spots to either use .min.js or .js, useful for debugging. I can see that if I personally set the ASPNETCORE_ENVIRONMENT variable from "Development" to "Production" that the tag helper continues to render the right content.
However, when I then push this through to be hosted on Azure - the content is missing completely.
Things I've tried:
Tried changing the value in azure config - no change.
Originally we had names, changed to include - no change. Still works on dev machine.
What is going on here?! Is this not what other people do?
I was having the same issue with asp.net 3.0. It was rendering environment on local properly but when I deployed to Azure it stopped detecting it and rendering both the environment as it is.
Here is the solution. Just add the below line in your _Layout.cshtml file in the beginning.
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
it will fix the issue.
thanks
Staging, production is not understandable to the server. You need to change this as follow.
If You are working in local than our script will work which is inside
<environment include="Development">
</environment>
if You are working on server like azure and others than our script will work which is inside
<environment exclude="Development">
</environment>
You need to change your following code
<environment include="Staging,Production">
<script abp-src="/ts/CS.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Url.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Settings.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Alert.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Modal.js" asp-append-version="true"></script> </environment>
as
<environment exclude="Development">
<script abp-src="/ts/CS.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Url.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Settings.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Alert.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Modal.js" asp-append-version="true"></script>
</environment>
It will work at any server.
The exclude="Development" works if you want to apply the same settings to all other environment except Development. But I came across a time when I need to have different settings for staging and production. So I had to be specific.
The solution I use in order for the environment tag helper to work on Azure is that you need to create an entry for the ASPNETCORE_ENVIRONMENT under Settings -> Configuration -> Application settings on Azure:
If you don't have that defined on Azure, when you publish, it will default to Production if I remember correctly, which is weird.
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'm taking some MVC.net training, and noticed something weird about the tilde.
I have a list of links to scripts that look something like this:
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/easing.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
But when I run the application on my machine, the jquery wasn't working. Checking the source code, I notice that the first tilde wasn't being converted as it should:
(source code:)
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/Scripts/easing.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
It can be pretty easily fixed by just adding a link to nothing at the top of the list:
<script type="text/javascript" src="~/Scripts/nothing.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/easing.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
But I was wondering if any of you have seen anything like this, or had an explanation as to what is going on?