angular js can't display bootstrap modal when relocate to another folder - javascript

I am using the bootstrap.ui modal and angular as the frontend, and using the node.js as the backend, in the node.js based server, I used /views folder for ejs template and public folder for storing static resources.
app.set('views',__dirname+'/views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.use(express.static(__dirname+'/public'));
Previously my angular page is in the /public static folder, the modal works fine. but then I moved the angular page to the view folder, the page is loaded fine. but when it comes to the modal, the page can't display the modal, showing error
Error: [$compile:tpload] http://errors.angularjs.org/1.2.7/$compile/tpload?p0=template%2Fmodal%2Fwindow.html
http://errors.angularjs.org/1.2.7/$compile/tpload?p0=template%2Fmodal%2Fbackdrop.html
So the error is caused by the fact that template/modal/window.html and template/modal/backdrop.html are still in the public folder, that my angular page can't find these file again.
Now even I relocate the template folder from public to views, it still doesn't work, how can I fix this problem

I think that the problem comes from the hardwritten templateUrl in modal.js source code (see lines 64 & 86)?
There's a debate about this implementation: Github PR, Github issue.

Related

Laravel files/folders not showing up in Public directory

I want to integrate TradingView's charting library in my Laravel project.
I have copied the charting_library folder to the Public folder of Laravel.
After that, I have referenced the charting_library.min.js file from Blade files in view and the other resources related to it.
<script type="text/javascript" src="{{ asset('tradingview/charting_library/charting_library.min.js') }}">
All js files loads successfully, but the problem is that this charting_library.min.js calls an HTML file from a subdirectory where it returns a 404 Not Found error.
http://localhost:8000/charting_library/static/fa-tv-chart.37***ee.html 404 (Not Found)
Here is the file/folder structure:
I have checked loaded resources from chrome's dev tools.
Laravel loads these referenced JS files, but it doesn't load any other files which these files have requested and just returns 404.
The charting_library folder exists in the directory, it's just something related to Laravel. I think it can't see the directory's contents.
I have tried to modify the .htaccess file but still no luck.
I even tried to mix charting_library.min.js via Webpack, changing autoload, but still, nothing happens.
I solved this issue by:
Moving the project to wamp's www folder.
Moving charting_library and datafeeds folder to the root of laravel's public. It seems
tradingview's widget constructor uses relative path's for building
whole chart. So when you place the charting_library inside a folder,
it doesn't resolve other assets. These folders should be exactly in
the root.

Overriding layout file Symfony (Aimeos Symfony Bundle)

I have a problem with overriding default template from app/Resources folder to my bundle resource folder. I have installed Aimeos Symfony bundle. And I get this error with opening list route. I moved all view files from app folder to bundle resource. Here is my folder structure project tree:
But i get this error trying to access /list route of Aimeos. I guess it has a wrong path main error:
Why are you "moved all view files from app folder to bundle resource"?
Please, carefully read the installation manual, especially this step - Symfony/Adapt base template.
So there was two ways how you got this error - you missed this installation step or just moved out app/Resources/view/base.html.twig that is important to see /list route.

Grails 3 Application Unable to load *.js file

I have my Grails 3 Application. I have placed my front-end application(which is built using Angular 2.1) in src/main/webapp folder.
While loading the application with URL http://localhost:8080/ I'm redirecting it to Index.html page.
But the Index.html page is not loading
URL:-http://localhost:8080/static/app-name/index.html
And I'm getting below errors in console.
GET http://localhost:8080/inline.js
index.html:14
GET http://localhost:8080/main.78fb007fcde8966a4e95.bundle.js
index.html:14
GET http://localhost:8080/styles.d63e17da56bb3a1ca523.bundle.js
index.html:14
GET http://localhost:8080/main.78fb007fcde8966a4e95.bundle.js 404 ()
Change it so resources don't get served from the /static url:
application.yml:
grails:
resources:
pattern: /**
Finally, I got the solution.
1.) Copied the contents of dist instead of dist folder itslef into src/main/webapp
2.)Made the changes in application.yml as suggested by #James Kleeh.
3.)Re-Route controller uri to index.html.
And here it goes.
PS: I was actually facing path issue which got resolved following above steps

serving static content in code structure generated by yeoman for angular fullstack

I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.

Why is Ember/handlebars.js adding 'app/' to the front of my template files?

When Load my Rails ember app I get a blank screen because ember is trying to find my application and index templates at
Ember.TEMPLATES['application] and Ember.TEMPLATES['index']
But when I run Ember.TEMPLATES in the console it brings up all the templates as 'app/application' and 'app/index'.
So ember is looking for /application.hbs but cant find it because for some reason the templates are listed as app/application. But the actual file structure of app is:
assets -> javascripts -> app -> templates -> application.hbs and index.hbs
So their direct parent is not 'app/'
Any idea why its doing this and how to fix it?
Thank you!
Ember-Rails compiles the handlebars from the assets/javascripts directory directly.
You have two options, modify your hierarchy to not use the app folder.
Or set config.handlebars.templates_root = 'app' in your application.rb.

Categories

Resources