Discussion on Fury - Angular 16+ Material Design Admin Template

Discussion on Fury - Angular 16+ Material Design Admin Template

By
Cart 1,868 sales
Well Documented

visurel supports this item

Supported

This author's response time can be up to 1 business day.

427 comments found.

Hi,

Theme works great, but I came to something i can’t achieve. I just created a sidenav with sidenav-item with clickables icon

I’am unable to increase the icons size. I try to search and found md-18 etc but …nothing change. So I decided to replace icons with real images. I provided images with a size greater than the sidenav width, but even if i get the right Flex attributes, the images were not resized. With Bootstrap4 I realise this just with .img-fluid..

Do you know
  1. 1- how to increase icons size
  2. 2- how to make images responsive…
    1. Thanks

Thx Visurel to respond so quickly
Have a nice evening

@Visurel

I will try your hints for sizing. But before I have a question
You use a lot of Css class, for instance md-ripple-background. I searched it and it comes from Material2 Css.
Do you know where we can find a list of those Material2 Css, I mean a web site where (like Bootstrap4) we can find all Css provided ?
Thanks

Hey! You can find more info about Material2 on the material.angular.io website. :)

Hi there, I’ve purchased your template today and am trying to work with it.

First I’ll describe to you my environment. a. I’ve got Ubuntu 16.04 64bit server installed in a Oracle VirtualBox. b. I got only Git, Composer and Docker installed on it. c. I use Docker to build the Front-End container which also runs the server and exposes a port which can be accessed from the outside.

So a few things that I’d like a little help with please: 1. I’ve noticed that when upgrading the packages in the packages.json file it fails. Is there an upgrade path or a way to do it without breaking it? 2. In the docs you describe how to run (serve) the project with Angular-Cli. I’d like to run (serve) it using a node server. Can you please assist with it?

If you need I can email you directly my Docker file so that you can see what steps I’m taking.

Thank you in advance.

Regards, Tal.

Hey! Upgrading the packages is not needed. We always use the latest or currently needed versions and include all security fixes, if there are any, available. A lot of dependencies have breaking changes. We do not recommend updating the dependencies, as there is no reason to. When an update is needed, we always provide an update of our template with an updated package.json.

When using Angular-CLI with ng serve, it automatically runs with Node. We recommend developing locally and opening a local development server with `ng serve` and when deploying your application just use `ng build—prod` and you will get a ready for production use application in the /dist folder.

If you have any more questions, let us know! :)

Hi, First, I’d want to say: it’s a great template. Just a few questions please: 1. Is it using SASS and if not how difficult would it be to integrate it with SASS? 2. Is it using Bootstrap4 and if not how difficult would it be to integrate it with it? 3. If your answer is not on either of the above, do you have planes on integrating those technologies into your template in the near future?

Hey! Yes we’re using SASS for the styling. We’re not using Bootstrap, but it is also not really necessary, we provide styling through Material Design and having Bootstrap with Material Design isn’t really necessary. If you need the Grid-System, you can use Flex-Layout, which is way more dynamic than Bootstrap Grid System. Implementing Bootstrap is as easy as just importing the CSS and JS files from Bootstrap in the .angular-cli.json file. If you need more detailed instructions, let us know and we’ll put together a little instruction! :)

Hey, I am really interested in purchasing this template, it looks good and is Angular 2 ready. I just need to know if the starter project is ready to build for production? What kind of production build tool does it use? Do I need to configure it, or is it ready to build? (like the angular-seed at https://github.com/mgechev/angular-seed#how-to-start-with-aot-compilation). Thanks

Hey! Our template uses Angular-CLI (https://github.com/angular/angular-cli) a fully functional build tool, built in cooperation with Google Team members. It features CLI tools to build, serve, generate components and much more. If you want to know more, check out the Github page or just ask us. :)

Great, thank you for the quick response!

Hi,

Great theme. Do you know when you’ll update to support material@2.0.0-beta.2? The sidenav no longer works with material@2.0.0-beta.2.

Many thanks.

Hey! We’ll update it in the next update, just a few days hopefully! :) In the meantime just use material@2.0.0-beta.1 – Everything should still work.

Hi, we are working with quite a few angular2 typescript apps on the latest cli, node 7, npm, etc. and latest versions of angular2 (ionic2 where needed).. The app didn’t run simply by replacing the files in a new project (ng new project3).. Your docs have instructions for those new to angular2, typings, etc. Could you please recommend the easiest installation method for those with the latest stack, so I don’t have to ask our developers? Thanks!

Hey! The easiest way to get started with the theme is: 1. Download the theme from themeforest 2. Extract the .zip file 3. Run `npm install` inside the folder and wait for it to finish. 4. Run `npm start` to start the local development server.

There’s no need to use `ng new`. Everything is already prepared! :)

