umutesen/angular-material-template

Responsive Angular Material admin application template built on top of Angular, Angular Material and other open-source libraries.

Hey, I'm Umut 👋🏻

---

I'm a software developer with a passion for all things web.

---

angular-material-template's Issues

"expression has changed after it was checked in loading component" issues

It occurs on SpinnerService Show() Hide() methods, because of http interceptor. Will provide PR with the fixes.

Project still active?

I have updated the project to Angular 17 and will do a pull request but if you are not wanting to maintain it any longer I will just keep the changes on my repo.
Just asking before I start making major changes to my repo.

BTW this is a great project as a starting point. Thanks!!

Icon page not work

Hi,
First thank you very much for your work, i want use your template to build qcm application for my school, i cloned the project and update it to latest angular version. But the icon page show nothing

console error
ERROR DOMException: Permission denied to access property "document" on cross-origin object main-es2015.4f4c9b18371aa951fa3b.js:99:123807
Angular 17
Ki
handleError
bootstrapModuleFactory
invoke
run
runOutsideAngular
bootstrapModuleFactory
invoke
onInvoke
invoke
run
M
invokeTask
onInvokeTask
invokeTask
runTask
m
DOMException: Permission denied to access property "document" on cross-origin object main-es2015.4f4c9b18371aa951fa3b.js:144:17287
Angular 7
uvtw
invoke
run
M
invokeTask
runTask
m

​

Fix url on About section

@umutesen You may have to fix the url on about section of this repository - https://onthecode.co.uk/product/angular-material-template url is 404.

This can't be done via pull request. Hence creating an issue

License file is missing

