Setting up Angular 2 Getting Started Tutorial App on Sharepoint - sharepoint

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));

Related

RequireJs asp.net core identity pages path is not working

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.

Serving static files with Express.js on heroku. Where do files reside in Heroku?

The issue is Heroku can not find the files of my node project. This prompts the 404 Not found error. The question is how does the generic node Heroku file structure look like? If so, where do the files of my project actually reside in the heroku?
The scenario:
With the express library, I put all files needed to serve a frontend template, in a folder called 'public'. The absolute path leading to 'public' is needed and'_dirname' is the variable that contains that.
app.use(express.static(_dirname+'/public');
Now, Heroku always makes a GET request to the root of the application. As a response I send the
index.html file as the starting template. I also provide its absolute path as '{root:_dirname}'.
app.get('/', function(req, res) {
res.sendFile('public/index.html'{root:_dirname});
});
When the server is run, I get a 404 Not found error. Which means Heroku cannot find the files.
Heroku root folder is named app/. So as expected, providing the local '_dirname' is wrong since the application is now running on Heroku server not locally.
2020-09-10T15:28:12.127567+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/C:/Users/...
But, pointing at the public folder alone(only /public), assuming app/ is root, still prompts the 404 error not found.
2020-09-10T15:31:23.630358+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/index.html'
The Question
Which leads to the question, what does heroku file structure look like? where do project files reside in the heroku file structure, so i can provide the correct path on the GET request?
My file structure
After Bergur suggestion:
It prompts a 404 Not found. However, the path is now theoretically correct.
This is what I changed:
app.use(express.static(path.join(__dirname+'/public')));
app.get('/', function(req, res) {
res.sendFile('index.html',{root:__dirname+'/public'});
});
The 404 error comes from the 'app.get('/,function(req,res){});'. Without this handler, my heroku application shows a 'cannot GET' message on the template.
Have you tried to log out the full path just to see if there's something off?
I have several heroku projects with nodejs and react/vue/angular dist folder without problems.
I would change your code a little bit to:
use nodes __dirname
Use path.join instead of inserting the '/' yourself. It might cause some problems.
So final version might look like:
app.use(express.static(path.join(__dirname, 'public')));
This assumes the project structure is
-index.js
-public/index.html
There should be no need to use sendFile, serving the public folder is enough. Just make sure that the public folder is being deployed/pushed to heroku.
If you share with us your folder/project structure we might help you you better.

Vuejs Deployment issues: IIS, routes

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.

Vue buildt doesn't show router pages

I'm doing a webpage with Vue (Vue-bootstrap) and I'm having problems to make it works. I'm uploading the content of the dist folder after using npm run build, the project was started using `vue init bootstrap-vue/webpack my-project. I've tried to add a vue.config.js file with the next information:
module.exports = {
baseUrl: './',
//...
}
I've try several times adding this in different folders before build it but I can't make it work.
The result just show the footer, it is in:
http://thegraph.es/Citython/
and the code without this vue.config.js is in the next link:
https://github.com/MGijon/Citython/tree/master/web

Using RequireJS in a multipage application

we have a multipage application with below structure:
ApplicationModule is the root folder that contains all application logical modules,like Usermanagement and others like below:
/ApplicaationModules/UserManagement
//inside userManagement folder we have html pages and their corresponding .js(main)files
//so we have like
login.html and login.js
Login.js in turn requires/loads all script files that are required to execute the logic for the page, so it's configuration is like below:
require.config({
paths: {
'jquery': '../../Scripts/jquery',
'appSessionManager': '../../Scripts/ApplicationSessionManager',
'appBasePage': '../../Scripts/ApplicationBasePage',
'initServices': '../../IntegrationServices/Eservices/EservicesUserManagementService/Authenticate',
'smUtility': '../../Scripts/SmartServicesUtility',
}});
require(['appSessionManager', 'appBasePage', 'initServices', 'smUtility', 'jquery'],
function (sessionManagerRef, basePageRef, eservicesRef, utilityRef)
{
$(document).ready(function () {
//Here is the page code that uses other libraries like appSessionManager, appBasePage and others.
});
});
NOW, before moving to production, we want to use Optimizer so that all required files should be concatenated and minified as a single file.
Standing inside UserManagement folder, we run following command for the optimizer:
node ../../r.js -o name=Login out=optimize.js
BUT it is giving us the below error:
Tracing dependencies for: Login
Error: ENOENT, no such file or directory 'D:[some application path]\ApplicationModules\UserManagement\appSession
Manager.js'
In module tree:
Login
Error: Error: ENOENT, no such file or directory 'D:[some application path]\ApplicationModules\UserManagement\app
SessionManager.js'
In module tree:
Login
at Object.fs.openSync (fs.js:427:18)
Error is clear as for SessionManager.js file, it is trying to find it inside usermangement folder but I want it to look for this file inside Scripts folder as mentioned in config Paths of login.js file.
I will highly appreciate if someone can help us out on this.

Resources