Refused to execute script from packs/js/index-662807e73049021453fe.js' because its MIME type ('text/html') - mime-types

Im deploying a website with aws ec2 instance using react/rails.
When running the server through rails s -e production
i get this error
Refused to execute script from 'http://<ip-address>/packs/js/index-662807e73049021453fe.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
my application.erb.html
<!DOCTYPE html>
<html>
<head>
<title>Production server</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'index' %>
</head>
<body>
<%= yield %>
</body>
</html>
Ive been looking for an answer for a week now.
Any help would be greatly appreciated.
Update:
my routes to catch all routes in routes.rb
root 'homepage#index'
get ':path', to: 'homepage#index', format: false
and that points to homepage view
<%= javascript_pack_tag 'index' %>
<%= react_component("App", {prerender: true}) %>

Related

Wicked_pdf keeps on rendering in the backend without showing anything in mail

I have a mailer in which I am trying to generate PDF and then send it as an attachment:
Here's my mailers/invoice_mailer.rb:
def invoice
#invoice = params[:invoice]
recipients = params[:recipients]
subject = params[:subject]
#message = params[:message]
attachments["invoice_#{#invoice.id}.pdf"] = WickedPdf.new.pdf_from_string(
render_to_string(pdf: "invoice", template: "invoices/pdf", layout: "layouts/pdf")
)
mail(to: invoice.client.email, subject: "Your todo PDF is attached", invoice: #invoice)
end
I have a pdf.erb file in app./views/invoices:
<%= react_component("Invoices/Invoice", { invoice: #invoice }) %>
I have a simple layout file, pdf.html.erb, in layouts/ :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<%= wicked_pdf_stylesheet_link_tag "pdf" %>
<%= wicked_pdf_javascript_include_tag "number_pages" %>
</head>
<body onload="number_pages">
<div id="header">
<!--= wicked_pdf_image_tag 'thumbnail.png', height: "30", width: "auto"-->
</div>
<div id="content">
<%= yield %>
</div>
</body>
</html>
In the mailer preview spec (assume providing all the details):
InvoiceMailer.with(invoice:, recipients:, subject:, message:).invoice
Running the mailer, I get this in the terminal:
It keeps on rendering until I kill the server.
Can you please tell me what I am doing wrong?

AngularJS don't work on view page when references on ViewMasterPage

I'm trying to use angularJS in an old asp.net mvc appication.
This application uses a ViewMasterPage
If I load the angularjs reference in the viewpage, it works just fine:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%: Scripts.Render("~/bundles/ng") %>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<div ng-app="">
<p>{{ "Hello" + " World" }}</p>
<p>{{ 2 + 4 }}</p>
</div>
</script>
</html>
OUTPUT ANGULAR OK
but when I try lo load the reference to angular JS in the view master page, it doesnt work.
<script src="<%= Url.Content("~/Scripts/jquery-1.8.2.js") +"?"+ version %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-1.9.1.js") +"?"+ version %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/json2.min.js") +"?" + version%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/angular.js") +"?"+ version %>" type="text/javascript"></script>
I know for sure, that is loading the script file, because if I load in both viewmasterpage and viewpage I'm getting this error:
WARNING: Tried to load angular more than once.
Please help me.
Thank you in advance.

Angular controller not loading and no errors in rails app

I have a simple rails application., Hoping to get some input for this block of code that is not working.
<div ng-contoller="myappMyController as myController">
Hello {{ myController.greet() }}
</div>
I have a controller defined in angular amp.js. Here is the source code for that js file
var MyController= function() {
console.log("AM getting here");
var controller=this;
var greet = function () {
return "howdy";
}
controller.greet=greet;
}
angular.module('myapp',[]).controller('MyController', MyController);
Here is the html file where am calling this method
<div ng-app>
<p id="notice"><%= notice %></p>
<h1>Listing Users</h1>
<p>The value is {{1+1}}</p>
<input ng-model="firstName" ng-model-options="{updateOn: 'blur'}"/>
<p>Hi {{firstName}}</p>
<div ng-contoller="myappMyController as myController">
Hello {{ myController.greet() }}
</div>
</div>
The copy of the application layout html file is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/favicon.ico">
<title>AngularVenkat</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>-->
</head>
<body>
<%= yield %>
</body>
</html>
Any recommendations or things I have not addressed.
Here you have defined your controller as MyController:
angular.module('myapp',[]).controller('MyController', MyController);
Here you are trying to reference it as myappMyController (plus you have a typo on ng-controller):
<div ng-contoller="myappMyController as myController">
You need to change one or the other so they both match either MyController or myappMyController.

How to diplay array in express ejs template

I am trying to show a json file isnide my express ejs template for that my json file looks like this :
Data File
For that my ejs file is like this:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><% var a = title %></h1>
<%for (var result in a){%>
<li><%=result%></li>
<%}%>
</body>
</html>
When I sm using this code:<%=result%>
I am getting this result :
error
Books
I am trying t show all the data of books in my view file for that I am trying this code <%=result[0]%>but I am getting this value
.e
.B
I am trying to access Books Id or other detail how can I show it here in this view file.
I think you should go and read some docs EJS
here you can see the for loop example and for your solution the answer is very simple you need to use this code and you are done:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><% var a = title %></h1>
<% var z = a["Books"] %>
<% for(var i=0; i<z.length; i++) { %>
<li>
<%= z[i].Tweet %>
</li>
<% } %>
</body>
</html>
I suggest you to use forEach:
<body>
<ul>
<% books.forEach(function(book){ %>
<li><%- book.id %></li>
<%});%>
</ul>
</body>

passing data from rails controller to AngularJs

This is my first example with angularJs and rails
I am trying to pass data from rails server to angularjs to be displayed in the view
This haow i proceed:
in my products-controller.rb
class ProductsController < ApplicationController
respond_to :json
def index
respond_with Product.all
end
end
in layouts.application.html.erb
<!DOCTYPE html>
<html ng-app="sportsStore">
<head>
<title>Angular</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
<script>
angular.module("sportsStore", []);
</script>
<%= javascript_include_tag 'controllers/sportsStore.js' %>
</head>
<body ng-controller="sportsStoreCtrl">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">SPORTS STORE</a>
</div>
<%= yield %>
</body>
</html>
in assets/javascripts/controllers/SportsStore.js
angular.module("sportsStore", ["ngRessource"])
.controller("sportsStoreCtrl", function ($scope, $resource) {
Datas= $resource("/products")
$scope.data= Datas.query()
});
in welcome/index.html.erb
<div class="well" ng-repeat="item in data ">
<h3>
<strong>{{item.name}}</strong>
<span class="pull-right label label-primary">
{{item.price | currency}}
</span>
</h3>
<span class="lead">{{item.description}}</span>
</div>
and in routes.rb
resources :products, defaults: {format: :json}
root 'welcome#index'
but i just got angular binding syntax instead of data

Resources