144 comments found.
Hi guys, we want to receive real side menu from API endpoint, please recommend us where to put API call? Simple substitution mocked menu to API call won’t work ‘cause API is async and will supply menu later than it’s needed.
Hi,
First of all, we did not design the menu items as if they were coming from api. Therefore, the array of menu items in the “src/app/constants/menu.ts” file is dependent on more than one location. If you renounce using Breadcrumb and Heading components for which menu elements are depend: You can fill in the value of menuItems in “src/app/containers/layout/sidebar/sidebar.component.ts” via an api.
As I said before, when designing the menu, there may be problems because we never consider the api idea. I would like to point out that I am writing for suggestion purposes only and this proposal is experimental.
I hope you don’t run into a problem and it works successfully. I’m waiting for your good news.
All the best.
Hi, I continuously see wrong positioning of chart’s curve. On your demo it looks nice and responsive (https://ibb.co/w6ppg0C), but in my implementation (https://ibb.co/ysG4dHN) I always have an issue. Con you give me some advices why it went wrong and what to check in first place. Thanks in advance.
Hi,
The links of the screenshots are broken but I guess there might be something wrong with the configurations of the charts. Please check out the ones within the template in src/app/components/charts/chart.service.ts file. Might be related to below props:
responsive: true,
maintainAspectRatio: false,
turning maintainAspectRatio to false did help, thanks a lot.
Hi,
This looks like a bit related to the form layout of yours. You may check the demo to see it is switching to column view under 768px. You may alter it for your layout needs by adding below lines in _vien.style.scss.
// Will switch to column mode under 1024px.
@media (max-width: 1024px) {
.bs-datepicker .bs-media-container {
flex-direction: column;
}
}
Cheers.
Thanks for your answer, but there is nothing about my own layout – I’m using only yours, in this particular case – details-alt.component.html. The problem is that when screen width is less than 1440 px – you are hiding side menu, but date picker doesn’t recalculating it’s position. Check out video here: https://ibb.co/dK2f10n
Hi,
Now I see the problem. We mostly work on the responsive view for specific and static sizes and don’t really worry about to much for resizing the window. If resizing the window while there is an open datepicker is a problem for you, then you may add below codes to the component where the datepicker is used to fire a synthetic resize event after timeout. This will make sure that there will be another resize event when the menu size is changed.
@HostListener('window:resize', ['$event'])
handleWindowResize(event) {
if (event && !event.isTrusted) {
return;
}
setTimeout(() => {
const event = document.createEvent('HTMLEvents');
event.initEvent('resize', false, false);
window.dispatchEvent(event);
}, 500);
}
Cheers.
Hi, Is there any way to create an input which accept a specific pattern, for example phone format of in input for numbers? I searched in the in show cases, but I can’t find this.
Regards. Youcef
Hello,
There is no input mask example in Vien, but this plugin will do the trick. https://www.npmjs.com/package/angular2-text-maskAll the best.
Hello, i was wondering: if i buy this template in angular can i use it in a comercial project? i am developing a chat that needs a admin panel, and my programmers could make one but thats going to cost me more if i buy this one and they update do the required modifications.
regards Kevin
Hi,
Yes you can use the projects sold at ThemeForest for commercial projects.
All the best.
I having trouble with translation. Is not working but i do not get any errors. I’m running Angular 10 version. Is it a compatibility problem?
When i run npm install there was some warnings.
Thanks in advance.
Solved.
Hi,
We are very happy to find a solution. We hope that the theme will serve you well.
All the best.
Hi, I have in menu:
{ icon: ‘iconsminds-business-mens’, label: ‘menu.parent’, to: ’/app/parent’, subs: [ { icon: ‘simple-icon-mustache’, label: ‘menu.item1’, to: ’/app/parent/item1’ }, { icon: ‘iconsminds-engineering’, label: ‘menu.item2’, to: ’/app/parent/item2’ }, { icon: ‘simple-icon-mustache’, label: ‘menu.item3’, to: ’/app/parent/item1/item3’, } ]
I can’t find any way to disable the last item from menu :
{
icon: 'simple-icon-mustache',
label: 'menu.item3',
to: '/app/parent/item1/item3',
}If I remove it from menu.ts, the header of this component show :
notFoundInMenu Home/Parent/Item1/Item3
Is there any way to solve this issue please?
Regards. Youcef
Hi,
Did you restart the application after adding the menu.item3 translation to the language file?
And what is the vien-angular version you are using? (It says the version in the package.json file or in the folder you downloaded.)
All the best.
Hi, thank you for your response, I’m using “version”: “1.1.2”, and I yes I restart my app multiple times, in Item3.html I have this
<app-heading></app-heading> <app-breadcrumb></app-breadcrumb>{{‘menu.item3’ | translate}}
The real problem, is, I think the the
<app-heading></app-heading> <app-breadcrumb></app-breadcrumb>
took information from menu.ts, so if they are present then I get the correct result, else I get notFoundInMenu so, my question is, can I use :
<app-heading></app-heading> <app-breadcrumb></app-breadcrumb>
without adding it to the menu.ts? because I need that a page that should not exist in the menu.
Thank you.
Hi,
app.heading is only used to display the page title inside the h1 element. If you wish, you can manually display the page title on the h1 element as below.
<h1>{{ 'menu.item3' | translate) }}</h1>
<app-breadcrumb></app-breadcrumb>
All the best.
Thank you for your response, but this is not my problem, I found a solution to my issue, all I do is to add another attribute isActive is `menu.ts` and in the sidenav.ts I filter only the active one, and like this I avoid the problem of the header
regards.
Hi,
We are very happy to find a solution. While we automate some things, we sacrifice some things.
We hope that the theme will serve you well.
All the best.
Hello Team,
I am looking for Vien – Angular Admin Template to use for my new project, but before buying it I have some query like: 1) Will it support Generic Table(GT Table) libraries which is created in Angular 4, 2) does it support 3rd party libraries.? 3) does it have a support team for future support?
Thank you in advance
Hi,
First of all, thank you for your attention.
Vien theme does not include generic table usage. It supports ngx-datatable. https://vien-angular.coloredstrategies.com/app/ui/datatables/fullpage You can find the list of plugins used in the theme here. https://vien-docs.coloredstrategies.com/docs/codebase/librariesAs for your support question, we do not have a special development service.
All the best.
Hi, I want to use Modal components(pop up), but I can’t find any demo about it. Can you share with me how you use this please?
Regards.
Hi,
You can find all the use cases at https://vien-angular.coloredstrategies.com/app/ui/components/modal under the “src/app/containers/ui/modals” folder separately.
All the best.
I’m working on an open source project, can I distribute the resultant layout based on your template?
Hi,
The license you will get when you buy it does not contain distribution permission. For this reason, unfortunately you cannot use it in your open source project.
Thanks for your interest. All the best.
Hi guys, I have faced an issue with second level menu, despite I have sub items – collapse doesn’t work correctly: every time I click on arrow, it’s collapsing and then, in 1 second expanding back. On a demo version everything woks nice. Gif with issue depicted: https://ibb.co/Jmdd7wC
Hi,
Which version is this problem?
How to check version? The package.json looks like this: { “name”: “vien”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “prebuild”: “npm—no-git-tag-version version patch”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e”, “lint:scripts”: “eslint \”src//.{js,ts}\”—fix”, “lint:styles”: “stylelint \”src//.scss\”—fix” }, “private”: true, “dependencies”: { ”@agm/core”: “1.1.0”, ”@angular/animations”: “9.1.11”, ”@angular/cdk”: “9.2.4”, ”@angular/common”: “9.1.11”, ”@angular/compiler”: “9.1.11”, ”@angular/core”: “9.1.11”, ”@angular/fire”: “5.4.2”, ”@angular/forms”: “9.1.11”, ”@angular/localize”: “9.1.11”, ”@angular/platform-browser”: “9.1.11”, ”@angular/platform-browser-dynamic”: “9.1.11”, ”@angular/router”: “9.1.11”, ”@auth0/auth0-spa-js”: “1.9.0”, ”@glidejs/glide”: “3.4.1”, ”@ng-select/ng-select”: “4.0.0”, ”@ngx-translate/core”: “11.0.1”, ”@swimlane/ngx-datatable”: “17.0.0”, “angular-archwizard”: “5.0.0”, “angular-calendar”: “0.28.16”, “angular-svg-round-progressbar”: “3.0.1”, “angular2-hotkeys”: “2.2.0”, “angular2-notifications”: “9.0.0”, “auth0-js”: “latest”, “chart.js”: “2.9.3”, “core-js”: “2.4.1”, “date-fns”: “2.14.0”, “file-dialog”: “0.0.8”, “firebase”: “7.15.1”, “net”: “1.0.2”, “ng2-nouislider”: “1.8.2”, “ngx-bootstrap”: “5.6.1”, “ngx-contextmenu”: “5.4.0”, “ngx-dropzone-wrapper”: “9.0.0”, “ngx-ellipsis”: “2.3.1”, “ngx-image-cropper”: “3.2.0”, “ngx-lightbox”: “2.1.2”, “ngx-perfect-scrollbar”: “8.0.0”, “ngx-quill”: “11.0.0”, “ngx-sortablejs”: “3.1.4”, “nouislider”: “14.5.0”, “quill”: “1.3.7”, “rxjs”: “6.5.5”, “sortablejs”: “1.10.2”, “stompjs”: “latest”, “tslib”: “1.10.0”, “video.js”: “7.8.2”, “yamapng”: “2.0.4”, “zone.js”: “0.10.3” }, “devDependencies”: { ”@angular-devkit/build-angular”: “0.901.8”, ”@angular/cli”: “9.1.8”, ”@angular/compiler-cli”: “9.1.11”, ”@angular/language-service”: “9.1.11”, ”@types/jasmine”: “3.5.10”, ”@types/jasminewd2”: “2.0.8”, ”@types/node”: “14.0.13”, ”@typescript-eslint/eslint-plugin”: “2.33.0”, ”@typescript-eslint/parser”: “2.33.0”, “codelyzer”: “5.2.2”, “eslint-config-prettier”: “6.11.0”, “eslint-plugin-prettier”: “3.1.3”, “eslint”: “6.8.0”, “file-dialog”: “0.0.8”, “jasmine-core”: “3.5.0”, “jasmine-spec-reporter”: “5.0.2”, “karma-chrome-launcher”: “3.1.0”, “karma-coverage-istanbul-reporter”: “3.0.3”, “karma-jasmine-html-reporter”: “1.5.4”, “karma-jasmine”: “3.3.1”, “karma”: “5.1.0”, “prettier”: “2.0.5”, “protractor”: “7.0.0”, “stylelint-config-prettier”: “8.0.1”, “stylelint-config-recommended”: “3.0.0”, “stylelint-order”: “4.0.0”, “stylelint-prettier”: “1.1.2”, “stylelint”: “^13.5.0”, “ts-node”: “8.10.2”, “tslint”: “6.1.2”, “typescript”: “3.8.3” } }
Hi,
You can tell from the version parameter in package.json or the folder name you downloaded.
1.0.2 downloaded on April 12’ 2020
Hi, When you make the following changes on the html and ts side of the sidebar component, the collapse will work properly.
In the “src/app/containers/layout/sidebar/sidebar.component.html” file, you should change between lines 36-41 as follows. Before:
..
<a sub.subs.length=""> 0"
class="rotate-arrow-icon opacity-50 c-pointer">
<i class="simple-icon-arrow-down" />
<span class="d-inline-block">{{sub.label | translate}}</span>
</a>
<div>
..
</div>
After :
..
<a sub.subs.length=""> 0"
class="rotate-arrow-icon opacity-50 c-pointer">
<i class="simple-icon-arrow-down" />
<span class="d-inline-block">{{sub.label | translate}}</span>
</a>
<div>
..
</div>
In the “src/app/containers/layout/sidebar/sidebar.component.ts” file, you must add the “closedCollapseList” value and the “toggleCollapse” function.
..
export class SidebarComponent implements OnInit, OnDestroy {
..
..
..
closedCollapseList = [];
constructor(private router: Router, private sidebarService: SidebarService, private activatedRoute: ActivatedRoute) {
..
..
}
..
..
toggleCollapse(id: string) {
if (this.closedCollapseList.includes(id)) {
this.closedCollapseList = this.closedCollapseList.filter((x) => x !== id);
} else {
this.closedCollapseList.push(id);
}
}
..
..
..
- Here is a screenshot in case comment section breaks the code while formatting:
All the best.
Thanks. Code changed, working now. BTW: you’ve posted same pieces of code in answer. Image helped to understand what to fix.
Hi guys, I’m struggling to get managed the following issue in src/app/containers/layout/sidebar/sidebar.component.ts
for some reason you’re trimming currentUrl const path = this.router.url.split(’?’)[0]; const paramtersLen = Object.keys(event.snapshot.params).length; const pathArr = path.split(’/’).slice(0, path.split(’/’).length – paramtersLen); this.currentUrl = pathArr.join(’/’);
what is not suitable for urls like this:
http://localhost:4200/app/facilities/building/5eed50f1-da4f-4d72-99b5-af8697a3b0b5/floor/db4eddfb-64e2-41c1-aa99-c8d04ce0e5e9it gives currentUrl like this: /app/facilities/building/5eed50f1-da4f-4d72-99b5-af8697a3b0b5
because of this: const pathArr = path.split(’/’).slice(0, path.split(’/’).length – paramtersLen);
routing configuration is following: {path: ‘facilities/building/:building_uuid/floor/:floor_uuid’, component: FacilitiesComponent},
can you advice – is it possible keep using url structure like in the example above? If so, tell me how to correctly modify this code to make it workable?
Hi,
Selecting the active page in the sidebar menu, extracting parameters from the current url. Example: “https://vien-angular.coloredstrategies.com/app/applications/survey/1”
While doing your routing configuration, you can solve the problem by taking the parameters to the end. Example: “facilities/building/floor/:building_uuid/:floor_uuid”
All the best.
thanks, we solved temporarily by changing this
const pathArr = path.split(’/’).slice(0, path.split(’/’).length – paramtersLen);
to const pathArr = path.split(’/’).slice(0, path.split(’/’).length);
in the Hading component. Will it make any negative impact on the template?
Hi,
The relevant process is used to determine which page is active in the side menu. For example, in the link below, the survey-detail component is open, but the survey is selected in the menu.
https://vien-angular.coloredstrategies.com/app/applications/survey/1All the best.
ok, but getting back to my question: is it okay if we modify Heading component this way: const pathArr = path.split(’/’).slice(0, path.split(’/’).length); or it will negatively affect whole project’s navigation experience?
Hi,
When you change the code as you specified; You will have any problem navigating with the menu while the app is running, but when the page is refreshed, the selected item will not be found in the left menu, so it will choose whatever the default menu item is.
All the best.
ng-select issue.
I set [multiple] false in ng-select component and can’t see placehoder. When I set [multiple]=”true” works fine.
Can you help me? Thanks!
Solved: change ’’ to null value when create form (Reactive forms). ng-select asume that ’’ is a selected value so placeholder does not appear.
Hi,
We are very glad that the problem has been solved
All the best.
Hi guys, I got an error in console, when trying to start Full (not Starter version) of template. Starter works well, but sometimes I need full version to see how components work. Using demo version instead isn’t option because there no understanding what version you guys host there and how different it’s from my version.
/Vien-Angular-Admin-Dashboard-1.0.2/Angular-Version/Source/Vien-Angular:
core.js:26816 Uncaught TypeError: Cannot read property ‘type’ of undefined at Module.ɵɵNgOnChangesFeature (core.js:26816) at Module../node_modules/@angular/common/ivy_ngcc/fesm2015/common.js (common.js:4052) at webpack_require (bootstrap:89) at Module../node_modules/@angular/platform-browser/ivy_ngcc/fesm2015/platform-browser.js (platform-browser.js:1) at webpack_require (bootstrap:89) at Module../src/app/app.module.ts (app.module.ts:1) at webpack_require (bootstrap:89) at Module../src/main.ts (main.ts:1) at webpack_require (bootstrap:89) at Object.0 (main.ts:24)
Full compilation log is here: ng serve—port 4201
chunk {} 0.css, 0.js, 0.css.map, 0.js.map () 179 kB [rendered] chunk {1} 1.css, 1.js, 1.css.map, 1.js.map () 179 kB [rendered] chunk {2} 2.css, 2.js, 2.css.map, 2.js.map () 179 kB [rendered] chunk {3} 3.css, 3.js, 3.css.map, 3.js.map () 179 kB [rendered] chunk {4} 4.css, 4.js, 4.css.map, 4.js.map () 179 kB [rendered] chunk {5} 5.css, 5.js, 5.css.map, 5.js.map () 179 kB [rendered] chunk {6} 6.css, 6.js, 6.css.map, 6.js.map () 179 kB [rendered] chunk {7} 7.css, 7.js, 7.css.map, 7.js.map () 179 kB [rendered] chunk {8} 8.css, 8.js, 8.css.map, 8.js.map () 179 kB [rendered] chunk {9} 9.css, 9.js, 9.css.map, 9.js.map () 179 kB [rendered] chunk {10} 10.css, 10.js, 10.css.map, 10.js.map () 179 kB [rendered] chunk {11} 11.css, 11.js, 11.css.map, 11.js.map () 179 kB [rendered] chunk {12} 12.css, 12.js, 12.css.map, 12.js.map () 179 kB [rendered] chunk {13} 13.css, 13.js, 13.css.map, 13.js.map () 179 kB [rendered] chunk {14} 14.css, 14.js, 14.css.map, 14.js.map () 179 kB [rendered] chunk {15} 15.css, 15.js, 15.css.map, 15.js.map () 179 kB [rendered] chunk {16} 16.css, 16.js, 16.css.map, 16.js.map () 179 kB [rendered] chunk {17} 17.css, 17.js, 17.css.map, 17.js.map () 179 kB [rendered] chunk {18} 18.css, 18.js, 18.css.map, 18.js.map () 179 kB [rendered] chunk {19} 19.css, 19.js, 19.css.map, 19.js.map () 179 kB [rendered] chunk {app-app-module} app-app-module.js, app-app-module.js.map (app-app-module) 17.8 kB [rendered] chunk {applications-applications-module} applications-applications-module.js, applications-applications-module.js.map (applications-applications-module) 246 kB [rendered] chunk {blog-blog-module} blog-blog-module.js, blog-blog-module.js.map (blog-blog-module) 114 kB [rendered] chunk {common} common.js, common.js.map (common) 5.93 kB [rendered] chunk {components-components-module} components-components-module.js, components-components-module.js.map (components-components-module) 1.58 MB [rendered] chunk {dark.blue.navy} dark.blue.navy.css, dark.blue.navy.css.map (dark.blue.navy) 179 kB initial chunk {dark.blue.olympic} dark.blue.olympic.css, dark.blue.olympic.css.map (dark.blue.olympic) 179 kB initial chunk {dark.blue.yale} dark.blue.yale.css, dark.blue.yale.css.map (dark.blue.yale) 179 kB initial chunk {dark.green.lime} dark.green.lime.css, dark.green.lime.css.map (dark.green.lime) 179 kB initial chunk {dark.green.moss} dark.green.moss.css, dark.green.moss.css.map (dark.green.moss) 179 kB initial chunk {dark.grey.steel} dark.grey.steel.css, dark.grey.steel.css.map (dark.grey.steel) 179 kB initial chunk {dark.orange.carrot} dark.orange.carrot.css, dark.orange.carrot.css.map (dark.orange.carrot) 179 kB initial chunk {dark.purple.monster} dark.purple.monster.css, dark.purple.monster.css.map (dark.purple.monster) 179 kB initial chunk {dark.red.ruby} dark.red.ruby.css, dark.red.ruby.css.map (dark.red.ruby) 179 kB initial chunk {dark.yellow.granola} dark.yellow.granola.css, dark.yellow.granola.css.map (dark.yellow.granola) 179 kB initial chunk {dashboards-dashboards-module} dashboards-dashboards-module.js, dashboards-dashboards-module.js.map (dashboards-dashboards-module) 1.49 MB [rendered] chunk {datatables-datatables-module} datatables-datatables-module.js, datatables-datatables-module.js.map (datatables-datatables-module) 63.8 kB [rendered] chunk {defaultapplications-applications-moduleblog-blog-moduledashboards-dashboards-moduledatatables-daadce848a} defaultapplications-applications-moduleblog-blog-moduledashboards-dashboards-moduledatatables-daadce848a.js, defaultapplications-applications-moduleblog-blog-moduledashboards-dashboards-moduledatatables-daadce848a.js.map (defaultapplications-applications-moduleblog-blog-moduledashboards-dashboards-moduledatatables-daadce848a) 205 kB [rendered] chunk {defaultapplications-applications-modulecomponents-components-moduledashboards-dashboards-module} defaultapplications-applications-modulecomponents-components-moduledashboards-dashboards-module.js, defaultapplications-applications-modulecomponents-components-moduledashboards-dashboards-module.js.map (defaultapplications-applications-modulecomponents-components-moduledashboards-dashboards-module) 131 kB [rendered] chunk {defaultapplications-applications-modulecomponents-components-moduledashboards-dashboards-modulep4a26a4f2} defaultapplications-applications-modulecomponents-components-moduledashboards-dashboards-modulep~4a26a4f2.js, defaultapplications-applications-modulecomponents-components-moduledashboards-dashboards-modulep~4a26a4f2.js.map (defaultapplications-applications-modulecomponents-components-moduledashboards-dashboards-modulep~4a26a4f2) 1.07 MB [rendered] chunk {defaultapplications-applications-moduleproduct-product-module} defaultapplications-applications-moduleproduct-product-module.js, defaultapplications-applications-moduleproduct-product-module.js.map (defaultapplications-applications-moduleproduct-product-module) 65.9 kB [rendered] chunk {defaultblog-blog-moduledashboards-dashboards-moduledatatables-datatables-modulemiscellaneous-misefff8893} defaultblog-blog-moduledashboards-dashboards-moduledatatables-datatables-modulemiscellaneous-misefff8893.js, defaultblog-blog-moduledashboards-dashboards-moduledatatables-datatables-modulemiscellaneous-misefff8893.js.map (defaultblog-blog-moduledashboards-dashboards-moduledatatables-datatables-modulemiscellaneous-misefff8893) 77.2 kB [rendered] chunk {defaultblog-blog-moduledatatables-datatables-modulemiscellaneous-miscellaneous-moduleproduct-prod80c513e} defaultblog-blog-moduledatatables-datatables-modulemiscellaneous-miscellaneous-moduleproduct-prod80c513e.js, defaultblog-blog-moduledatatables-datatables-modulemiscellaneous-miscellaneous-moduleproduct-prod80c513e.js.map (defaultblog-blog-moduledatatables-datatables-modulemiscellaneous-miscellaneous-moduleproduct-prod80c513e) 1.99 MB [rendered] chunk {defaultcomponents-components-moduledashboards-dashboards-moduleproduct-product-module} defaultcomponents-components-moduledashboards-dashboards-moduleproduct-product-module.js, defaultcomponents-components-moduledashboards-dashboards-moduleproduct-product-module.js.map (defaultcomponents-components-moduledashboards-dashboards-moduleproduct-product-module) 120 kB [rendered] chunk {defaultcomponents-components-moduleuser-user-module} defaultcomponents-components-moduleuser-user-module.js, defaultcomponents-components-moduleuser-user-module.js.map (defaultcomponents-components-moduleuser-user-module) 75.7 kB [rendered] chunk {defaultdashboards-dashboards-moduledatatables-datatables-module} defaultdashboards-dashboards-moduledatatables-datatables-module.js, defaultdashboards-dashboards-moduledatatables-datatables-module.js.map (defaultdashboards-dashboards-module~datatables-datatables-module) 392 kB [rendered] chunk {forms-forms-module} forms-forms-module.js, forms-forms-module.js.map (forms-forms-module) 864 kB [rendered] chunk {light.blue.navy} light.blue.navy.css, light.blue.navy.css.map (light.blue.navy) 179 kB initial chunk {light.blue.olympic} light.blue.olympic.css, light.blue.olympic.css.map (light.blue.olympic) 179 kB initial chunk {light.blue.yale} light.blue.yale.css, light.blue.yale.css.map (light.blue.yale) 179 kB initial chunk {light.green.lime} light.green.lime.css, light.green.lime.css.map (light.green.lime) 179 kB initial chunk {light.green.moss} light.green.moss.css, light.green.moss.css.map (light.green.moss) 179 kB initial chunk {light.grey.steel} light.grey.steel.css, light.grey.steel.css.map (light.grey.steel) 179 kB initial chunk {light.orange.carrot} light.orange.carrot.css, light.orange.carrot.css.map (light.orange.carrot) 179 kB initial chunk {light.purple.monster} light.purple.monster.css, light.purple.monster.css.map (light.purple.monster) 179 kB initial chunk {light.red.ruby} light.red.ruby.css, light.red.ruby.css.map (light.red.ruby) 179 kB initial chunk {light.yellow.granola} light.yellow.granola.css, light.yellow.granola.css.map (light.yellow.granola) 179 kB initial chunk {main} main.js, main.js.map (main) 233 kB initial chunk {menu-levels-menu-levels-module} menu-levels-menu-levels-module.js, menu-levels-menu-levels-module.js.map (menu-levels-menu-levels-module) 18.5 kB [rendered] chunk {menu-menu-module} menu-menu-module.js, menu-menu-module.js.map (menu-menu-module) 16.3 kB [rendered] chunk {miscellaneous-miscellaneous-module} miscellaneous-miscellaneous-module.js, miscellaneous-miscellaneous-module.js.map (miscellaneous-miscellaneous-module) 147 kB [rendered] chunk {pages-pages-module} pages-pages-module.js, pages-pages-module.js.map (pages-pages-module) 10.5 kB [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 140 kB initial chunk {product-product-module} product-product-module.js, product-product-module.js.map (product-product-module) 707 kB [rendered] chunk {profile-profile-module} profile-profile-module.js, profile-profile-module.js.map (profile-profile-module) 37.1 kB [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 16 kB entry chunk {styles} styles.css, styles.css.map (styles) 351 kB initial chunk {ui-ui-module} ui-ui-module.js, ui-ui-module.js.map (ui-ui-module) 9.42 kB [rendered] chunk {user-user-module} user-user-module.js, user-user-module.js.map (user-user-module) 71 kB [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 5.7 MB initial Date: 2020-08-08T21:24:16.560Z – Hash: e4f33ac174bddb7edbf0 – Time: 36408ms- Angular Live Development Server is listening on localhost:4201, open your browser on http://localhost:4201/ ** : Compiled successfully.
Hi,
The problem will be solved when you upgrade the Angular core libraries to version 9.0.6.
Below is the final version of the package.json file.
https://www.coloredstrategies.com/vien-102/package.jsonAll the best.
thank you so much. it helped.
Hi,
The live project is much more up to date. If you wish, you can download it and proceed better.
All the best.
we’re in the middle of our app implementation, so there is no way to use freshly dowloaded project. Our developers ask is there difference between https://vien-angular.coloredstrategies.com/ and downloadable full version?
Hi,
You can compare the feature differences between the current version and the current version on https://vien-docs.coloredstrategies.com/docs/gettingstarted/changelog.
Cheers.
This Template is way to great, i don’t have to worry about styles, is well builded, there is so many components, and it reflects the good code in the speed that angular takes to compile the project. Very good Template, 100% Recommended
Hi,
Thank you for the awesome review, we really appreciate it.
Cheers.
Hello, The notifications service works fine when in a then block of a promise, but, when i receive an error, and manage it on the catch or on the trowError of the Observable, the notifications does not show. How can i Fix that? i don’t see obvius problems, It does not thows any erros, just does not show, on a catch of a promise
?
Hi,
The bottom line doesn’t work after the error pops up. For this reason, notifyService should be used where the error was caught, not where it was thrown. You can see an example in the “src/app/views/user/register/register.component.ts” file.
All the best.
I’ ll try, Thanks.
Hello, i need to implement inputmask in some forms.
Do you recomend some package to do that?
Thanks.
Hello,
We haven’t used it but this package looks better than others.
https://www.npmjs.com/package/ngx-maskAll the best.
Thanks.. I will try it.
Hi, i bought for an error the angular version, could help me to change a vue version
Hi,
We don’t have the authority to switch items as an author but you can purchase Vue version and refund Angular version. Refunds are in our control so it would not cause you any trouble.
Cheers.
I’m not able to find the main page in the template. To be more specific this page does not appear to be in the downloaded template: https://vien-angular.coloredstrategies.com/
Everything under /app appears to be included, but the main page is missing.
Hi,
The landing page is in the “src/app/views/home/” folder. Landing page is included in the project in version 1.2.0. If you are using one of the previous versions, you should download the new version.
Cheers.
Hi,
We are on the same version, but still having the error, is it possible for you to have a look through anydesk or something like that?
Regards,
Hi,
We only provide support via the comment section or email.
As I told earlier, it might be a problem with ssl, proxy or node version and etc. It’s nice that node version is out of the list. You may try starter version of Angular or ngx starter kit and probably still get the same error. Here is the repo to test: https://github.com/ngx-rocket/starter-kit
Please try answers from the google searches from the earlier comment.
