How to force Plunker Editor to update an angular library dependency? - npm

I'm using Plunker Editor to show demos. My demo is an angular 2 project with my opensource npm package called ng-ui-application which is already published.
It worked when I bound the npm package in the config.js.
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript#2.0.2/lib/typescript.js',
'ng-ui-application': 'npm:ng-ui-application'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'ng-ui-application': {
main: './index.js',
defaultExtension: 'js'
}
}
});
The problem is when I published an update of ng-ui-application on https://www.npmjs.com/, the Plunker Editor doesn't get this update.

I found a solution...
I changed in config.js
map: {
'app': './src',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript#2.0.2/lib/typescript.js',
'ng-ui-application': 'npm:ng-ui-application'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'ng-ui-application': {
main: './index.js',
defaultExtension: 'js'
}
}
By this :
map: {
'app': './src',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript#2.0.2/lib/typescript.js',
'ng-ui-application': 'npm:ng-ui-application/index.js' <--- here !
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
<--- I deleted it !
}

Related

vue plugin pwa sw.js not found

I have 1 app using the vue pwa plugin, it works great.
The vuejs config for the app looks like this:
const WebpackNotifierPlugin = require('webpack-notifier')
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
sass: {
implementation: require('sass')
}
}
},
transpileDependencies: [
'vuex-module-decorators',
'vuex-persist'
],
pwa: {
name: 'MyApp',
themeColor: '#000000',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'dev/sw.js',
// ...other Workbox options...
}
},
configureWebpack: {
devServer:{
historyApiFallback: true,
},
plugins: [
new WebpackNotifierPlugin(),
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: 3,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('#', '')}`;
},
},
},
},
},
},
}
I have another app, exactly the same, vue2, beufy etc etc.. i installed the same stuff via the vue pwa plugin and the config looks exactly the same but when i run build it says it cannot find the sw.js file:
Error: ENOENT: no such file or directory, open 'dev/sw.js'
I have created a uber basic vue app which does the same thing here: https://github.com/johndcarmichael/vue-pwa-sw-not-found
Has anyone else got this issue, and how did you resolve it?
You are not having dev/sw.js in your project, as you set in swSrc. InjectManifest means take this sw.js source file and write precache manifest into it, producing the final service-worker.js file.

VueJS webpack PWA assets icons manifest.json

I configured my PWA manifest.json in vue.config.js, shown below. How can I configure the PWA icons to refer to the images inside the assets/ folder?
module.exports = {
pwa: {
manifestOptions: {
name: process.env.VUE_APP_APP_NAME,
short_name: process.env.VUE_APP_SHORT_NAME,
start_url: process.env.VUE_APP_START_URL,
display: 'standalone',
theme_color: process.env.VUE_APP_PRIMARY_COLOR,
background_color: process.env.VUE_APP_BACKGROUND_COLOR,
icons: [
{
src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
sizes: "192x192",
type: "image/png"
},
{
src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
sizes: "512x512",
type: "image/png"
}
]
}
}
}
When I run my app, I get this error :
http://localhost:8080/src/assets/company/logo-512x512.png (Download error or resource isn't a valid image)
I don't understand why /src is set in the URL.
Use static assets from the public directory (e.g., public/img/company/logo-192x192.png and public/img/company/logo-512x512.png), which are copied as-is to the build output. Then your vue.config.js would reference them like this:
// vue.config.js
module.exports = {
pwa: {
manifestOptions: {
icons: [
{
src: `/img/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
sizes: "192x192",
type: "image/png"
},
{
src: `/img/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
sizes: "512x512",
type: "image/png"
}
]
}
}
}

error "window is not defined " when using plugin Vue.js

Just learning vue. Install the slider plugin for the site from here: https://github.com/surmon-china/vue-awesome-swiper . Transferred the code and received such an error: 'window is not defined' Code below. I use nuxt.js. There are several solutions on the Internet, but none of them helped me.
slider.vue
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper';
if (process.browser) {
const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
Vue.use(VueAwesomeSwiper)
}
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
}
}
</script>
vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper,{});
nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'stud-cit',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Stud-cit site' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: 'blue'},
plugins: [
'~/plugins/vuetify',
'~/plugins/vue-awesome-swiper' ,
'~/plugins/vuePose'
],
build: {
vendor :['vue-awesome-swiper/dist/ssr'],
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
});
}
}
}
};
This library has special build for SSR.
Reference
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

How to resolve Apollo error 401 accessing DatoCMS

I followed this guide:
https://medium.com/#marcmintel/quickly-develop-static-websites-with-vuejs-a-headless-cms-and-graphql-bf64e75910d6
but when I run npm run dev I get error 401 on my localhost:3000
this is my nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'hello-world',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
modules: [
'#nuxtjs/apollo',
],
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'https://graphql.datocms.com',
getAuth: () => 'Bearer XXXXXXXXXXXXX' //my apikey
}
}
}
}
And this is the vue file performing the query. I'm currently displaying nothing in the page but I still get the error.
<template>
<div>
All blog posts
</div>
</template>
<script>
import gql from 'graphql-tag'
export default {
apollo: {
allPosts: gql`{
allPosts{
title,
text,
slug
}
}`
}
}
</script>
The post data type is correctly defined in DatoCMS, I tested it with the API Explorer
Found the solution in the comments of the article.
You need to put your auth in a separate file like this and format it as follows:
~/apollo/config.js
export default function(context){
return {
httpEndpoint: ‘https://graphql.datocms.com',
getAuth:() => ‘my-token’ //Bearer is added by default
}
}
Then in nuxt.config.js
apollo:
apollo: {
clientConfigs: {
default: ‘~/apollo/config.js’
}
}

kendo ui angular2 charts unexpected token error

I'm having a issue getting the kendo-ui charts for angular2 up and running.
I have installed kendo-angular-charts 0.8.2
The error message shown is:
(index):30 Error: SyntaxError: Unexpected token <(…)
my app.module.ts:
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
NavBarComponent,
LoginComponent,
UserToolComponent,
ResultStatsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
routing,
ButtonsModule,
LayoutModule,
GridModule,
AccordionModule,
ChartsModule
When i leave out the imports: Chartsmodule the website just runs fine.
I have setup my system.config.js like this:
(function(global) {
var paths = {
'npm:': '/node_modules/'
};
var map = {
'app': 'app',
'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
"ng2-accordion": "node_modules/ng2-accordion",
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#progress/kendo-angular-buttons': 'npm:#progress/kendo-angular-buttons',
'#progress/kendo-angular-grid': 'npm:#progress/kendo-angular-grid',
'#progress/kendo-angular-intl': 'npm:#progress/kendo-angular-intl',
'#progress/kendo-angular-layout': 'npm:#progress/kendo-angular-layout',
'#progress/kendo-data-query': 'npm:#progress/kendo-data-query',
//from here is new
'#progress/kendo-angular-buttons': 'npm:#progress/kendo-angular-buttons',
'#progress/kendo-angular-charts': 'npm:#progress/kendo-angular-charts',
'#progress/kendo-charts': 'npm:#progress/kendo-charts',
'#progress/kendo-angular-popup': 'npm:#progress/kendo-angular-popup',
'#progress/kendo-angular-resize-sensor': 'npm:#progress/kendo-angular-resize-sensor',
'#progress/kendo-angular-intl': 'npm:#progress/kendo-angular-intl',
'#progress/kendo-popup-common': 'npm:#progress/kendo-popup-common',
'#progress/kendo-drawing': 'npm:#progress/kendo-drawing',
'#telerik/kendo-intl': 'npm:#telerik/kendo-intl',
'#telerik/kendo-draggable': 'npm:#telerik/kendo-draggable',
'rxjs': 'npm:rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
"ng2-accordion": { "main": "index.js", "defaultExtension": "js"
},
'npm:#progress/kendo-angular-buttons': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-angular-grid': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-data-query': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-angular-intl': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'npm:#telerik/kendo-intl': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
app: { main: 'main.js', defaultExtension: 'js' },
rxjs: { defaultExtension: 'js' },
'npm:#progress/kendo-angular-layout': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
//new from here
'npm:#progress/kendo-angular-buttons': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-angular-charts': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-angular-resize-sensor': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-charts': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'#progress/kendo-angular-popup': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'#progress/kendo-popup-common': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'#progress/kendo-drawing': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'#telerik/kendo-draggable': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
}
};
var config = {
paths: paths,
map: map,
packages: packages
};
System.config(config);
})(this);
Anybody who can help me with this?
How can you debug errors like this?
After debugging some more.......this is the error I see:
Error: SyntaxError: Unexpected token <
at eval (<anonymous>)
at Object.81 (http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/path-node.js:330:19)
at __webpack_require__ (http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/path-node.js:21:30)
at Object.75 (http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/path-node.js:116:18)
Evaluating http://localhost:3000/node_modules/chroma-js#1.2.1
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/path-node.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/arc-node.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/drawing.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/main.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-charts/dist/npm/js/core/box.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-charts/dist/npm/js/core.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-charts/dist/npm/js/main.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-angular-charts/dist/npm/js/chart/chart-auto-theme.component.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-angular-charts/dist/npm/js/chart.directives.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-angular-charts/dist/npm/js/main.js
Evaluating http://localhost:3000/app/app.module.js
Evaluating http://localhost:3000/app/main.js
Error loading http://localhost:3000/app/main.js
Thanks,
In my case it had to do with chroma-js not being loaded.
Added this to your system.config.js:
map:
'chroma-js':'npm:chroma-js#1.2.1',
and in the packages:
'npm:chroma-js': {
defaultExtension: 'js',
main: "./chroma.js"
},
After adding this this solved my issue.
When looking at the plunkers from the demo website I don't see chroma-js added like described above. I don't know why they don't need to do this.