Project page (https://onthecode.co.uk/angular-material-starter-template-for-your-next-project/) links to an MIT license file (https://github.com/umutesen/angular-material-template/blob/master/LICENSE) which is missing from repository.

Issues with other common libraries

Adding other libraries with directives produces issues of these sorts.

I added this package ngx-highlightjs - https://www.npmjs.com/package/ngx-highlightjs
Followed the documentation exactly as is.

A sample is here : https://stackblitz.com/edit/ngx-highlightjs-tpratt?file=package.json,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fhome%2Fhome.component.ts

Getting this error. I have spent a few hours already, but wanted to check if you have seen something similar.

But the same works fine in apps created using ng new

update angular 15

1. update angular v15
2. update angular material v15
3. update angular eslint v15
4. Migrating to MDC-based Angular Material Components

How to Add RTL Support

Would like to know how to add RTL

aa

Update don't work

I try to update via ng update --all here is the output witch is broken:

    ** Executing migrations for package '@angular/core' **
UPDATE src/app/custom-material/custom-material.module.ts (3749 bytes)
    ** Executing migrations for package '@angular/cdk' **
            Could not find TypeScript project for project: angular-material-template-e2e
            
              ✓  Updated Angular CDK to version 9
            
            Could not find TypeScript project for project: angular-material-template-e2e
            
              ✓  Updated Angular CDK to version 10
            
    ** Executing migrations for package '@angular/cli' **
            Package "@angular-devkit/schematics" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json.
            tslint configuration does not extend "tslint:recommended" or it extends multiple configurations.
            Skipping rule changes as some rules might conflict.
            Package "@angular-devkit/schematics" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json.
ERROR! tsconfig.base.json does not exist..
The Schematic workflow failed. See above.

ng serve
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/cdk/layout : es2015 as esm2015
Compiling @angular/flex-layout/core : es2015 as esm2015
Compiling @angular/cdk/text-field : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/cdk/table : es2015 as esm2015
Compiling @angular/cdk/stepper : es2015 as esm2015
Compiling @angular/cdk/tree : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/flex-layout/extended : es2015 as esm2015
Compiling @angular/flex-layout/flex : es2015 as esm2015
Compiling @angular/flex-layout/grid : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/material/core : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling ngx-logger : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/cdk/clipboard : es2015 as esm2015
Compiling @angular/cdk/drag-drop : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/flex-layout : es2015 as esm2015
Compiling @angular/material/expansion : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/material/form-field : es2015 as esm2015
Compiling @angular/material/button : es2015 as esm2015
Compiling @angular/material/icon : es2015 as esm2015
Compiling @angular/material/tooltip : es2015 as esm2015
Compiling @angular/material/dialog : es2015 as esm2015
Compiling @angular/material/divider : es2015 as esm2015
Compiling @angular/material/sort : es2015 as esm2015
Compiling @angular/material/badge : es2015 as esm2015
Compiling @angular/material/bottom-sheet : es2015 as esm2015
Compiling @angular/material/select : es2015 as esm2015
Compiling @angular/material/input : es2015 as esm2015
Compiling @angular/material/autocomplete : es2015 as esm2015
Compiling @angular/material/button-toggle : es2015 as esm2015
Compiling @angular/material/card : es2015 as esm2015
Compiling @angular/material/checkbox : es2015 as esm2015
Compiling @angular/material/chips : es2015 as esm2015
Compiling @angular/material/grid-list : es2015 as esm2015
Compiling @angular/material/datepicker : es2015 as esm2015
Compiling @angular/material/icon/testing : es2015 as esm2015
Compiling @angular/material/list : es2015 as esm2015
Compiling @angular/material/paginator : es2015 as esm2015
Compiling @angular/material/menu : es2015 as esm2015
Compiling @angular/material/progress-bar : es2015 as esm2015
Compiling @angular/material/progress-spinner : es2015 as esm2015
Compiling @angular/material/radio : es2015 as esm2015
Compiling @angular/material/sidenav : es2015 as esm2015
Compiling @angular/material/slide-toggle : es2015 as esm2015
Compiling @angular/material/slider : es2015 as esm2015
Compiling @angular/material/snack-bar : es2015 as esm2015
Compiling @angular/material/stepper : es2015 as esm2015
Compiling @angular/material/table : es2015 as esm2015
Compiling @angular/material/tabs : es2015 as esm2015
Compiling @angular/material/toolbar : es2015 as esm2015
Compiling @angular/material/tree : es2015 as esm2015
Compiling @angular/material-moment-adapter : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling ngx-logger/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 2.03 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 154 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 554 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 167 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 375 kB [initial] [rendered]
Date: 2020-07-09T09:54:45.502Z - Hash: b2bb60122a2ed6c88768 - Time: 10695ms

ERROR in src/app/custom-material/custom-material.module.ts:78:21 - error TS2304: Cannot find name 'ModuleWithProviders'.

78   static forRoot(): ModuleWithProviders<CustomMaterialModule> {
                       ~~~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2020-07-09T09:54:48.714Z - Hash: 58dd0b170151860778c8
6 unchanged chunks

Time: 2641ms

WARNING in /***/***/***/***/***/src/test.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/about/about-home/about-home.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/about/about-routing.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/about/about.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/account/profile/profile.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/account/account-routing.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/account/change-password/change-password.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/account/profile-details/profile-details.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/account/account.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/auth/login/login.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/auth/password-reset-request/password-reset-request.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/auth/password-reset/password-reset.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/auth/auth-routing.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/auth/auth.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/customers/customer-list/customer-list.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/customers/customers-routing.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/customers/customers.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/dashboard/dashboard-home/dashboard-home.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/dashboard/dashboard-routing.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/dashboard/dashboard.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/icons/icons/icons.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/icons/icons-routing.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/icons/icons.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/shared/mocks/spinner-consumer.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/shared/validators/autocompleteSelectionValidator.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/typography/typography/typography.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/typography/typography-routing.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/typography/typography.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/users/user-list/user-list.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/users/users-routing.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/app/users/users.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /***/***/***/***/***/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
: Compiled successfully.
    
    ERROR in src/app/custom-material/custom-material.module.ts:78:21 - error TS2304: Cannot find name 'ModuleWithProviders'.
    
    78   static forRoot(): ModuleWithProviders<CustomMaterialModule> {
                           ~~~~~~~~~~~~~~~~~~~

Can you help me?

I want to use Angular and Material in the newest version.