I am trying to put an iframe element inside the test, and can't figure out how to open a document that is located somewhere on the disk instead of remote website which works. So Karma is starting it's server, and doesn't see the path inside the src attribute because I guess it has different document root.
element = angular.element('<iframe src="fixtures/myhtmlfile.html" ></iframe>');
$('body').append(element);
Is there a way to tell karma 'look here for relative paths' ? By relative, I mean relative from the location of the actual directory where the test is located.
You'll need to use the karma-ng-html2js-preprocessor within your karma.conf. See that repo for example usage. Basically, it will preprocess your html files, converting them to js files, which karma will then serve.
This preprocessor converts HTML files into JS strings and generates Angular modules. These modules, when loaded, puts these HTML files into the $templateCache and therefore Angular won't try to fetch them from the server.
Related
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I am using sencha cmd 6 for building my application.
my folder structure is
classic
src
model
view
account
jobs
portal
portal.js
controller
store
production build process execution is successful but when i load that build its giving .js file not found error.
So i include all js files in folder structure into main js portal.js then .js error is removed and build works.
But i dont want to include all these list of files in one single js, so can we skip the js include part from portal.js and use any property or attribute to include all js files ?
You can specify with * like 'Ext.chart.*' in requires section of Ext.app.Application.
Hope this helps.
I have created a directive that uses angular-translate and it is working fine with this configuration :
$translateProvider.useSanitizeValueStrategy('escape');
$translateProvider.useStaticFilesLoader({
prefix: 'i18n/messages_',
suffix: '.json'
});
$translateProvider.preferredLanguage('fr');
$translateProvider.fallbackLanguage('fr');
$translateProvider.useLocalStorage();
and two files in i18n folders :
* messages_en.json
* messages_fr.json
Now I want this directive to be usable in another angular application so I use it as a bower dependency of my new application with all necessary .js and .html needed but the json files in a single .js file using templateCache.
The directive is working in my new application, however my new application is trying to load the json file from http://localhost:9000/i18n/messages_fr.json ans gives a 404 error.
This error is normal as I do not include the json files in my dependency, however I do not not know where and how I should. If I include them in my bower depdency or add it in templateCache, it is not working.
An easy solution is to copy the file in a i18n/ folder of my application but it is not what I want, I want to reuse the files defined with my directive. I tried modifying the useStatidFilesLoader attributes but without success so far.
EDIT
I figured the real problem was I intended to use two configurations of the translateProvider :
- one with common messages file in my dependency config
- another one with another message file name in my new application config.
But as it is a provider, hence a singleton, only one configuration gets executed. So it is not possible to load messages from two different files or I missed something in ngtranslate configuration.
What I did is including the common messages file in my bower dependency and add a grunt task in my new application that merge this message file with my new application message file. To do this I use grunt-merge-json.
I had the same question and here is your answer. All you need is
$translateProvider.useLoaderCache('$templateCache');
Would it be possible to support the $templateCache?
I'm looking at this sample Angular App.
In the main html file called [index.html][2], there is this line:
<div ng-include="'header.tpl.html'"></div>
However, there is not file header.tpl.html in the same directory.
How then does Angular know where to find this file?
The linked sample app is built using Grunt, so the file/folder structure of the built application differs from the one you see in the repository.
For example, the templates you are asking about, are collected by html2js (Grunt task) and compiled into a single JavaScript file containing code that adds all templates to $templateCache (causing them all to be included on app initialization instead of being lazily loaded when required). When the ng-include starts looking for files, its first step is looking into the $templateCache. Only when it cannot find the template there, it tries to load it from the server (and save it to $templateCache for subsequent uses).
See Gruntfile.js in the repository for build process details.
I have set up my application based on this example
http://backbonetutorials.com/organizing-backbone-using-modules/
The thing that I now have more than 50 html files. It takes more than 5 seconds to load all files on first load. I know using node.js and require.js I can compress or minify the .js file and .css files but was wonder if there are any way we can compress all html templates into one file to speed up.
I'm about to face this very problem in my project and here's what I plan to do:
Write template loader function so that details of how templates are retrieved are encapsulated within. After that I only have to change one place in code when template handling logic changes.
At build time, compile my Handlebars.js templates into JS code. The process is described here.
Use R.js from require.js package to build single JS file from all compiled templates.
If you are using templates like described in that article (with require !text, _.template etc), then they will be compressed into JavaScript file as well. Give it a shot.
It doesn't make sense that 50 html files are loaded simultaneously into the browser, by right the require.js and node.js should be loaded once into the browser. Then ur index.html will select the html file amongst the 50 to append further as its content.