How to copy a package to Node_Modules through manually in angular-2 - angular2-routing

After copying the package to node_modules i am getting 404 error. Even i specified in package.json in dependencies...
Plz help me to fix this thing. Thank you.
In developer tool
Request URL:http://localhost:3000/ng2-pdf-viewer
Request Method:GET
Status Code:404 Not Found

So, node modules are libraries that add functionality to your application. Angular has no way to know that you intend to make that functionality available at a given URL unless you code it to do so.
On the ng2-pdf-viewer GitHub page, scroll down to the Usage section to see an example of how they are implementing that in a custom component.
Essentially, you need to create a component in Angular, add that component to the router for the URL you want, and then code in the ng2-pdf-viewer functionality like in the example. You can read more about how Angular routing works here: https://angular.io/guide/router

Related

Deploying React in Github page - Failed to load resource: the server responded with a status of 404

I'm making React App.
Firstly, I'm making deployment on GH page with SASS and now I have this problem. Can anybody tell me how to fix this?
I don't know which code exactly I have to add , so just tell me what part of code i nee to add.
page with error
I think you should set the homepage property inside your package.json
Read this : https://create-react-app.dev/docs/deployment/#building-for-relative-paths
It's because your website isn't at the domain's root.

Gatsby v2 site does not load CSS properly

In my dev environment the site looks as expected, however when I run gatsby build my CSS does not display properly. If I manually navigate to another page then the CSS displays as expected.
There are no errors but I do get this warning:
The resource
http://localhost:9000/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json
was preloaded using link preload but not used within a few seconds
from the window's load event. Please make sure it has an appropriate
as value and it is preloaded intentionally.
When I inspect that file it shows:
{"pageContext":{}}
The fact that that object is empty is my issue I assume. I have tried disabling the service worker but that only made the issue worse.
I've also tried
forcing a build and disabling the cache on netlify,
deleting npm and package.json files and then running npm build,
but no luck so far.
This could be related to the fact that main component e.g Layout unmounts and remounts on every page.
Try to refer your css files in gatsby-browser.js file which is provided by default and is located in the root of your project.
For example you could try do following:
// gatsby-browser.js
require('./my-global-styles.css')
It'll also work with gatsby-plugin-sass
// gatsby-browser.js
import './src/styles/my-global-styles.scss'
For more info visit: https://www.gatsbyjs.org/docs/browser-apis/
I have the same issue. In my case, gatsby-plugin-styled-components was missing in my gatsby-config.js.
https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/
https://github.com/gatsbyjs/gatsby/issues/8984

Javascript file is not loaded properly

I have a nice html, css template (source code here).
I am going to use this template in my angular2 app (source code here).
I got the html template out of this repository (index.html).
My problem is in the angular2 source code
You need to clone the angular source.
Run npm install
Run ng serve
Unfortunatly, it seems that the <script src="assets/js/main.js"></script> in index.html is not added properly. Although, there is no error in the console, the left menu is broken. I know that this problem occurs when main.js is not fit.
Here is the correct html page:
Here is the angular page (broken header and menu):
The codes are identical, but I have decomposed the html template into 3 components (header, menu, and app (main content)).
Instead of trying to figure out what happened with your CSS, I took the original template, converted it to Angular 2 with the angular-cli, and fixed the CSS issues. It all works now, and the complete source is at https://github.com/Boyan-Kostadinov/angular2-miminium
When you broke apart index.html it's likely that you also altered some file paths.
The relative path would go from src="assets/js/main.js" to something like src="../assets/js/main.js".
Prepending ../ to the path will back out of the current directory to the next level up. As you have it now, the browser is looking for the assets directory in what I assume you have compartmentalized as an htmlComponents directory.
Consider using the absolute path to main.js, at least to diagnose the issue.
I ran into a similar issue with the same file. In my case, I have a complicated application that is developed in stages. I installed my Angular seed in a subdirectory. Because of my file structure, when I run npm start, the live server that is started has bad relative link locations. For example, in the screen shot below, you will see that the application is trying to find style.css at http://localhost:3000/medface/RecordWriter/styles.css; however, it should be looking at http://localhost:3000/styles.css, because the root of the web server that was created by npm start is at /medface/RecordWriter/.
With respect to your project. The key to finding the problem with your link is to open the developer panel and inspect the actual network request. If you share a screen shot, we may be able to help you inspect your instance with more insight.
What Worked for Me
In my case, I reconfigured my local web server to handle any unserved pages in the Angular2 folder and return the index instead. When I run npm start, I close the browser page that opens and use my regular web server. Instead of viewing my application on localhost:3000, I view my application at localhost/medface/RecordWriter/ (which is equivalent to localhost:80/medface/RecordWriter).
The down side to my makeshift approach is that the page must be refreshed before changes appear, but it loads all resources predictably and reliably, and allows my Angular2 code to run in conjunction with some of the older code base in other areas of the website that have not been converted to Angular2. Regardless, this may work for you also.

2sxc: 404 Error after adding App module on the page. API is missing?

I have a problem when placing an App module(v 8.4.8) on a page. When I placed an App module on a page I got a pop up saying "Had an error talking to the server (status 404). if you are an advanced user you can learn more about what went wrong - discover how on 2sxc.org/help?tag=debug".
This error happens on whatever action I try to do: trying to add and app, refresh page etc.
I checked a communication to the server using Firebug and seems that one of APIs are missing:
~/desktopmodules/2sxc/api/view/Module/GetSelectableApps
Referer: ~/desktopmodules/tosic_sexycontent/dist/dnn/ui.html?sxcver=8.4.8.19191
Did I missed something? Should I make some configuration after SexyContent module install (v 8.4.8)?
I just checked a video by Daniel Mettler where he showed how to install a module and seems that process is simple. Nothing to worry about.
Does anybody has any idea what might went wrong here?
The same actually happens when I install and Content module: Error about missing APIs:
~/desktopmodules/2sxc/api/view/Module/GetSelectableContentTypes
~/desktopmodules/2sxc/api/view/Module/GetSelectableTemplates
Thanks a lot for your time
My best guess is that it's an issue with the dnn domain/path configuration. So basically my guess is that
you have multiple domains, and if this is configured incorrectly, the paths in the js-calls won't fully match the original one
you have sub-portal (with paths like /products/) or something, and this isn't configured correctly in dnn
languages in portal-paths are causing similar issues.
So please compare EXACTLY the full base path and see if that's the issue.

Setting Phantomjs page settings in grunt-mocha

When using grunt-mocha, is it possible to set PhantomJS Page settings in the Gruntfile?
Specifically, i'd like to modify webSecurityEnabled and localToRemoteUrlAccessEnabled to enable cross-origin requests.
Setting page.settings.(optionname) in the task's target options didn't to the trick. Anyone have any pointers?
It seems this feature is currently open as a pull request on their GitHub repo, I'll just have to wait for them to merge it.
Update:
The pull request was a bit off so i made my own fork and created a new PR. If anyone is having the same issues, try this fork (you can use a custom github repo for a package's 'version' in npm's package.json)

Resources