I just though I make my life easier by sticking to common structures, so I started transferring a chrome browser extension to a yeoman template format
(https://github.com/yeoman/generator-chrome-extension).
Unfortunately it simply does not work when I try to just add my first basic bower source that I need:
https://github.com/Yaffle/EventSource
Here is what I did:
Set up the new extension with the yeoman helper
$ bower install EventSource --save
Added event source to the manifest like so
"background": {
"scripts": [
"scripts/chromereload.js",
"app/bower_components/EventSource/eventsource.js",
...
Add "new EventSource('http://localhost:9292/updates');" to background.js
Other than that the project is untouched.
And whenever I start the project with grunt it fails not finding EventSource like so "'EventSource' is not defined."
Adding the eventsource.js directly to my script folder and require it from there fails even worse by linting the eventsource.js file (that works perfectly fine) and aborting it for too many warnings (like using single quotes).
Previously this whole project worked pretty fine without grunt/bower and now it won't even start after I added the first real line of code. This is quite disappointing for a tool that is supposed to make your life so much easier.
Does it fail because of the warnings in the eventsource.js? In the first case (via bower) it does not say anything about this so I'm not sure.
I could go on trying out different combinations but I'm obviously missing a core concept or something like this here.
Any idea?
Update:
After some more trying and giving up i found the magic "grunt bowerInstall" command, to add the script-tags in the template automatically - still no help.
I did also try again on a fresh project with just jQuery (assuming this has to work..), well it still does not.
Neither in the popup.js (where the html template includes jQuery) nor in the background script (where the manifest includes it).
I probably read every manual/how-to on hot to use either of those components and still get nowhere.
Another day another try:
Starting with a clean mind i looked a bit more into it today finding out that apparently you have to "whitelist" globals like $ in jshint like so:
http://jshint.com/docs/options/#jquery
Still not sure if this is actually the best approach as it seems very counter-intuitive with promised ease of getting started of the yeoman/grunt/bower framework.
EventSource is probably a global variable. You can try declaring it as false in the .jshintrc file to prevent it from being overwritten.
"globals" : {
"chrome": true,
"crypto": true,
"EventSource": false
}
See if that works.
Read more about .jshintrc + global variables at: JSHint and jQuery: '$' is not defined
Related
After searching for a bit and finding others having somewhat of the same problem, but no solution for me, I figured it was my turn to seek help.
I have npm along with parceljs setup for webserving (I'm new to these but I'm quite confident it's working as you can see some output in the image I've posted)
I have the typical problem of images not displaying.
Status code of the image is returning 304 OK, and is it normal to not see the the image listed in the directory under the 'Sources' tab in Developer tools?...
The issue is with the way you are loading the image urls as hard-coded strings, for example, you wrote this:
this.load.image('sz','./src/assets/gfx/sz0001.png`)
The way this is written, parcel doesn't know that this string is actually a reference to an image file, so it doesn't know to copy over the image into your output folder and ensure that the path ends up matching the actual output location.
The way parcel works, if you want to include an asset (like an image) into your bundle and reference it by URL in some other javascript context (like the this.load.image function), you should use an import statement or a URL constructor (see docs).
So you would instead write:
import myImageUrl from './src/assets/gfx/sz0001.png`;
// 'myImageUrl' will be a string that points to the location of the image
// This will also tell parcel that sz0001.png is a dependency of this project
// so that it can take care of copying it over to the dist output.
this.load.image('sz',myImageUrl)
Another tip is that the template you referenced uses parcel-bundler which the old, unmaintained 1.x version of parcel. I'd recommend upgrading your project to parcel 2, which on npm is simply parcel (see migration guide).
The green box, is shown if the asset is not found, or some other error.
Since I'm not 100% sure how parcel works and I don't know your parcel configuration and which parcel plugins you are using (I'm assuming parcel can be configured).
You could solve the problem by: manually copying the assets folder from src/ to dist/, than it should work. (atleast this work for me, when using this parcel template, to test the issue)
Maybe a parcel - plugin like parcel-plugin-static-files-copy, could also solve the problem, and/or be useful to keep the static files up-to-date.
I have meteor app which is based on wekan https://github.com/wekan/wekan.
I have written some tests which are in the /test directory.
For my tests i use https://github.com/meteortesting/meteor-mocha
When i run meteor test --driver-package meteortesting:mocha the tests run but fail because my code is not fully loaded.
So i tried to use the --full-app parameter. Now the app code loads and runs somewhat complete, but 0 tests are executed.
What is wrong here?
How can i execute my tests with all the code?
I read this question quite often, so let me pick this apart, because there are multiple ways of doing things. Btw - if you have a new project, chances are high you're already avoiding eager loading.
Eager loading
This option was introduced in Meteor 1.3 and has been the default option ever since.
When running meteor or meteor run in this mode, all files excepted of those in the folder /imports are loaded automatically. There are also a few other rules to it, all can be found on this page: https://guide.meteor.com/structure.html#load-order
When running tests in this mode, different rules apply and in fact no files is loaded that do not match the following expressions:
meteor test only loads files matching *.test[s].*, or *.spec[s].*
meteor test --full-app only loads files matching *.app-test[s].* and *.app-spec[s].*
Additional files can (as you're used to) be imported as usual. All this can be found on this page: https://guide.meteor.com/testing.html#test-modes
Avoid eager loading
Since Meteor 1.7, following a discussion of how to get rid of this special /imports directory (https://github.com/meteor/meteor-feature-requests/issues/135), a new way was introduced:
https://github.com/meteor/meteor/pull/9690
https://github.com/meteor/meteor/pull/9714
When a section like the following exists on the package.json file of your project, Meteor will load only those files in the respective modes:
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
},
"testModule": {
"client": "client/tests.js",
"server": "server/tests.js"
}
}
In this mode, you can differ between tests and full-app tests by Meteor.isAppTest().
If a section doesn't exist, eager loading is used instead for this section. We in our projects use eager loading for tests but prefer a non-eager way for the main application. Therefore we only define the mainModule section, but not the testModule section.
Sadly, those details are not well presented in the Meteor Guide. They can be found in the release notes of Meteor 1.7: https://docs.meteor.com/changelog.html#changes-21
Hope this helps and gives a better insight of how loading of files works.
I have managed to build my angular app out as a dev build. I haven't done it as a production build yet as it gives me a few errors and i just need to test the dev build.
The dev build process goes fine, no errors or anything. I then use the files from the dist folder in a nginx docker container to host the files.
The problem is nothing is displayed but a white page and in the console i get an error saying 'Uncaught TypeError: Cannot read property 'id' of undefined'. The full message below doesn't seem to point to anything i have written and i've spent several hours searching online but can't find anything on this problem.
I've tried a few different things such as running 'npx ivy-ngcc' which i read manually compiles some stuff. Is there anyway i can get more details on the error to see if it's something i have done?
UPDATE
So i have restored the line that i commented out in main.ts as mentioned in the comments below. I have also tried 'ng build --aot' as suggested which presents me with a series of errors that all seem to relate to devextreme components that are used. I find this strange as i started the project with the devextreme angular starter project from github.
i get messages such as:
'dx-scroll-view is not a valid HTML element'
'node_modules/devextreme-angular/ui/drawer.d.ts - error: appears in
the NgModule.imports of SideNavOuterToolbarModule, but could not be resolved to an NgModule class'
If you go in the devtools and click on Sources, "Don't pause on exceptions" and check "Pause on caught expecptions" and continue until you get the "id error" you will find what module the error is thrown. In my case was a third party library called 'ngx-card/ngx-card' and it's module was the cause of the error (CardModule). Hope this will help find at least the cause of the error
I managed to solve the problem by disabling ivy in the angular compilation options. As soon as i did that it worked building both dev and production versions and is now working perfectly within Nginx.
Thanks to everyone who offered help :)
In tsconfig.json of your Angular project, put this to disable Ivy, the new Angular template engine
{
...
"angularCompilerOptions": {
"enableIvy": false
}
}
Typically, if it's not something that you've written, it tends to be an issue w/ your implementation - i.e. "Visiting a food vendor and ordering a food item they don't provide".
I know it's not a specific answer, but ensuring that you have appropriately configured things in your app.module would be a good first step. Perhaps attempting to build w/ AOT will also give you some more verbose failures that stem from attempting to build out.
Hopefully this helps another poor soul.
To anyone using devextreme, make sure you update your version to at least 19.2.5
https://github.com/DevExpress/devextreme-angular/issues/975#issuecomment-580172291
Starting with version 19.2.5 we support the IVY compiler.
I had the same issue and fixed it by changing from
loadChildren: './app/page/account/account.module#AccountModule'
to
loadChildren: () =>
import('./app/page/account/account.module').then(
(m) => m.AccountModule
)
in app-router.module.ts
The root cause of your error is very likely to be a module that you needed to load explicitly but didn't, or a circular reference in your own modules. Rodrigo has a good answer but to be more specific, you need to find the registerNgModuleType function in Angular's core.js and set a conditional breakpoint on the first line. The condition should be !ngModuleType || !ngModuleType.ɵmod. (You can set a conditional breakpoint in most modern browsers by right-clicking the line number.)
Once you've paused execution just before the exception happens, you can look at the value of ngModuleType if it's not undefined, or walk up a frame or two in the scope and see what the value of imports was.
For me, this issue occurred while using Storybook.
The reason it happened was because of the way I was precompiling the node modules. I was doing:
Incorrect
ngcc --properties es2015 browser module main --first-only
Correct
ngcc
Using this approach fixed it
I have created a web site using backbone + requirejs + bootstrap on client side and php REST on server side. The site contains a lot of .js file. I use requirejs to load the .js when it is needed (to implement asynchronous loading).
However, I have start using Node.js + Yeoman + grunt + bower recently. I use Yeoman webapp generator to create the basic structure of my web again. When I build my web, it concat all the .js files into 1 single .js file and put the tag on the index.html to refer it.
From my understand the pros is that the whole .js is cached in client's browser. which is slow at first time visit, but fast on re-visit. Since everything is concat to 1 file and it is loaded to the client's browser, so I guess the asynchronous loading is not work in this case. (correct me if I wrong).
* the web site is created for both mobile and desktop. (1 src for 2 version)
Should I concat all .js files in 1 single file
OR should I use requirejs to require the .js when I need it (Asynchronous loading)?
How to config requirejs in Node. I have tried it in normal way (include the data-main in index.html, when I compile using grunt build. it give me error "... is no more support".
Is browserify similar to requirejs in Node?
I have spent a week to figure it out already but still no luck. Hope someone can point me to the right direction. Thanks a lot.
The .js file structure is something like this:
-app
-vendor
-jquery.js
-backbone.js
-assets
-js
-model
-person.js
-collection
-people.js
-router.js
-controller.js
-dist
-js
-build.js
i had familiar issues. So lets start with strategy of file concatenation. There are three major ways to follow:
first - always concat all modules in one file, in this case you loose on first start and may win or next starts, but you can face another issue - you use less then half of modules from concatenated file at a time, but always load all modules.
second way is to build specific concatenated file with specific module set for each type of page - so you know how many page type you have and build file for each - following this you can decrease size of file, but its hardly to maintain and need manual sets correction in case of page changes.
third - build 1 concatenated file with libs and modules which in use nearly on all pages, all other stuff (additional modules, views, special models and collection) load on demand. This way is good in case of SPA pages.
Let me say a few words about grunt + r.js configauration.
Keep this link for first times .
Here is the sample of config:
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
name: "path/to/almond",
out: "path/to/optimized.js"
}
}
}
Main point here mainConfigFile - it is a file then you keep require.config
Next step - configure r.js - keep this link its very helpfull as describe all possibilities of r.js.
Usually its quite enough to checkout these links.
Also you can checkout recommend file structure for multi page site to avoid issues in future.
Also here is a link to a similar post - you may find it usefull.
If you have any additional questions let me know.
And a few words about CSS - logic nearlly the same : you can build separate file for each page or create sinngle. The main point here is how large your site is. In my case i've choose second option, but to be honest first one is more scalable, especially in large projects
I can get the requirejs work with Backbone now. However, I cannot use Marionette with error something like "Backbone is undefined". I've install Marionette with this command "bower install marionette --save". I did some search on google, and someone said use the AMD version of Marionette should fix this issue and after replace Marionette with AMD version it is work.
But my question is how can I install the AMD version of Marionette using "bower install"?
My web use bootstrap. When I compile the web with "grunt build". it copy bootstrap's font from "app/bower_components/bootstrap/dist/fonts" to "dist/bower_components/bootstrap/dist/fonts" but the web is refer the font on "dist/fonts". How can I change it to refer to the right directory?
I use yo webapp (with bootstrap) to generate the structure of my web.
I'm looking for some middleware modules that allow me to render ".css" from ".scss", ".html" from ".jade", ".js" from ".coffee" on the fly without rendering to disk.
Every module I've encountered so far wants to write to disk before serving it instead of just streaming it.
Obviously this is only for local development since I'm not interested in dealing with file-revving and caching problems.
Answering my own question here:
The middleware to use is compile-middleware. Works fine by default with connect, but with express I had to modify it in order to not write headers (ugly i know, but time waits for no one) : https://github.com/airtonix/compile-middleware
implementation:
https://gist.github.com/airtonix/9601224
Original Credit goes to (You should try using this one first):
https://github.com/shinohane/compile-middleware
You should simply use a JavaScript task runner like:
Grunt: http://gruntjs.com/ or
Gulp: http://gulpjs.com/
These plugins could help you get started (gulp related):
https://www.npmjs.org/package/gulp-watch
https://www.npmjs.org/package/gulp-jade
https://www.npmjs.org/package/gulp-coffee
https://www.npmjs.org/package/gulp-sass
Here's a simple tutorial: http://www.codersgrid.com/2014/01/11/gulp-js-streaming-build-tool-beats-grunt-js/
I got nothing against grunt, both of them are awesome :)
Hope it helps!