I'm rewriting my question to be more detailed and more clear.
i have a project like this:
com.mycompany.modulue1
------------------------------------>client
------------------------------------>server
------------------------------------>shared
------------------------------------>module1.gwt.xml
com.mycompany.modulue1
------------------------------------>client (JSNI - create a method to access methods in module2)
------------------------------------>server
------------------------------------>shared
------------------------------------>module2.gwt.xml (using add-linker name="xsiframe")
in module1.html i added the following script:
"script type="text/javascript" language="javascript" src="module2/Module2.nocache.js"
"script type="text/javascript" language="javascript" src="module1/Module1.nocache.js"
now i get "module2" need to be recompiled every time (even if the env. is clean and recently built
the JS method that is defined in module 2 is not defined when the server is up.
i'm using external server in dev mode (for EJB use)
What I'm doing wrong?
Thank you
Ahmad Igbaria
Not sure I fully understand your problem but judging by the title:
If you have a page that loads 2 distinct GWT applications, you can run only one of them in DevMode by subtituting gwt.codesvr in your URL with gwt.codesvr.moduleName, where moduleName is the name of the module to run in DevMode. That way, the other module won't switch to DevMode and will thus run in production mode.
This however only works with the xsiframe linker (for the one module you want to run in Dev Mode at least)
After so much time and headaches, I have found the solution it's very simple, you need to add the linker to both modules not only the one you want to use as a pre-compiled!
Related
I am following the article describing setting up module federation: https://nx.dev/l/a/guides/setup-mfe-with-angular
Starting with generating the workspace, adding the angular plugin, and adding the dashboard application.
When serving the dashboard application I get an error from styles.js:
Uncaught SyntaxError: Cannot use 'import.meta' outside a module
It is being loaded as:
<script src="styles.js" defer></script>
Doing some quick searches seems to indicate that this thing should have type="module" on it.
However there doesn't seem to be any kind of configuration I can find to modify the line being added to the index.html.
I have checked the regular template generated by angular, it uses the defer style to everything, so the other js file entries are being changed to type="module" some place. The normal styles.js also does not contain any "import.meta" string.
Any solution would be helpful.
TL;DR: thats fine. You should not see this error in the production
There is a note on the https://nx.dev/guides/setup-mfe-with-angular you mentioned saying:
NOTE: When serving MFEs in dev mode locally, there'll be an error output to the console, import.meta cannot be used outside of a module, and the script that is coming from is styles.js. It's a known error output, but it doesn't actually cause any breakages from as far as our testing has shown. It's because the Angular compiler attaches the styles.js file to the index.html in a tag with defer.
It needs to be attached with type=module, but doing so breaks HMR. There is no way of hooking into that process for us to patch it ourselves.
The good news is that the error doesn't propagate to production, because styles are compiled to a CSS file, so there's no erroneous JS to log an error. It's worth reiterating that there's been no actual errors or breakages noted from our tests.
Check the scriptType
This issue has to do with how the imports are set up in the compiled app. You can update the scriptType in your webpack.config.js by adding the scriptType:
module.exports = {
output: {
uniqueName: "YourUniqueAppName",
publicPath: "auto",
scriptType: "text/javascript"
},
I have a question related to karma and ui5.
Current situation is as follows:
I use karma-openui5 and load ui5 via bower. Karma-openui5 simply adds some bootstrap information and the core-file itself:
files.unshift({pattern: ui5path, included: true, watched: false, served: true});
which leads to this head entry:
<script type="text/javascript" src="/base/bower_components/openui5-sap.ui.core/resources/sap-ui-core.js" crossorigin="anonymous"></script>
Ui5 is designed to load everything else related to the core-file but is served by sap in different bower packages this means, request is:
http://localhost:9876/base/bower_components/openui5-sap.ui.core/resources/sap/m/library-preload.js
but it's actually located under
http://localhost:9876/base/bower_components/openui5-sap.m/resources/sap/m/library-preload.js
I could overcome this problem with proxy entries. But i can`t include the .css files which one are in a separate bower package. I can't see a way to proxy only */**/.css requests to another directory. Therefore this way just doesn't work well.
Openui5 has already some middleware (connect-openui5) to resolve this problems and server everything as expected under localhost:XXXX/resources/.
How and can i add custom script tags in karma? like:
<script type="text/javascript" src="resources/sap-ui-core.js"></script>
How can i add a middleware (connect-openui5) to handle all requests to /resources/**/*?
The solution was to use the connect middleware from sap, started with grunt and proxy to this.
I packed everything in a yeoman generator, if anyone is interested in the setup.
https://www.npmjs.com/package/generator-ui5
I would like to create a test suite which will be run with karma against my app which is using webpack to build itself. I have two entrypoints, app and vendors. These are set up through my webpack.config.js file here. The resulting bundle.js should contain both of these entrypoints in its generated file.
My karma (mocha) tests residing in test/spec/*_spec.js are currently pointing to specific components, via require statements like:
var app = require('../src/scripts/App')
They also utilize react/jsx which seems to be causing problems during the test run where I get jsx errors:
Module parse failed: /Users/dmarr/src/status/test/spec/app_spec.js Line 10: Unexpected token <
You may need an appropriate loader to handle this file type.
I'd like to keep test runs quick as possible as well as fast build times for testing with webpack-dev-server during development by minimizing babel transforms to only where needed.
What do I need to do in karma.conf.js to get my builds working? Here is the karma.conf.js file I'm playing around with.
Note, that I do have this working without breaking out the vendor bundle here: https://github.com/bitwise/status
Thanks for any help,
Dave
In a similar setup, disabling CommonsChunkPlugin (for testing only) worked for me. Give it a shot!
I followed this,
Go download and install VS Web Essentials
Add a new Item to your project, pick CoffeeScript as the item type
Write your CoffeeScript code, when you build the project or Solution, it will create the JavaScript code.
But, it does not create any compiled JS file.
How can I compile coffeescript? Do I need to install node.js?
I haven't tried Web Essentials for VS yet because it's easier for me to just include the coffee-script.js file using a script tag and compile it using the browser. I also console.log the compiled JavaScript output to the browser to see what it is generating. Here are a few examples using this technique:
https://github.com/jabdal/coffee-script-examples
Remarkably, it will sometimes find errors in the resultant JavaScript and go to the line with the error.
I'm guessing you could then send the JS back to the server and save that to a JS file (along with a checksum of the original coffeescript file). Then instead of compiling next time, you could include the JS file that is on the server if it is the same version (compare checksum before compiling on client).
I've read somewhere there is a .NET implementation of JavaScript that might work with the coffeescript compiler so that you could compile on the server without having to use Node but I don't think it would hurt to offload it on the client. A nice way would be a runat="server" tag for script type="text/coffeescript" tag so that the server would replace the coffeescript tags with javascript tags along with the compiled code and also generate corresponding js files where there are coffee files.
I've used Yeoman to make a quick project skeleton using the yo webapp generator command. In the resulting Gruntfile I see that it's setup to compile CoffeeScript but it seems like its just sticking compiled files in a tmp folder.
coffee: {
dist: {
files: {
'.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee'
}
},
},
How do these get included in the project during development. I'm not using RequireJS.
The yeoman docs are unclear on how to use coffeescript. They only mention that it gets automatically compiled.
Using yeomen 1.0.0-rc1.4. I use:
$ yo angular --coffee
The resulting project has controller and app scripts in CoffeeScript.
grunt configuration file remains in js (what is not really a problem).
Running
$ grunt test
runs tests and all seems fine.
$ grunt server
is also doing what one expects (build the app, test it, starts server, opens the app in web browser and starts watching for changes, so if I change a coffee script file, it is quickly reflected in the web broser.
Documentation also states, one can use yo to add particular pieces like
angular:controller
angular:directive
angular:filter
angular:route
angular:service
angular:decorator
angular:view
each can be called with a --coffee switch and get the script in CoffeeScript, e.g.:
yo angular:controller user --coffee
I just found an issue in the github repo referencing this problem. https://github.com/yeoman/generator-webapp/issues/12
It offers a temporary solution: https://github.com/yeoman/generator-webapp/issues/12#issuecomment-13731929