i got an error "angular2-polyfills.js:126 GET http://localhost:3000/ng2-uploader/ng2-uploader 404 (Not Found)" in image upload in angularjs 2. but the class is in there in my folder structure. how i solve it?
I think that your SystemJS configuration isn't correct. You could try the following:
<script>
System.config({
map: {
'ng2-uploader': 'node_modules/ng2-uploader'
},
packages: {
(...)
'ng2-uploader': {
format: 'register',
defaultExtension: 'js'
}
}
});
(...)
</script>
Related
[SOLVED] services/ folder was at the same level than src/ , putting it inside src, following Vue.js Style guide, solved the error. Thanks guys.
When I run npm run serve I get that error, reading over (a lot) SO similar questions and trying everything didn't work, I don´t even know where that line ../services/Repository comes from (I changed the import path in BrandList.vue and nothing changes).
Here is my Repository.js
import http from "../http-common";
class Repository {
getAll() {
return http.get("/index");
}
}
export default new Repository();
This is where I import it, components/BrandList.vue
<script>
import Repository from "../services/Repository";
export default {
name: "brands",
data() {
return {
brands: []
};
},
methods: {
retrieveTutorials() {
Repository.getAll()
.then(response => {
this.brands = response.data;
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
},
mounted() {
this.retrieveTutorials();
}
};
</script>
Project tree
It should be ../../services/Repository as it's two steps up in the file tree.
From your screenshot you can immediately notice that the services directory is on the same level as the src. A simple fix would be moving the services directory into the src directory.
If you do not want to do that, you can change the import path from "../services/Repository" to "../../services/Repository".
Furthermore, if your project was created with the Vue CLI then the # import only works for files and directories in src/. You could update that if you wanted to.
I am using Vue typeScript with GraphQL. Whenever I try to use a query using deconstructor I get an error from Vetur. I am able to use GetPostData query in the Vue Component and its working fine.
Trying to use this - https://github.com/apollographql/graphql-tag#support-for-multiple-operations
Vue File
import { GetPostData } from "../../util/queries/getPageData.gql";
getPageData.gql
query GetPostData {
continents {
code
}
}
query GetCountries($code: String!) {
country(code: $code) {
code
}
}
Vue.config.js
const antdTheme = require("./src/theme.js");
module.exports = {
publicPath: "/",
pwa: {
iconPaths: {
favicon32: "./favicon.png",
favicon16: "./favicon.png",
appleTouchIcon: "./favicon.png",
maskIcon: "./favicon.png",
msTileImage: "./favicon.png"
}
},
css: {
loaderOptions: {
less: {
modifyVars: antdTheme,
javascriptEnabled: true
}
}
},
chainWebpack: config => {
// GraphQL Loader
config.module
.rule("graphql")
.test(/\.(graphql|gql)$/)
.use("graphql-tag/loader")
.loader("graphql-tag/loader")
.end();
}
};
I think it states that's what you can do but I don't think you really can.
It's better to put all your queries in a javascript file and import 'graphql-tag' to store queries instead of using a .gql file.
Just tested and Vetur didn't complain, could have been a bug that is already fixed.
According to graphql-tag package this case is supported (docs), so if Vetur complains must be an issue with the extension itself.
I am using ng2-daterangepicker but while importing import { Daterangepicker } from 'ng2-daterangepicker'; getting error while building as No such file or directory found on project root.
Did you update your system.js file.
map: {
// angular bundles
// add ng2-daterangepicker bundles
'ng2-daterangepicker': 'npm:ng2-daterangepicker',
'jquery': 'npm:jquery/dist/jquery.js',
'moment': 'npm:moment',
'bootstrap-daterangepicker': 'npm:bootstrap-daterangepicker/daterangepicker.js'
},
packages: {
// other packages already defined
// ng2-daterangepicker packages
moment: {
main: 'moment',
defaultExtension: 'js'
},
'ng2-daterangepicker': {
main: 'index',
defaultExtension: 'js'
}
}
Check your app.module as well.
import { Daterangepicker } from 'ng2-daterangepicker';
#NgModule({
imports: [Daterangepicker]
})
I have an Angular2 and Express based web app. I am trying to implement a secured API endpoint, and am cheating and using Auth0. I am following the guide, however, it doesn't seem to be getting on with my setup. My app is currently crashing with:
GET /angular2-jwt 404 30.433 ms - 14
Despite me having this system.config.js:
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
//all the other angular packages
'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js',
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
main: 'Rx.js',
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'angular2-jwt': { defaultExtension: 'js' }
}
});
})(this);
Why isn't my system.config.js working, or have I missunderstood how to use systemJS?
My index.html contains:
<script src="./config/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
if I add a console.log message directly above the System.config({ line of my system.config, it isn't triggered. Does this mean my system.config isn't being read?
You have a typo in system.config.js:
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api'
},no extension
packages: {
When I remove no extension, it requests as expected
GET /node_modules/angular2-jwt/angular2-jwt.js
if I add a console.log message directly above the System.config({ line of my system.config, it isn't triggered. Does this mean my system.config isn't being read?
Most likely, yes. You can check it by looking at the network activity tab in developer tools in your browser - there should be a request that fetches systemjs.config.js.
You can find an example with working import at https://github.com/fictitious/test-systemjs-angular (it does not do any authentication however).
I'm trying to write a web application with ExpressJS and Angular2. Zone.js appears to be trying (unsuccessfully) to load some #angular libraries, but I'm not sure how to approach fixing it.
My process so far looks like this:
Copied into my build/node_modules folder:
core-js/client/shim.min.js
zone.js/dist/zone.js
reflect-metadata/Reflect.js
systemjs/dist/system.src.js
Map /scripts URLs to node_modules folder in ExpressJS
On my index page, source the above libraries in script tags and load SystemJS:
System.config({
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
},
map: {
'rxjs': '/scripts/rxjs',
'#angular': '/scripts/#angular'
}
})
System.import('/app/bootstrap')
.then(null, console.error.bind(console))
And finally, my bootstrap.ts file:
import { bootstrap } from '#angular/platform-browser-dynamic'
import { Component } from '#angular/core'
#Component({
selector: 'testing-ang2',
template: '<span>WIP</span>'
})
export class Ang2TestComponent {}
bootstrap(Ang2TestComponent)
However, when I run this, I get the following errors:
zone.js:101 GET http://localhost:3000/scripts/#angular/platform-browser-dynamic/ 404 (Not Found)
zone.js:323 Error: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:3000/scripts/#angular/platform-browser-dynamic
zone.js:101 GET http://localhost:3000/scripts/#angular/core/ 404 (Not Found)
I've tried copying the #angular library into my build/node_modules and adding the index.js file from each of the folders listed into <script> tags on my main page, but that doesn't make any difference.
Could anyone suggest a way to fix this?
There was two major issues with the configuration above: most of the #angular libraries weren't copied across and SystemJS didn't know how to find them.
To fix the first, copy the entire #angular and rxjs directories into the build/node_modules directory.
For the second, SystemJS needs to be configured like so:
From an issue opened for Angular2 on github:
var map = {
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [ // <-----
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Add package entries for angular packages
ngPackageNames.forEach(packIndex);
var config = {
map: map,
packages: packages
}
System.config(config);`