aspnetboilerplate issues: asp.NET core template Web app issue - asp.net-core

I have downloaded the asp.net core template from the below location but I am missing most of the JS files here-
downloaded location - https://github.com/aspnetboilerplate/aspnet-core-template
When I invoke the Web API swagger and it works fine without any issue but when I run the web app I am missing most of the JS & CS files as shown below-
There is no libs folder...Is there something missing?
<script src="~/libs/jquery/dist/jquery.js" asp-append-version="true"></script>
<script src="~/libs/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
<script src="~/libs/admin-lte/dist/js/adminlte.js" asp-append-version="true"></script>
<script src="~/libs/jquery-validate/jquery.validate.js" asp-append-version="true"></script>
<script src="~/libs/jquery-validate/jquery.validate.unobtrusive.js" asp-append-version="true"></script>
<script src="~/libs/block-ui/jquery.blockUI.js" asp-append-version="true"></script>
<script src="~/libs/spin/spin.js" asp-append-version="true"></script>
<script src="~/libs-ext/spin/jquery.spin.js" asp-append-version="true"></script>
<script src="~/libs/sweetalert/sweetalert.min.js" asp-append-version="true"></script>
<script src="~/libs/toastr/toastr.min.js" asp-append-version="true"></script>
<script src="~/libs/push.js/push.js" asp-append-version="true"></script>
<script src="~/libs/moment/moment-with-locales.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/abp.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/jquery.dataTables.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.bootstrap4.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.responsive.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/responsive.bootstrap4.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.buttons.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/buttons.bootstrap4.js" asp-append-version="true"></script>
<script src="~/js/abp.dataTable.js" asp-append-version="true"></script>
<script src="~/js/main.js" asp-append-version="true"></script>

An old question, but incase someone else needs help.
First install Microsoft.Web.LibraryManager.CLI
dotnet tool install -g Microsoft.Web.LibraryManager.CLI
and run
libman restore
from the Mvc folder

Related

How to inject scripts to index html file in the generated index.html in dist/<appName>?

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.

Why does the environment tag helper work on my machine but not on Azure?

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.

Tweenlite Expo is not defined

I wrote the following code in my test.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#item {
background:blue;
color:yellow;
}
</style>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var logo = document.getElementById("item");
TweenLite.to(logo, 2, {left:"542px", backgroundColor:"red", borderBottomColor:"#90e500", color:"white",ease:Expo.easeOut});
}
</script>
</head>
<body>
<p id="item">thsi is a para</p>
</body>
</html>
But when I run it, I get the error message in console
Uncaught ReferenceError: Expo is not defined
at window.onload (test.html:16)
How can I use Expo.easeOut?
To do easing, you have to include EasePack too:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
(Or use TweenMax instead, wich includes CSSPlugin and EasePack among other features.)

django-autocomplete-light does not work in apache

I'm using django-autocomplete-light
Django==1.8
django-autocomplete-light==3.1.6
django-easy-select2==1.2.5
django-suit==0.2.13
django-tables2==1.0.4
It works fine when I run it in the django development server but it does not load when I set DEBUG=False and run the app in apache.
I've run collectstatic and select2 javascript and css exist and can be downloaded.
The page shows a javascript error that select2 is not a function.
settings.py
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
'suit',
'myapp',
'dal',
'dal_select2',
'django.contrib.admin',
'django_extensions',
'simple_history',
'django_tables2',
'django.contrib.admindocs',
'rest_framework',
'rest_framework.authtoken',
)
admin page order of content:
<link href="/static/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="/static/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/vendor/select2/dist/js/select2.full.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/select2.js"></script>
<script type="text/javascript" src="/static/admin/js/related-widget-wrapper.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
This was wierd. After spending a lot of effort playing with this, I wiped out the static folder content and ran collectstatic django command from scratch and it's working now. When I diff it, I see that there are changes in admin and select2.js so maybe they've updated the packages to fix the issue.

First relative path tilde (~) not being recognized?

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?