External stylesheets can't resolve path in angular app - javascript

I'm trying to integrate to my angular app a website created by a friend. He sent me those files :
css/
fonts/
js/
index.html
So I added index.html's imports (css and js) to my angular.json and body's content to my component's template.
However, when running ng serve, I get a lot of errors, coming from stylesheets included previously. For instance, here's one
ERROR in ./src/assets/home-assets/css/jquery-ui.css (./node_modules/#angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/assets/home-assets/css/jquery-ui.css)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\bonna\Work\Natan\natan-website\front-end\src\assets\home-assets\css\jquery-ui.css:430:25: Can't resolve 'images/ui-icons_cd0a0a_256x240.png' in 'C:\Users\bonna\Work\Natan\natan-website\front-end\src\assets\home-assets\css'
428 | .ui-state-error .ui-icon,
429 | .ui-state-error-text .ui-icon {
> 430 | background-image: url("images/ui-icons_cd0a0a_256x240.png");
| ^
431 | }
432 |
Every error seem to have the same origin : images' paths
Does any one have a solution ?

Related

react bootstrap Configuration Error In webpack

have same issues withe web pack project can you please help me to resolve that one. I didn't use react-scripts because it's web pack project. i have migrated react-bootstrap 1.6.4 to 2.1.1
Current Version: 2.1.1
the errors are:
ERROR in ./node_modules/react-bootstrap/esm/SplitButton.js Module
parse failed: Unexpected token (101:2) You may need an appropriate
loader to handle this file type. | renderMenuOnMount, |
rootCloseEvent, | ...props | }, ref) => /#PURE/_jsxs(Dropdown, { |
ref: ref, # ./node_modules/react-bootstrap/esm/index.js 67:0-55 #
./src/containers/Layout.jsx # ./src/routes/index.jsx #
./src/containers/App.jsx # ./src/index.jsx # multi
(webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server
react-hot-loader/patch babel-polyfill whatwg-fetch ./src/index.jsx
the issue did not occur in react-bootstrap#2.0.0-alpha.1

Node JS get 404 error not found when i try to access to a js file

I'm trying to access a js file from my index.html file, but I'm getting this error:
GET http://localhost:3000/js/script.js net::ERR_ABORTED 404 (Not Found)
I know there are several posts about this issue but I still can't find a solution.
So here is my folder structure:
Game
|-- Client
| |--Js
| |--script.js
|
|-- Server
|-- server.js
This is the few lines in my server.js:
var app = require('express')();
var http = require('http').Server(app);
app.use("/js", express.static('./client/js/'));
And this is a part of my index.html:
<script src="js/script.js"></script>
You are telling your express server to serve the folder 'Server/client/js' at route 'localhost:3000/js'.
If your folder structure is what you say it is, then you would get this error, since there is no such folder.
The most straightforward way of fixing this would be to move your client folder into your Server folder and change your static folder destination to './Client/js'.

Error Unknown type "webform__webform" using gatsby-drupal-webform & GraphQL

I get this error when using gatsby-drupal-webform in my Gatsby js site :
Failed to compile
GraphQL Error Unknown type "webform__webform". Did you mean "date_format__date_format"?
file: C:/xampp/htdocs/drupal-gatsby-t/node_modules/gatsby-drupal-webform/dist/Webform.jsx
1 |
> 2 | fragment Webform on webform__webform {
| ^
3 | name: drupal_internal__id
4 | description
5 | status
6 | elements {
7 | name
8 | _type
9 | _title
10 | _title_display
11 | _default_value
12 | _description
I'm the author of the module. The version of the package used in this question is old and it didn't work without my Drupal hacks that were not published at the time.
I would suggest updating to newest version by running npm install gatsby-drupal-webform#latest --save
Then you also need to:
Install a Drupal module from the Drupal repository. This module will preprocess Webform jsonapi output and open a REST endpoint that is used to submit forms.
Have Gatsby access Drupal jsonapi with access any webform configuration permission. This can be done by installing basic_auth module for Drupal and setting username and password of a user with that permission in gatsby-source-drupal settings.
You can take a look at this example project.

Nodejs getting all needed scripts and stylesheets route from a page request(without browsers)

I'm wondering if it is possible for me to get all the scripts and stylesheets routes I need from a html file.(not using browsers at all.)
for example:
I run index.html, and the website need ./style.css and also need ./script.js and lot of images.
How could I know what index.html need the routes of style.css and script.js and images.
another question: Does the browser works like rendering HTML file while it need some files, the browser request to server and wait for response? So is there a way I could use nodejs to analog the action and not using browsers?
You have to specify the location of your static content in your app.js file from where server will serve the files to browser when index.html will render.
for example if i have following directory structure
ROOT
|
---public
| |
| ----css
| | |
| | ----style.css
| | |
| |
| ----js
| | |
| | ----script.js
| | |
| |
| ----images
| |
|
|
---app.js
|
---index.html
|
Browser requested urls format are
css - > <link href="/css/style.css" rel="stylesheet" type="text/css" />
js - > <script type="text/javascript" src="/js/script.js"></script>
after that you have to add following code in your app.js file;
app.use(express.static(__dirname + '/public'));
if express is not installed in your system install it form cmd using command
npm install express
add following line of code in app.js
var express = require('express')
, app = express();
Find out a good way to solve the problem is using phantomjs(http://phantomjs.org/), network-monitoring is probably something I'm looking for.

TinyMCE file upload, generic syntax error

When using TinyMCE's "Ajax File Manager" plugin file upload, I get the following error when I hit the upload button:
"Syntax error: missing ; before statement"
Everything else seems to be working okay. Any ideas? (Permission settings somewhere maybe?)
EDIT: Here's some more info: If the uploaded folder is left in the original structure there is no problem...
When I move the uploaded folder (and make the appropriate changes to config.base.php) the error occurs. Why would changing the location of the upload folder cause that error?
tinymce
|
| jscripts
|
| tiny_mce
|
| plugins
|
| ajaxfilemanager
| |
| | inc
| |
| | config.base.php (the CONFIG_SYS_DEFAULT_PATH and CONFIG_SYS_ROOT_PATH need to be '../uploaded/')
|
| uploaded (chmod to 777 - placement of folder any other place causes errors, even if changed in config.base.php)
EDIT: I just learned that the problem started happening when mod_security was added to Apache and recompiled. Has anyone come across this problem?
Figured it out: Our host had just added mod_security and recompiled Apache. They had to white list ajaxfilemanager to get it to work properly again.
define('CONFIG_SYS_MY_DOCROOT', $_SERVER['DOCUMENT_ROOT'] . implode('/',array_slice(explode('/',$_SERVER['PHP_SELF']),0,-3)));
define('CONFIG_SYS_DEFAULT_PATH', CONFIG_SYS_MY_DOCROOT.'/uploads/'); //accept relative path only
define('CONFIG_SYS_ROOT_PATH', CONFIG_SYS_MY_DOCROOT.'/uploads/'); //accept relative path only
//define('CONFIG_SYS_DEFAULT_PATH', '../../../uploads/'); //accept relative path only
//define('CONFIG_SYS_ROOT_PATH', '../../../uploads/'); //accept relative path only

Categories