I'm new to MVCs and Angular and I tried to get angular-google-maps going by following the steps in the AGM QuickStart page. Firebug shows several errors, some of which I don't understand.
First, I get a 403 in accessing underscore. The message (minus localhost) is:
"NetworkError: 403 Forbidden - angular-oPast/app/..../node_modules/underscore/underscore-min.js" Why can't I access code that's in my own PC?
Second, I get SyntaxError: missing } after property list }; with some reference to ngLocale, which is not in my code.
Third, I get ReferenceError: _ is not defined with some reference to MarkerLabel, which I am not using.
Fourth, I get [$injector:nomod] Module 'residenceApp' is not available! This is the name of the overall Angular app. Despite having done a couple tutorials, I don't know how to build this for using AGM or where to put it.
Fifth, per the AGM QuickStart, I have the following in my CSS
.angular-google-map-container {height:400px;}
This is a puzzle because the instructions say nothing about creating an HTML class=".angular-google-map-container" I did not put an HTML class attribute in like that because there were no instructions to do that. What is that CSS doing, and is it correct for my situation?
My HTML using ng looks like:
<html lang="en" data-ng-app="residenceApp">
<div id="gMapCanvas" data-ng-controller="GMapController2">
<google-map center="map.center" zoom="map.zoom"></google-map>
</div>
Most of the rest of the HTML is mock up text, at this point.
My scripts look like:
<script src="..../node_modules/underscore/underscore-min.js"></script>
<script src="common/gmapGenerator2.js"></script>
<script src="common/mapGenerator/dist/angular-google-maps.min.js"></script>
Maybe I should say that example.html for AGM works in my PC. So I have the necessary code in the system. It just doesn't have dependencies set right, or something.
What do I need to do to fix these problems and get Google Maps working? I can provide more info, if necessary.
Related
gatsby version = 2.0.0-beta.19
node version = v10.6.0
npm version = 6.1.0
VScode version = 1.25.1
When adding minified files (.min.js or .js with minified content) to my react Gatsby project, I get the following error when I try to do gatsby develop:
ERROR Failed to compile with 1 errors 10:41:47 AM
error in ./src/components/appinsights.js
Module Error (from ./node_modules/eslint-loader/index.js):
/mnt/d/my_site/src/components/appinsights.js
2:185 error Expected an assignment or function call and instead saw an expression no-unused-expressions
2:248 warning Unexpected use of comma operator no-sequences
2:493 warning Unexpected use of comma operator no-sequences
2:649 error Expected an assignment or function call and instead saw an expression no-unused-expressions
2:660 warning Unexpected use of comma operator no-sequences
2:761 warning Unexpected use of comma operator no-sequences
7:1 error Expected an assignment or function call and instead saw an expression no-unused-expressions
7:31 warning Unexpected use of comma operator no-sequences
✖ 8 problems (3 errors, 5 warnings)
I added a new file "./src/components/appinsights.js" and the contents of the file are from inside the script tag of App insights JS snippet
var appInsights=window.appInsights||function(a){
function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
}({
instrumentationKey: "<my_key>"
});
window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();
In my "./src/components/layout.js"
import appinsightsFile from './appinsights.js'
...
<Helmet
title={data.site.siteMetadata.title}>
<html lang="en" />
<script type="application/ld+json">{appinsightsFile}</script>
</Helmet>
...
I am not sure if this is a react issue or Gatsby. I can't seem to get any minified code to work with my application.
I have tried:
inline app insights code in my layout.js
taking the script tags out of the helmet code
I am not that experienced and wanted to comment on this, but I need 50 reputation. Anyways, maybe we can solve your issue together.
First off, why do you use type application/ld+json instead of text/javascript as stated in the ApplicationInsights-JS readme?
To debug this issue try to insert the contents of appinsights.js directly into the script tag.
The following should work:
<Helmet
title={data.site.siteMetadata.title}>
<html lang="en" />
<script type="text/javascript">
{`SCRIPT`}
</script>
</Helmet>
If not, try dangerouslySetInnerHTML instead.
Note the back ticks inside {}. If this is working correctly, proceed with your component.
As I know – correct me if I go wrong – the use case of directly importing a file in Gatsby belongs to static files. You could simply import logo from './Logo.svg' and this will return the url to that file. Behind the scenes, Webpack will include that file in the bundle and you can reference it like in src and href attributes.
If you want to include that JavaScript string from a component (that what you placed inside the components directory is not a component), you should write a component for that, which renders this JavaScript.
I didn't try that myself, but I think this could work with some modification.
The errors you are facing are part of eslint, I think. The compiler (Webpack?) expects non-minified ES6 JavaScript. Again, correct me if I am wrong.
Some sort of a stateless functional component should help you here:
appinsights.js
import React from 'react'
const AppInsights = () => {
return `
SCRIPT
`
}
export default AppInsights
layout.js
import AppInsights from './appinsights.js' // Replace with your path.
<Helmet
title={data.site.siteMetadata.title}>
<html lang="en" />
<script type="text/javascript"><AppInsights /></script>
</Helmet>
But I think it is safer to work with dangerouslySetInnerHTML as before.
https://www.gatsbyjs.org/docs/adding-images-fonts-files/
If you put a file into the static folder, it will not be processed by Webpack. Instead it will be copied into the public folder untouched.
You create a folder as your_gatsby_project_folder/static (not in project/src), and put your minified files from outside in it. Whatever is in the static will be copied onto public folder so you can link to them as usual
// in your react file, you can use script tag to link to the minified files
render(){
return(
<div>
<script src="/path/to/your/min.js" />
whatever
</div>
)
}
If you want to take a minified javascript file and add it to a <script tag in the <head of your Gatsby site, you do not want to import it.
Check the docs on custom html.
You could put the file into the static/ folder, then it will be copied into your built output. Then cp .cache/default-html.js src/html.js and edit src/html.js to add the <script tag you want.
However, this is not a very good approach. You would be better to give Gatsby the unminified file if you can. Then you can import it in the normal Gatsby way, and Gatsby will handle minifying it. Gatsby is really good at figuring out what javascript is required where. It's part of why Gatsby sites are so insanely fast. You will lose some of that advantage if you use the approach above.
I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.
I am facing below exception in IE-8 when I am loading the angular related page. It works fine in other browsers. Any specific reason?
SCRIPT5022: Argument 'module' is not a function, got undefined
angular.js, line 975 character 5
I had this same issue (when on IE < 9) and it took me forever to track it down...
angular.module('app', ['app.directives', 'app.filters', 'app.services', ]);
Note the trailing comma after 'app.services'.
I get errors like that when I try to inline end the script tag causing IE to not load all my scripts. Check if you have end tags for all your script includes.
To illustrate:
<script src="js/services.js"></script>
<script src="js/controllers.js"/> <!-- THIS IS A PROBLEM FOR IE -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
On IE9 this will result in:
SCRIPT5022: No module: myApp.filters
angular.min.js, line 17 character 195
Not entirely the same, but I can't test it on IE8. On Chrome however, this works perfectly. The weird thing about this, is actually the thing it can't seem to find, is in the script following the one with the inline ending. I can't really explain that.
Now, when I close the script tag like this:
<script src="js/services.js"></script>
<script src="js/controllers.js"></script> <!-- THIS WORKS -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
It works like a charm.
To sum it up, AngularJS tries to find your module called 'module', but is not able to find it. Probably due to a script that is not loaded. Try to find a script tag which closes inline, and end it as descibed above.
Hope that helps.
Another thing that might cause this is using keywords for object properties. I had three modules with the error above:
statistic.import = !statistic.import;
default: $scope.newGrid.default
$scope.data = JSON.stringify({export: exportParams})
The offending properties being import, default and export.
I don't know if you're still walking around same problem, but i've found up a possible cause:
when you declare any angular module you must inject dependences some like this:
angular.module('MyStore', ['ng','ngRoute']);
if you need invoke that module from another place to perform any action you probably mismatch if you attempt to inject dependences again... then you must call it by its name like this:
angular.module('myStore')
otherwise you will exploit your brain looking for the solution.
I hope it helps!
I want to use JSTL in my AppEngine JSP to render data. I have completed the Guestbook demo, which works fine for me, including the JSTL calls like this one (from the linked example):
<blockquote>${fn:escapeXml(greeting_content)}</blockquote>
However, I then tried to use JSTL through tags, e.g. this:
<fn:out value="greeting_content" />
or just
<fn:out value="" />
I get a 500 error and an exception stack trace saying:
org.apache.jasper.JasperException: /guestbook.jsp(80,4) No tag "out" defined in tag library imported with prefix "fn"
The JSTL library is imported at the top of the file as in the example, i.e.
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
And as expected, if I remove that line the ${fn:something} calls stop working.
Does anyone have an idea why that is? JSTL is supposed to work that way, isn't it? I feel like I'm missing something fundamental here, but I just can't find what it is.
You should use <c:out value=""/> for output.
I went through the docs to find for a Ext.example.msg but, i am unable to find it.
According to this example, they have successfully used Ext.example.msg. How is this ?
I had another question on SO which is related to this.
UPDATE
I am trying to use the following code in my application;
Ext.example.msg('Button Click', 'You clicked ta button');
When i execute the code, i get an error saying TypeError: Ext.example is undefined .
To overcome this error i did the following;
1.) added <script type="text/javascript" src="app/extjs/examples/shared/examples.js"/> in my app.html file
2.) added the following in my app.js file
Ext.Loader.setPath('Ext.example', 'app/extjs/examples/shared');
Ext.require(['Ext.container.Viewport',
'Ext.example.*']
);
None of the above methods works, i still get the same error message.
My project folder structure is as follows;
Project_Name
->app (folder)
--> app.html
--> app.js
--> extjs
---> examples
---->shared
----->example.js
When you include your js script in you index.html, as you did in 1:
<script type="text/javascript" src="app/extjs/examples/shared/examples.js"/>
You no longer need loader or to require it - you have explicitly included it and it is clear the script content will be in scope.
It appear to me your path is incorrect: There's no app/extjs and it would make sense to have the extjs folder as sibling to that of your app. Thus this should work:
<script type="text/javascript" src="extjs/examples/shared/examples.js"/>