I configured require.js very well and it is working fine but when I added Identity Pages in ASP.NET Core 3.1 require js started to giving 404 error when loading script files, jquery, jquery-validation and jquery.validate.unobtrusive. When I check the console the path is wrong, and it is trying to find these files near require.js file directory (as you know it is default directory) but in my config file I configured path as very well and working in my other pages but not in identity pages.
Here my require.js config file
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: '../',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
jquery: 'lib/jquery/dist/jquery.min',
main: 'js/bundle/main.min',
'jquery.validate': 'lib/jquery-validation/dist/jquery.validate.min',
'jquery.validate.unobtrusive': 'lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min'
},
shim: {
'jquery.validate': ['jquery'],
'jquery.validate.unobtrusive': ['jquery', 'jquery.validate']
},
waitSeconds:0
});
It is working my other pages but not in identity when I check the 404 error the console error is;
RequireJs.js:5 GET https://localhost:44340/lib/RequireJs/jquery.js net::ERR_ABORTED 404
Shouldn't it use the requirejs config and shouldn't be the path is
RequireJs.js:5 GET https://localhost:44340/lib/jquery/dist/jquery.min.js like other pages ?
Thanks for any comment,
Stay health folk :)
Eventually I found the answer. The problem is about the MVC default scripts which are in use by MVC framework spesifically in scaffolded items like identitity pages. Identity pages uses jquery.unobtrussive as default for showing warning and errors to UI side. But this js library do not use require js "define" statement. If you re-engine this library you can see that the problem disappears.
Related
I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.
I am struggling with the deployment of a Vuejs front-end on my local IIS.
I would like to have my app deployed into a folder named FE_STB which is a sub-directory within my C:\inetpub\wwwroot folder.
Ideally, the URL to access the front-end would be http://localhost/FE_STB/.
In order to do so, I tried the following in vue.config.js:
module.exports = {
// Used to build the path for the css, js
baseUrl: process.env.NODE_ENV === 'production'
? '/FE_STB/'
: '/',
// The folder where the app will be built in the project directory instead of the default dist folder
// outputDir: 'Vue',
};
running npm run build generates an index.html, a favicon.ico, my img, js, css and fonts folders.
The index.html contains link tags such as (<link href=/FE_STB/css/chunk-05c5.672f5bfa.css />) and i thought it was going in the good direction.
However, it keeps returning a
404 not found error
when i try to access http://localhost/FE_STB/.
On the other hand, If I copy only the index.html into the root directory of my IIS installation (wwwroot) instead of the FE_STB subdirectory, and check the http://localhost/ URL, my app appears correctly.
However, when I start browsing the app and hit the refresh button, I get an error. For example, If I am on http://localhost/about/ on my app and refresh it with F5, I will get a 404 error as it’s looking for C:\inetpub\wwwroot\about\ directory which doesn’t exist obviously.
I also tried the web.config and the IISrewrite solutions as explained on the vuejs website or tried to add:
const router = new VueRouter({
mode: 'history',
// To define sub-directory folder for the deployment
base: 'FE_STB',
routes,
linkActiveClass: 'active',
scrollBehavior(to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 };
},
});
in my router.js but it doesn’t change anything.
Any tips or directions would be really helpful.
Thank you
S.
I'm trying to load a sample Angular 2 app into a Sharepoint web page. Looking at Angular's Getting Started live Plunker example,
There are only 3 files needed: (Ignore the styles.css file.)
index.html
app\maint.ts
app\app.components.ts
I added an app folder and these same files onto my webpart but the app doesn't seem to load. It is not finding the .ts (typescript) file.
If I view the index.html page, there is an error that is being thrown in the JS:
Error: XHR error (404 NOT FOUND) loading https://domain.com/Webparts/app/app.component.ts
Error loading https://domain.com/Webparts/app/app.component.ts as "./app.component" from https://domain.com/Webparts/app/main.ts
Stack trace:
I have the app folder created and the app.component.ts file underneath that. But for some reason, the page can't find that file.
Any ideas? I have tried uploading the *.js.map and the *.js files that Typescript generates. But no luck.
Looks like I had a path that was wrong. You just need the .JS files for the application to run if you specify it in the system.config like this. (Don't need the TypeScript files on the server.)
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
This is a config file in the /themes/ifd/js/ folder:
require.config({
// Initialize the application with the main application file
deps: ['plugins/console', 'main'],
baseUrl: '/themes/ifd/js/components'
paths: {
jquery: 'jquery/jquery.min',
flexslider: 'flexslider/jquery.flexslider-min',
easydropdown: 'easydropdown/jquery.easydropdown.min',
bpopup: 'bpopup/jquery.bpopup.min',
jqrangeslider: 'jqrangeslider/jQRangeSlider',
jqueryui: 'jquery-ui/js/jquery-ui-1.10.4.custom.min'
// More additional paths here
},
shim: {
jqueryui: 'jquery'
},
// Prevent caching issues, by adding an additional URL argument
urlArgs: 'bust=' + (new Date()).getDate()
});
I've got a main.js file in the /themes/ifd/js folder too:
require([
// Require the modules
'modules/module',
'jquery',
'flexslider',
'easydropdown',
'bpopup',
'jqueryui',
'jqrangeslider'
], function (module) {
'use strict';
// Rest of a file
And rest of files (modules?) are inside /themes/ifd/js/components:
Screenshot of list of files
In my HTML I have:
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
The messages I see in Chrome console:
GET http://DOMAIN/themes/ifd/js/jquery.js 404 (Not Found) requirejs.js:34
GET http://DOMAIN/themes/ifd/js/flexslider.js 404 (Not Found)
I can't find what is wrong and why it doesn't search in components directory...
The entry point for requirejs is the main module specified in the html file.
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
requirejs loads '/themes/ifd/js/main.js' 1st. Now in the main.js file, require([...]) try to load in the module specified in the args but requirejs won't be able to find them.
The reason is that requirejs does not know about them since require.config (...) is not executed.
Need to have 'require.config (...)' in '/themes/ifd/js/main.js' to do all the settings
Here is a working example. It includes Requirejs, jQueryMobile, Backbone, and Marinonette.
In the index.html file, you need to specify the main module for requirejs to load.
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In this example, the main module is under "js/main.js"
Inside, main.js, you specify the require.config and use define to load your modules.
The network activity you show us indicates that your configuration is completely ignored by RequireJS. And you say "Then i have that in my html":
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
You've shown the contents of /themes/ifd/js/main.js but it does not include your configuration, which apparently is in a different file.
The solution here would be to move your call to require.config into your main.js file, before your call to require.
It looks like you're just loading main.js and never telling RequireJS to use your config.
This RequireJS issue lists several ways to load both a config and a main -
put the config on the HTML before you require the top-level module.
load the config.js with another tag.
do a nested require() on the HTML file (require config than require your main).
do a nested require() inside main.js.
keep the configuration inside main.js
The best approach will vary based on your project structure, I've been doing 5 way more often than the others since I usually have a single entry-point for all pages, but in some cases I used 1 and 2.
Further down the page some code examples of these approaches are also shown.
I use the Require.js "AMN" to load my files, this is my HTML file.
<script data-main="js/main.js" href="js/require.js"></script>
when i load my main.js - i made this config to load my jquery file.
require.config({
baseUrl: 'js',
paths: {
"jQuery":'lib/jquery-1.9.1.min'
}
});
require(['jQuery'], function ($) {
console.log($);
})
But i am not getting any console. all my paths are correct.
my index.html file located at the parent of the js filder.
Help me to resolve this.
jQuery module for AMD should always be lowercase. Check what path is used when browser requesting files using developer tools in chrome or fiddler. This way you will know if you configured it right.
UPDATE: please correct the syntax for loading script. Must be src instead of href.
<script data-main="js/main.js" src="js/require.js"></script>