I just bought the Theme, but i am surprise. there are all the components providing the entire application. But I would expected a way to generate a fresh install, then add the needed components one by one…I hop you understand what I mean. In other term I would have expected a starter project. Is there a way to get a such thing ?

Thanks

Hey! Our template is kind of a starter project for Angular 2. If you don’t need a component you can very easily remove it just by deleting the corresponding folder with the component and removing the component from the app.module.ts. That’s it! And you can remove pretty much any component like this. We made it as easy as possible! :)

Hi,

I downloaded: themeforest-19325966-fury-angular-2-material-design-admin-template.zip

I upgraded the packages in package.json to the current versions. There have been many upgrades and I’d like to stay current.

I am getting 8 errors within the respective *.component.ts files: Property ‘time’ does not exist on type ‘typeof “C:/1Ang2Code/FuryMD2/node_mo dules/@types/d3/index”’

Do you have any advice?

Thanks. I just tracked down the note on the DVD3 library requiring a version 3 of d3.

My concern are the packages that didn’t have a ^ or ~. I’m assuming that there are breaking changes in these cases.

I’m going to start over from scratch and see if I can get a clean build with out-of-the-box package.json.

np . . . everything is working fine with the out-of-the-box package.json.

This project is a fantastic MD example with Angular 2. Very helpful.

I do look forward to an upgrade to use Material Design 2.0.0-beta.2

I also recommend an upgrade of @angular/cli to 1.0.0-rc.0 It seems to be working fine for me.

Thanks a lot! We’re currently working on the Material2 update and are going to release it very soon! Also we’re updating @angular/cli always to the latest version available at release time, so that one will be updated too. Hope everything is fine and you enjoy our theme, have fun coding! :)

Hi

I love the theme, but have some issues using it on my phone. I was concerned that it might have something to do with my environment, but then I came back here and tested the live preview and I am experiencing the same issues.

On my Samsung Galaxy S7, when I view the site in Chrome, the ability to scroll is lost after about two or three pages. I can open the menu and expand its items, but if I try to scroll down, the browser just sees it as a pull down and then refreshes the page. The same thing happens with normal content pages that have too much content for one screen.

Let me know if you want me to upload a video. If you already know if the issue, is there some plan to get it resolved?

Regards Johan

Thanks for sending us this! We’ll look into this and see what causes this behaviour and we’ll try to fix it. This is probably related to the tabs in the component. We’ll see and let you know if we find the issue! :)

Hi, any feedback on this issue? I have manually upgraded to beta.2 (I went through the changes as mentioned on the release notes of beta.2) and everything still works perfectly except the scrolling issue on mobile. Would love to have that sorted as soon as possible.

Hey! We’re currently prioritizing updating dependencies to stay up-to-date, but we’ve come a few steps closer to fixing your issue, we’ll try to resolve it asap! :)

Hi, just downloaded the package and tried to install, but the “angular-cli.json” file is missing. ng serve therefor throws an error… Could you please provide this file? Thanks

Hey! Make sure you’re using the new Angular-CLI package @angular/cli at version 1.0.0-beta.32.3. The angular-cli.json file got renamed to .angular-cli.json (note the dot at the beginning). The file is included in the template. :)

Do you have on your backlog upgrading material: 2.0.0-beta.1 to material: 2.0.0-beta.2? The update has some breaking changes that affect the styles in the template. (https://github.com/angular/material2/releases)

Absolutely! We’re currently working at it, updating to beta.2 shouldn’t be a problem, only a few style changes. We’ll release the update very soon! :)

I really like this. But it’s missing a timeline, invoice and profile page. Other then that it would be complete!

We’re currently working on these pages and will release them in our next update in a few weeks. :)

Awesome! I just favorited this and will keep an eye out! Thanks for the reply!

ng server dont refresh when change files with new update

Hey! There was a bug in the official @angular/cli which got fixed in the latest update. Could you run `ng -v` and send us the output? Here or to our email: support@martinsuess.com :)

Could you provide changelogs for major updates? Or provide a github repo with diff logs?

Awesome, I see it now. Thanks for that, it’s a great help!

I’m sure your team noticed this already but the latest changes to Material2 is a breaking change. Is the plan to continue to try to stay as up-to-date with the latest package updates or to remain with the most previous stable release?

