I'm learning Vue.js with amCharts and trying to build a covid-19 dashboard into a test project using data from amChart's own web API.
Hopefully, I don't need to put all my code on here because I'm just using amChart's demo code and I have the chart working from a module import within my own project, e.g.:
import covid_us_timeline from "#/assets/data/us_timeline";
That's module code I have copied from amChart's web API # covid.amcharts.com/data/js/us_timeline.js
So, that works great, but I want to use the chart directly from the web API, so I'm using this in my Vue.js script section:
import covid_us_timeline from "https://covid.amCharts.com/data/js/us_timeline.js";
And getting this error:
These dependencies were not found:
https://covid.amCharts.com/data/js/us_timeline.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Covid19Chart.vue?vue&type=script&lang=js&
To install them, you can run: npm install --save https://covid.amCharts.com/data/js/us_timeline.js
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
It doesn't look like a cors issue and given this is all public domain data, I'd rather use in the front-end than build it in the back-end, so any ideas what I'm doing wrong?
Just as an update, I decided to go a different way anyway as accessing this volume of data from the front-end was a drain to say the least. So, switched to using axios in Node to access the data and load into Mongo and then manipulate it from there. It was only updated once a day anyway, so no need to access it every time the page was loaded.
Related
Missing cli.json file when creating a new Vue project using Amplify. I am following the official tutorial
I get as far as Initialize a new backend and run amplify init:
Initializing finishes with the following (it does not matter whether I answer yes or no to the share information on failure message):
And here's the file structure:
I also notice that the aws-exports.js file was not created. Oddly enough, the aws-exports.js file is listed in the .gitignore file.
I have tried a few times to create a new project, in VS and in the windows console. I have also tried creating the Vue app using Vue 2 and 3 and come up against the same issue.
In my final attempt, I came across the same issue but proceeded to "successfully" add the graphQl API but this error was displayed when I ran amplify push to update the backend:
An error occurred during the push operation: /
The AWS Access Key Id you provided does not exist in our records
I presume this is because the aws-exports.js file that contains the access key does not exist?
I'd appreciate any help in sorting this out.
thanks
solved!
I mistakenly created the project within another project.
I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template
Is there any working npm package for ADAL and Angular 5 (AOT build)?
I did try few, but everyone had some problems.
adal-angular4plus
ERROR in node_modules/adal-angular4plus/adal4.service.d.ts(40,25): error TS2503: Cannot find namespace 'adal'.
node_modules/adal-angular4plus/adal4.service.d.ts(48,22): error TS2503: Cannot find namespace 'adal'. Installing #types/adal-angular nor #types/adal helped.
ng2-adal
Did not work in AOT
ng2-adal-aot
acquireToken() after injecting the iframe it refreshes automatically the appModule. Hard to explain. But imagine the situation where you do a http request in ngOnInit of a component which is hosrted by appModule and there is a httpInterceptor which calls inside acquireToken() - the appModule gets refreshed so it is neverending cycle.
Have you checked the ezcode-adal-angular5? This component:
was created from a angular 5 cli project and leveraged adal.js internally.
supports Angular 5 projects.
was able to authenticate users using Azure AD.
was able to secure the route components same as adaljs for angularjs.
you can also check a sample from https://github.com/frankchen76/EZCode-Adal-Angular5-Sample
In order to have adal-angular4plus work, add import { adal } from 'adal-angular'; in the .ts file where you define your configuration.
You may also want to check adal-angular5, an Active Directory Authentication Library (ADAL) wrapper package for Angular 5. Uses HttpClient and HttpClientModule.
A working example using adal-angular5.
I've successfully used the material-components-web library from within my aurelia skeleton-esnext-webpack projects but I am strugling to get them working in a skeleton-esnext project.
The problem seems to be with the fact that the skeleton-esnext project uses jspm with system.js as its module loader.
I have added "#material/textfield": "npm:#material/textfield#^0.3.6" to the jspm dependencies section of my package.json which seems to install the correct #material libraries to my jspm_modules/npm/#material.
Now, when I try to access any class from this library from within any my aurelia view models
import {MDCTextfieldFoundation} from '#material/textfield';
I get the following error in the browser when I run the project:
Error: (SystemJS) Unexpected token import
SyntaxError: Unexpected token import
at eval (<anonymous>)
at Object.eval (http://localhost:9000/jspm_packages/npm/#material/textfield#0.3.6.js:1:123)
at eval (....
Any suggestions to whats most likely causing this issue?
SystemJS is importing the raw source file of the plugin instead of the transpiled one (you can see this if you look into jspm_packages/npm/#material/textfield#0.3.6.js.
You can fix it by changing the location in there to point to the dist directory of the directory textfield#0.3.6. However, it gets overriden all the time on potential updates. And it is not saved in CVS.
Another, more simpler approach, would be to import the correct file in your view model:
import {MDCTextfieldFoundation} from '#material/textfield/dist/mdc.textfield';
After bundling a simple aurelia application with jspm bundle-sfx I get the following error:
No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.
An example application: https://github.com/Baudin999/jspm-bundling-test
You can use: npm run setup:dev in a non windows env to switch back to the dev settings (which is just a comment/uncomment in the ./src/client/index.html) and you can use npm run setup:prod to switch back to the production environment, bundling will automatically be triggered. all other scripts can be found in the package.json.
I can't link to other questions because I haven't found any questions which relate to this problem. I "think" (which means absolutely nothing) that this might be related to the fact that aurelia needs a full loader even when bundling with bundle-sfx but I haven't found any ways to solve the error.
EDIT (25/01/2017 17:16): I've found out that the error is because I import the aurelia-bootstrapper.
As soon as I add: import * as bootstrapper from 'aurelia-bootstrapper'; I get the error
Please add the code how do you bootstrap your aurelia app.
There is nothing actually to import from bootstrapper apart from bootstrap function.
Which you would use in case of custom manual bootstrapping.
like in
import { bootstrap } from 'aurelia-bootstrapper'
const configure: (au: Aurelia) => {} = async function (au: Aurelia) {
au.use
.standardConfiguration();
await au.start()
au.setRoot() // or au.enchance()
})
bootstrap(configure)
in a happy path scenario with jspm - you System.import('aurelia-bootstrapper')
and it takes over finding the root node of your app and the script to configure Aurelia (main by default)
Have a look at Bootstrapping Aurelia in the docs
Oh.. and bundle-sfx is not supported there are other means to bundle aurelia apps using jspm