Make ng-http-loader run with SystemJs - systemjs

I want to add the ng-http-loader library to my Angular5 project, but I do not know how to get it running with SystemJS. I know I have to add something to the systemjs.config, but I tried to target several files inside the node_modules/ng-http-loader/ directory or the directory itself, but I always get the error, that he can't find the module.
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng-http-loader/ng-http-loader.module
wrapFn#http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:30
ZoneDelegate.prototype.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:425:17
Zone.prototype.runTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28
ZoneTask.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:499:24
invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:9
globalZoneAwareCallback#http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17
Error loading http://localhost:3000/ng-http-loader/ng-http-loader.module as "ng-http-loader/ng-http-loader.module" from http://localhost:3000/app/app.module.js
Stack trace:
(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng-http-loader/ng-http-loader.module
wrapFn#http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:30
ZoneDelegate.prototype.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:425:17
Zone.prototype.runTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28
ZoneTask.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:499:24
invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:9
globalZoneAwareCallback#http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17
Error loading http://localhost:3000/ng-http-loader/ng-http-loader.module as "ng-http-loader/ng-http-loader.module" from http://localhost:3000/app/app.module.js
I also asked the author, but he is not experienced with systemjs and therefore was not able to help me. Does anybody else know which file I should target?
Thanks in advance.

Having never used ng-http-loader, try this as a starting point:
System.config({
"paths": {
"npm:": "node_modules/"
},
"map": {
"ng-http-loader": "npm:ng-http-loader"
},
"packages": {
"ng-http-loader": {
"main": "ng-http-loader.module.js",
"defaultExtension": "js"
}
}
It's possible that other mappings are required in addition to the above e.g. to the components folder etc.

Related

Need help to complete installation of linter-stylelint for Atom

I am really sorry for this newbie question but I can't see how solve that...
I installed linter-stylelint and tried to configure it like it's said there:
https://atom.io/packages/linter-stylelint
So:
- I placed a stylelint.config.js file in my project.
- In the settings, I checked Use standard
- But can't see what I have to do to "Add a stylelint section in your package.json"
On my Mac I see the file:
/Users/eric/node_modules/stylelint-config-standard
But I don't know what code do I have to insert inside...
By the way, when I try to use linter-stylelint in a css file I get the error message:
Unable to parse stylelint configuration
Unexpected token :
In my stylelint.config.js, I have the following code for now:
{
"extends": "stylelint-config-standard"
"rules" {
"no-unsupported-browser-features": [ true, { "severity": "warning" }]
}
}
Thanks if you can help me!
;)
Paul
So: - I placed a stylelint.config.js file in my project. - In the settings, I checked Use standard
According to the docs you reference, you should either place a stylelint.config.js file or check "Use standard".
I get the error message Unable to parse stylelint configuration Unexpected token :
This is because the JSON of your configuration file is invalid. It is missing both a comma and a colon. Use a service like JSONLint to validate JSON. Your fixed config is:
{
"extends": "stylelint-config-standard",
"rules": {
"no-unsupported-browser-features": [true, {
"severity": "warning"
}]
}
}
Even though this config is valid JSON, it won't work because the no-unsupported-browser-features rule is no longer built into stylelint. It is, however, available as a plugin. You'll need to follow the plugin's instructions if you wish to use it.
I am really sorry for this newbie question
It's fine. We are all newbies in the beginning! As you're just getting started with stylelint, I suggest you remove the stylelint.config.js file and ensure the "Use Standard" box is checked. This is likely the quickest way to get going. Once you are more comfortable with the tool, you can investigate creating your own configuration file for your specific needs.

how do you get flow to work with babel module-alias?

I am trying to get flow to type check my code but it is giving me an error when it can't find paths that have been rewritten using babel-plugin-module-alias.
I have unsuccessfully tried to use the resolve_dirname option in the flowconfig.
Can someone please tell me if it is possible to use this babel plugin with flow?
.babelrc
{
"plugins": [
"transform-flow-strip-types",
["module-alias", [
{ "src": "./app", "expose": "app" },
]]
]
}
.flowconfig
[options]
module.system.node.resolve_dirname=app
app/main.js
import bar from 'app/foo';
app/main.js:3
3: import bar from 'app/foo';
^^^^^^^^^^ app/foo. Required module not found
module.system.node.resolve_dirname actually tells Flow where to start resolving things from. If you want Flow to resolve starting from 'app', you need to point it one directory higher than app.
Alternatively, you can probably also use `module.name_mapper='^app/([a-z-A-Z0-9$_/]+)$' -> 'src/\1'
Here is how this can be achieved with module.name_mapper setting in .flowconfig [options]. Works in flow version 0.56.0
module.name_mapper='^app/\([-a-zA-Z0-9$_/]+\)$' -> '<PROJECT_ROOT>/src/\1'

jspm not loading bundles with --inject

Been experimenting with jspm and systemjs over the weekend. Everything is working fine except for the bundling jspm offers. I can load individual files, but jsmp refuses to load the bundle file (which is optimized).
I'm creating the bundle file using:
jspm bundle lib/login assets/js/1-login.js --inject
This updates the config.js file which looks like:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
bundles: {
"1-login.js": [
"lib/login.js",
"lib/sample.js"
]
},
map: {....}
});
lib/login.js
import * as sample from 'lib/sample'
export function test() {
sample.testMethod();
}
lib/sample.js
import $ from 'jquery'
export function testMethod( ) {
console.log( $('body') );
}
So, according to the jsmp docs:
As soon as one of these modules is requested, the request is intercepted and the bundle is loaded dynamically first, before continuing with the module load.
It's my understanding that running
System.import('lib/login.js');
should load the bundle (and optimised file), but is doesn't - it just loads the actual file. What am I missing here? And as a bonus question, why is jquery not in the bundle list?
Well, figured out where I went wrong.
I keep all the generated assets in assets/js, but in my config.json I didn't change the baseUrl to reflect this. I did in fact have the baseUrl set correctly in package.json, which is why jspm didn't throw a lot of errors.
This was the same reason jquery wasn't loading, so problem solved :)

Sencha Cmd 5.0.1 with Extjs 5.0.1 issue

I am upgrading my Extjs to 5.0.1 (from 5.0.0 ) and also Sencha Cmd to 5.0.1.231
No compile time errors but on run time it is is not loading the application and giving the following error
Uncaught TypeError: Cannot read property 'baseUrl' of undefined
some other users are having the same issue..
http://www.sencha.com/forum/showthread.php?289872-After-update-to-5.0.1&p=1059537
Is this a bug or we are doing some thing different ?
Thanks
It looks like a bug, but I think Sencha are pushing towards using a microloader rather than just including the app.js file and the css ones. So my short answer is both! :)
Now the long one:
I was playing with setting up an ExtJS application that is to live far away from the webroot and at the same time to be available in both, development and production modes (environments).
Setting the app.json of the Sencha CMD app, so the microloader.js to load the required js and css files, proved a bit of a challenge.
My folder setup is as per below:
(Note, my build folder is outside the Sencha CMD application folder - MyApp - just to have the same path depth)
index.cfm
/far/away/from/web/root
....
/build
/resources
app.js
app.json
microloader.js
...
/MyApp
/.sencha
/ext
app.json
app.js
bootstrap.js
....
MyApp/app.json
{
/**
* The application's namespace.
*/
"name": "MyApp",
/**
* The relative path to the appliaction's markup file (html, jsp, asp, etc.)
*
* Below setting seems relevant for proper loading MyApp/bootstrap.js
*/
"indexHtmlPath": "../../../../../index.cfm",
......
"output": {
"base": "${workspace.build.dir}",
"page": {
/**
* Below is relative path from the build folder to the application markup file
*/
"path": "../../../../../index.cfm",
"enable": false
},
"microloader": {
"path": "microloader.js",
"embed": false,
"enable": true
},
"manifest": {
"path": "app.json",
"embed": false,
"enable": "${app.output.microloader.enable}"
}
},
/**
* Uniquely generated id for this application, used as prefix for localStorage keys.
* Normally you should never change this value.
*/
"id": "f6cd3e2b-6a0c-4359-a452-e07adda808ae"
}
Initially, in order to use the production build, was loading directly /far/away/from/web/root/build/app.js file and it throw the same error:
Uncaught TypeError: Cannot read property 'baseUrl' of undefined
Now, with the app.json configured as per above, I can pick in my index.cfm whether to load:
for production - /far/away/from/web/root/build/microloader.js
for development - /far/away/from/web/root/MyApp/bootstrap.js
I hope this helps someone.
Cheers,
Pencho

django-tastypie-swagger not serving Swagger's JS/CSS files

I have a fresh install of django-tastypie and django-tastypie-swagger.
http://localhost:8000/tasty/doc/ serves the necessary HTML, but doesn't pull in any of the CSS or JS that's needed to make it work.
http://localhost:8000/tasty/doc/resources/ works and shows:
{
basePath: "http://localhost:8000/tasty/doc/schema/",
apis: [
{
path: "/snap"
},
{
path: "/user"
}
],
apiVersion: "0.1",
swaggerVersion: "1.1"
}
But all the others (/schema/ and the static files) return 404 errors.
I had the same problem you had and solved it by creating a file under my project templates directory on the following path: templates/tastypie_swagger with the content of this file:
Note that the problem is caused by the STATIC_URL variable, which is misunderstood, I replaced that variable with my project url, and it worked perfect.
For anyone who encounter this problem in the future ... you might want to perform the following command after installing django-tastypie
python manage.py collectstatic --noinput
I had the same problem. Simple fix add 'django.core.context_processors.static' to 'context_processors' in settings.py. Than STATIC_URL will work.