Yes! We’re at it. The update should come in the next few days. :)

I did an ng serve and got the following error:

WARNING in ./src/app/core/sidenav/icon-sidenav.directive.ts 72:26-48 “export ‘ObservableMediaService’ was not found in ’@angular/flex-layout/media-query/observable-media-service’

WARNING in ./src/app/core/admin/admin.component.ts 63:26-48 “export ‘ObservableMediaService’ was not found in ’@angular/flex-layout/media-query/observable-media-service’

ERROR in Error encountered resolving symbol values statically. Calling function ‘FlexLayoutModule’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Users/Andrew/Sandbox/vellum-rough/src/app/app.module.ts, resolving symbol AppModule in /Users/Andrew/Sandbox/vellum-rough/src/app/app.module.ts

ERROR in /Users/Andrew/Sandbox/vellum-rough/src/app/core/sidenav/icon-sidenav.directive.ts (6,9): Module ’”/Users/Andrew/Sandbox/vellum-rough/node_modules/@angular/flex-layout/media-query/observable-media-service”’ has no exported member ‘ObservableMediaService’.)

ERROR in /Users/Andrew/Sandbox/vellum-rough/src/app/core/admin/admin.component.ts (4,9): Module ’”/Users/Andrew/Sandbox/vellum-rough/node_modules/@angular/flex-layout/media-query/observable-media-service”’ has no exported member ‘ObservableMediaService’.) webpack: Failed to compile.

Hey! We are aware of this issue and it will be fixed in the next update, at the beginning of the next week. For a temporary fix change flex-layout: ^2.0.0-beta.5 in package.json to flex-layout: 2.0.0-beta.4 (note the ^ and the changed version from beta.5 to beta.4).

Sorry for the inconvenience, we’re at it! :)

Hi! I buy today your project ;) I have question, when uodate this to flex-layout to 2.0.0-beta.5 ? and next you planed more components? If yes you have any roadmap?

Regards!

Hey! We already updated flex-layout to 2.0.0-beta.5 internally and are currently testing if everything is fine. Currently there had been no issues. Next up for components are complete Apps, first an Inbox component, followed by a calendar component, a chat component and various others. But we’re also open to suggestions as to what we should add! :)

Any project don’t have matrix page, create in Angular component for matrix example 2×9 and 3×9 etc. etc. :)

What do you mean my matrix page? We do have a Grid-Component here: https://fury.martinsuess.com/components/grid-list :)

Hello,

First of all – thanks for the template, it is really what I was looking for.

Nevertheless, I’m experiencing troubles with getting the template to start, after properly installing typings and angular-cli, and running ng serve, I receive the following error:

/usr/local/lib/node_modules/angular-cli/node_modules/@ngtools/json-schema/src/schema-class-factory.js:33 result.push(...indices); ^

SyntaxError: Unexpected token … at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/usr/local/lib/node_modules/angular-cli/node_modules/@ngtools/json-schema/src/index.js:2:30) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10)

Could you please direct me? Thanks in advance, Maty.

Sorry, it seems i figured it out, but I got a new problem.

When running ng serve, i receive the following error:

You have to be inside an angular-cli project in order to use the serve command.

Are you sure you followed the documentation step by step? When opening a terminal/cmd window and you use ng serve, make sure you’re in the correct folder. Use `cd` to move to the folder and make sure it is the top-most folder, not the src folder. If it somehow still doesn’t work, you can contact us at support@martinsuess.com and we’ll find the issue. :)

Hi again,

I tried googling but no use,

I’m following all the steps on documentation and at the end I get this error:

ERROR in /Applications/AMPPS/www/dows/src/app/customer/customer.component.ts (17,13): Type ‘{}’ is not assignable to type ‘Customer[]’.) /Applications/AMPPS/www/dows/src/app/customer/customer.component.ts (17,13): Type ‘{}’ is not assignable to type ‘Customer[]’. Property ‘length’ is missing in type ‘{}’.)

Hi,

I’m still having problems with this, please reproduce this error by following your documentation steps.

Basically I need to fetch array of objects with BaseService,

this.customerService.find().then((customers) => { console.log(customers); if( isArray(customers) ) this.customers = customers; });

console.log returns array of objects but this.customers won’t accept object, because customers returns as object.

Plx help i need to use this and It has been 13 days…

Nvm, got it myself, If anyone else gets the error:

