I have a problem with the directive of the library ngx-permissions.
These are the versions of my angular's dependency:
"#angular/animations": "^5.0.3",
"#angular/common": "^5.0.3",
"#angular/compiler": "^5.0.3",
"#angular/core": "^5.0.3",
"#angular/forms": "^5.0.3",
"#angular/http": "^5.0.3",
"#angular/platform-browser": "^5.0.3",
"#angular/platform-browser-dynamic": "^5.0.3",
"#angular/router": "^5.0.3",
And I am following this example.
I am using the version of module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { NgxPermissionsModule } from 'ngx-permissions';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
NgxPermissionsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I can use the services without problem, but I have an error only with the directive.
The error is the next:
Can't bind to 'ngxPermissionsOnly' since it isn't a known property of 'div'. ("
</div>
</div>
<div [ERROR ->]*ngxPermissionsOnly="['ADMIN', 'GUEST']" class="m-portlet__head-tools">
<ul class="nav nav-pil"): ng:///DashboardModule/DashboardComponent.html#35:10
Property binding ngxPermissionsOnly not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "#NgModule.declarations". ("
</div>
</div>
[ERROR ->]<div *ngxPermissionsOnly="['ADMIN', 'GUEST']" class="m-portlet__head-tools">
<ul class="nav na"): ng:///DashboardModule/DashboardComponent.html#35:5
I had the same issue and my fix was to add NgxPermissionsModule for child module.
NgxPermissionsModule.forChild()
I would like to say that I was also facing same issue. but in my case; I had a shared module and I did same as wiki says but solutions was just exports NgxPermissionsModule.
My issue went out and code is working fine.Check if you might have same case and my fix works for you.
Thanks
Related
I am trying to find a vue 3 component that is a code editor with a similar theme as vscode. It should have the tree structure and be able to execute the code.
Some of the things I found that sadly did not fit the bill are:
monaco-editor
vue3-ace-editor
ace
I would like to send the files from the backend and have them rendered in the embedded code editor.
Any advice would be greatly appreciated.
Update 1
I got it to work. There is not a file tree but there is a component for it. Just need to add a watcher to the file tress and have what is selected in the ManacoEditor. Here is a basic example to get the IDE to render in the browser.
<template>
<div>
<MonacoEditor
width="900"
height="750"
language="go"
#change="onChange"
:value="value"
></MonacoEditor>
</div>
</template>
<script lang="ts">
import {Options, Vue} from "vue-class-component";
import MonacoEditor from "monaco-editor-vue3";
#Options({
components: {
MonacoEditor,
},
props: {
editorInit: String,
content: String,
},
})
export default class Editor extends Vue {
value = `
package main
import "fmt"
func main() {
fmt.println("HelloWorld")
}`
onChange() {
console.log("value");
}
async mounted() {
// add parameters here
}
}
</script>
<style scoped>
</style>
package.json
"dependencies": {
"#codemirror/lang-html": "^6.1.1",
"#codemirror/lang-javascript": "^6.1.0",
"#codemirror/lang-json": "^6.0.0",
"#monaco-editor/loader": "^1.3.2",
"codemirror": "^6.0.1",
"core-js": "^3.8.3",
"monaco-editor": "^0.34.0",
"monaco-editor-vue3": "^0.1.6",
"monaco-editor-webpack-plugin": "^7.0.1",
"monaco-languageclient": "^4.0.0",
"vscode-ws-jsonrpc": "^2.0.0",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-codemirror": "^6.1.1",
"vue-monaco": "^1.2.2",
"vue-router": "4"
},
Enjoy!
The editor powering VSCode is open source and Microsoft provides examples on how to use it.
Demo:
var editor = monaco.editor.create(document.getElementById("container"), {
value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
language: "javascript",
});
monaco.editor.setTheme("vs-dark");
body {
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="https://unpkg.com/monaco-editor#0.34.0/min/vs/editor/editor.main.css"
/>
</head>
<body>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<script>
var require = {
paths: {
vs: "https://unpkg.com/monaco-editor#0.34.0/min/vs",
},
};
</script>
<script src="https://unpkg.com/monaco-editor#0.34.0/min/vs/loader.js"></script>
<script src="https://unpkg.com/monaco-editor#0.34.0/min/vs/editor/editor.main.nls.js"></script>
<script src="https://unpkg.com/monaco-editor#0.34.0/min/vs/editor/editor.main.js"></script>
</body>
</html>
How does it not fit the bill?
I got it to work. There is not a file tree but there is a component for it. Just need to add a watcher to the file tress and have what is selected in the ManacoEditor. Here is a basic example to get the IDE to render in the browser.
<template>
<div>
<MonacoEditor
width="900"
height="750"
language="go"
#change="onChange"
:value="value"
></MonacoEditor>
</div>
</template>
<script lang="ts">
import {Options, Vue} from "vue-class-component";
import MonacoEditor from "monaco-editor-vue3";
#Options({
components: {
MonacoEditor,
},
props: {
editorInit: String,
content: String,
},
})
export default class Editor extends Vue {
value = `
package main
import "fmt"
func main() {
fmt.println("HelloWorld")
}`
onChange() {
console.log("value");
}
async mounted() {
// add parameters here
}
}
</script>
<style scoped>
</style>
package.json
"dependencies": {
"#codemirror/lang-html": "^6.1.1",
"#codemirror/lang-javascript": "^6.1.0",
"#codemirror/lang-json": "^6.0.0",
"#monaco-editor/loader": "^1.3.2",
"codemirror": "^6.0.1",
"core-js": "^3.8.3",
"monaco-editor": "^0.34.0",
"monaco-editor-vue3": "^0.1.6",
"monaco-editor-webpack-plugin": "^7.0.1",
"monaco-languageclient": "^4.0.0",
"vscode-ws-jsonrpc": "^2.0.0",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-codemirror": "^6.1.1",
"vue-monaco": "^1.2.2",
"vue-router": "4"
},
This question was first asked on vuejs forum but didn't receive an answer (I know it's holidays seasons :)
I’m driving nuts with grids in vue3. It used to work some weeks ago but after some changes in the versions of the packages, I can’t get it working anymore (not sure it’s linked though). I created a small reproducer:
Package.json contains:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve"
},
"dependencies": {
"vue": "3.2.26",
"vue-class-component": "8.0.0-rc.1",
"vue-router": "4.0.12",
"primeflex": "^3.1.0",
"primeicons": "^5.0.0",
"primevue": "^3.9.1"
},
"devDependencies": {
"#types/node": "17.0.0",
"#vue/cli-plugin-babel": "4.5.15",
"#vue/cli-plugin-router": "4.5.15",
"#vue/cli-plugin-typescript": "4.5.15",
"#vue/cli-service": "4.5.15",
"typescript": "4.5.4"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
src/main.ts contains:
import { createApp } from "vue";
import MyApp from "./App.vue";
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.min.css";
createApp(MyApp)
.use(PrimeVue)
.mount("#app");
and src/App.vue contains basically a copy of the example named “Vertical Layout with Grid” using the vuue 3 syntax with vue-class-component:
<template>
<h2>test</h2>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col">
<label for="firstname">Firstname</label>
<InputText id="firstname" type="text" />
</div>
<div class="p-field p-col">
<label for="lastname">Lastname</label>
<InputText id="lastname" type="text" />
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import InputText from "primevue/inputtext";
#Options({
components: {
InputText,
},
})
export default class MyApp extends Vue {}
</script>
This should display something like this:
But it actually shows (using Firefox):
and I’m totally unable to get both fields side by side…
Can someone please point me in the right direction?
Thank you!
[1]: https://i.stack.imgur.com/44P2h.png
[2]: https://i.stack.imgur.com/75nZk.png
#BenSouchet Thanks for your comment, you pushed me to the right track.
Precisely, I first looked only at p-fluid which I was able to find in the CSS but after your comment I looked closer and I found I was unable to find p-formgrid, p-grid, or p-field in the page nor in the node_modules directory.
Running grep -R 'p-grid' node_modules/prime* does not return anything...
So, I looked twice at https://www.primefaces.org/primeflex/migration and discovered that with primeflex 3, all classes named p-xxx are now named xxx (eg p-formgrid becomes formgrid) so I changed the classes in the template above and it's now working fine again...
Now, the next question is why such a breaking change??? I need to pass through my whole application to fix that :/
I keep getting the following error for some global components that I have:
Failed to mount component: template or render function not defined.
found in
---> <Paginator>
<Root>
This is what I have in package.json:
{
"version": "1.0.0",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.4.4"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.0.0",
"babel-preset-vue-app": "^1.2.0",
"babel-plugin-transform-runtime": "^6.0.0",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"fs": "^0.0.1-security",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
In webpack.config i have the following defined:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
And this is my main js file:
import Vue from 'vue';
Vue.component('paginator', require('./components/Paginator.vue'));
var vm = new Vue({
el: '#root',
data: {}
});
html:
<div id="root>
<paginator v-bind:total-items="totalItems" v-bind:page-size="query.pageSize" v-bind:page="query.page" v-on:pagechanged="onPageChange"></paginator>
</div>
any ideas why im getting this error?
When I change the code as follows is seems to work however I want to register the paginator as a global component:
import Vue from 'vue';
import Paginator from './components/Paginator.vue';
var vm = new Vue({
el: '#root',
components: {
'paginator': Paginator
},
data: {}
});
This is the paginator component:
<template>
<div>
<div >
<nav>
<ul class="pagination">
...
</ul>
</nav>
</div>
</div>
</template>
<script>
export default {
props: ['totalItems', 'pageSize', 'page'],
data: function () {
return {
currentPage: 1,
}
},
computed: {
pages: function () {
this.currentPage = this.page;
var pageArray = [];
var pagesCount = Math.ceil(this.totalItems / this.pageSize);
for (var i = 1; i <= pagesCount; i++)
pageArray.push(i);
return pageArray;
}
},
methods: {
changePage: function (page){
this.currentPage = page;
this.$emit('pagechanged', page);
},
previous: function (){
if (this.currentPage == 1)
return;
this.currentPage--;
this.$emit('pagechanged', this.currentPage);
},
next: function () {
if (this.currentPage == this.pages.length)
return;
this.currentPage++;
this.$emit('pagechanged', this.currentPage);
}
},
}
I believe this line is the issue - require inside the component declaration hasn't ended well for me when using it (although I've not looked into why).
Edit: See #DecadeMoon answer for info on this.
Vue.component('paginator', require('./components/Paginator.vue'));
Recommended way:
import Paginator from './components/Paginator.vue'
Vue.component('paginator', Paginator);
You can also do one of the following which will make webpack split the module into a separate file download asynchronously (this can be useful for large components)
Option 1:
Vue.component('paginator', () => import('./components/Paginator.vue'));
Option 2:
I have a load function that wraps this as it allows me to pass a string and wrap the directory without having to type it multiple times but this is a simple version of that function I use:
function load (component) {
return () => import(component)
}
so it would become:
Vue.component('paginator', load('./components/Paginator.vue'));
This is a consequence of the way Webpack combines require (CommonJS) and import (ES6) module import styles.
I always recommend using ES6-style import syntax.
If you must use require, then you will need to select the default import as follows:
Vue.component('paginator', require('./components/Paginator.vue').default);
^^^^^^^^
I recommend using ES6 import syntax instead (it's a standardized, non-webpack-specific syntax):
import Paginator from './components/Paginator.vue';
Vue.component('paginator', Paginator);
The reason why import() syntax works is because of this issue. Only use import() if you want the module to be split into a separate file and downloaded asynchronously by Webpack.
import VueAlert from 'archer-vue-alert';
Vue.use(VueAlert);
this.$alert({
title: 'alertTitle',
message: 'alertMessage', //message accepts string and raw_html
confirmTxt: 'confirm btn txt' //default is 'OK'
}).then(function () {
//...
})
I am sure that there is no problem with archer-vue-alert package, in fact, I used vue-alert package as well. Same problem. Why is the alert never displayed?
My package.json file:
"archer-vue-alert": "^2.0.2",
"onsenui": "^2.5.1",
"vue": "^2.4.2",
"vue-i18n": "^7.1.1",
"vue-infinite-scroll": "^2.0.1",
"vue-onsenui": "^2.1.0",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0",
"vuex": "^2.3.1"
From your example, it looks like you are registering VueAlert as a plugin and then immediately attempting to display an alert by calling $alert() on this in the context of your main.js file.
Based on the archer-vue-alert package's README, $alert() should be called on a Vue instance.
Here's one example of correct usage:
import VueAlert from 'archer-vue-alert';
Vue.use(VueAlert);
new Vue({
el: '#app',
created() {
this.$alert({
title: 'alertTitle',
message: 'alertMessage',
confirmTxt: 'confirm btn txt'
})
}
})
Starting with the 5 minute quick start I've been playing around the angular2 beta and have run across a problem that has me stumped.
Here is a dumbed down version that shows the problem I have. First here a hello world app working perfectly.
package.json
{
"name": "...",
"version": "0.0.1",
"description": "...",
"author": {
"name": "...",
"email": "..."
},
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"bootstrap": "^3.3.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "^0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.6",
"zone.js": "^0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
index.html
<head>
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="styles.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"> </script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app></my-app>
</body>
app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'
bootstrap(AppComponent);
app/app.component.ts
import {Component, View} from 'angular2/core';
import {RegisterFormComponent} from './accounts/register-form.component'
#Component({
selector: 'my-app',
})
#View({
template: 'hello world',
})
export class AppComponent {
}
I evntually want to call my Web Api service so I am trying to follow the docs for Http, I update boot.ts as follows:
new app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'
import {HTTP_PROVIDERS} from 'angular2/http';
bootstrap(AppComponent, [HTTP_PROVIDERS]);
And here's where things choke.
Chrome gives me:
uncaught SyntaxError: Unexpected token < - http:1
uncaught SyntaxError: Unexpected token < - angular2-polyfills.js:138
evaluating http://localhost:3000/angular2/http
error loading http://localhost:3000/app/boot.js
It also fails if I try to set the HTTP_PROVIDERS as a viewProvider on my component.
Has anyone else had any luck getting Http to inject properly in the angular2 beta?
Visual Studio 2015
Node.JS & Node.JS tools for visual studio
Using 'NPM start' to compile and run
This error occurs when you try to import something that is not being included in your HTML when using SystemJS. Module bundlers like Webpack handle all that for you.
For your case you have to add the Http bundle that's a separated bundle, for example
<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
You'll see this same error when trying to use the router and you forgot to add the router bundle.
Check the difference between these two configurations from #pkozlowski-opensource's repos
Using SystemJS : For this case he would've to add http bundle, or router bundle if he wanted to use them.
Using Webpack : In this case Webpack bundles everything in that bundle.js file for you.
Glad it helped.
If you're using npm, include a script tag with the http reference to your local installation:
<script src="node_modules/angular2/bundles/http.dev.js"></script>