this.customerService.find().then((customers) => {

to

this.customerService.find().then((customers: Array<any>) => {

Good to hear you figured it out! Sorry for the delay, your comment got kind of lost. If any more errors should occur, don’t hesitate to contact us! :)

Hello. Im trying to run it unsuccessfully. I download it, npm install, npm start and i get these errors:

ERROR in Error encountered resolving symbol values statically. Calling function ‘FlexLayoutModule’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Users/KyD/Desktop/fury-source/src/app/app.module.ts, resolving symbol AppModule in /Users/KyD/Desktop/fury-source/src/app/app.module.ts

ERROR in /Users/KyD/Desktop/fury-source/src/app/core/sidenav/icon-sidenav.directive.ts (6,9): Module ’”/Users/KyD/Desktop/fury-source/node_modules/@angular/flex-layout/media-query/observable-media-service”’ has no exported member ‘ObservableMediaService’.)

ERROR in /Users/KyD/Desktop/fury-source/src/app/core/admin/admin.component.ts (4,9): Module ’”/Users/KyD/Desktop/fury-source/node_modules/@angular/flex-layout/media-query/observable-media-service”’ has no exported member ‘ObservableMediaService’.) webpack: Failed to compile.

ng -v throws this:

angular-cli: 1.0.0-beta.28.3 node: 6.9.4 os: darwin x64 @angular/common: 2.4.7 @angular/compiler: 2.4.7 @angular/core: 2.4.7 @angular/flex-layout: 2.0.0-beta.5 @angular/forms: 2.4.7 @angular/http: 2.4.7 @angular/material: 2.0.0-beta.1 @angular/platform-browser: 2.4.7 @angular/platform-browser-dynamic: 2.4.7 @angular/router: 3.4.7 @angular/cli: 1.0.0-beta.31 @angular/compiler-cli: 2.4.7

please let me know how to fix it. Thanks! btw, i did tried just changing the flex-layout Version ito “2.0.0-beta.5” as the comment above says but that didn’t fix it for me

Hey! Angular-CLI and Flex-Layout both had big updates. Please try removing the global angular-cli package with `npm uninstall -g angular-cli` and install `npm install @angular/cli@latest`. Afterwards change the version of flex-layout to 2.0.0-beta.4. We’ll push an update asap hopefully today!

thanks! that did the trick =)

Hi,

My ng -v:

@angular/cli: 1.0.0-beta.31 node: 6.9.1 os: darwin x64 @angular/common: 2.4.7 @angular/compiler: 2.4.7 @angular/core: 2.4.7 @angular/flex-layout: 2.0.0-beta.5 @angular/forms: 2.4.7 @angular/http: 2.4.7 @angular/material: 2.0.0-beta.1 @angular/platform-browser: 2.4.7 @angular/platform-browser-dynamic: 2.4.7 @angular/router: 3.4.7 @angular/cli: 1.0.0-beta.31 @angular/compiler-cli: 2.4.7

I’m trying to ng serve but it throws this error:

WARNING in ./src/app/core/sidenav/icon-sidenav.directive.ts 72:26-48 “export ‘ObservableMediaService’ was not found in ’@angular/flex-layout/media-query/observable-media-service’

WARNING in ./src/app/core/admin/admin.component.ts 63:26-48 “export ‘ObservableMediaService’ was not found in ’@angular/flex-layout/media-query/observable-media-service’

ERROR in Error encountered resolving symbol values statically. Calling function ‘FlexLayoutModule’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Applications/AMPPS/www/dows/src/app/app.module.ts, resolving symbol AppModule in /Applications/AMPPS/www/dows/src/app/app.module.ts

ERROR in /Applications/AMPPS/www/dows/src/app/core/sidenav/icon-sidenav.directive.ts (6,9): Module ’”/Applications/AMPPS/www/dows/node_modules/@angular/flex-layout/media-query/observable-media-service”’ has no exported member ‘ObservableMediaService’.)

ERROR in /Applications/AMPPS/www/dows/src/app/core/admin/admin.component.ts (4,9): Module ’”/Applications/AMPPS/www/dows/node_modules/@angular/flex-layout/media-query/observable-media-service”’ has no exported member ‘ObservableMediaService’.) webpack: Failed to compile.

Well, I just looked into the CHANGELOG.md of flex-layout and saw the changes.

flex-layout Version is “2.0.0-beta.5 (2017-02-09)”

Regards.

Hey! Yes, it’s probably the update. We used 2.0.0-beta.4 and the update to beta.5 probably has some breaking changes. Try changing the package.json to install 2.0.0-beta.4 explicitly by removing the ^ in front. Hope this helps, we’ll fix this asap, hopefully today! :)

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey