Can't add material to angular module - angular-material

I try to find how to add angular material to work with angular divided into modules. It's work only in root, but not in modules.
ng add #angular/material
package.json
"dependencies": {
"#angular/animations": "^9.1.0-rc.2",
"#angular/cdk": "^9.1.3",
"#angular/common": "~9.1.0-rc.1",
"#angular/compiler": "~9.1.0-rc.1",
"#angular/core": "~9.1.0-rc.1",
"#angular/forms": "~9.1.0-rc.1",
"#angular/material": "^9.1.3",
"#angular/platform-browser": "~9.1.0-rc.1",
"#angular/platform-browser-dynamic": "~9.1.0-rc.1",
"#angular/router": "~9.1.0-rc.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.901.0-rc.0",
"#angular/cli": "~9.1.0-rc.0",
"#angular/compiler-cli": "~9.1.0-rc.1",
"#angular/language-service": "~9.1.0-rc.1",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
home.module.ts
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '../../../node_modules/#angular/platform-browser/animations';
import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home/home.component';
import { MatCardModule } from '#angular/material/card';
#NgModule({
declarations: [HomeComponent],
imports: [
CommonModule,
HomeRoutingModule,
MatCardModule,
BrowserAnimationsModule,
],
})
export class HomeModule { }
and my home.component.html
<p>home works!</p>
<mat-card>Simple card</mat-card>
it give me error:
ERROR in src/app/home/home/home.component.html:2:1 - error NG8001: 'mat-card' is not a known element:
1. If 'mat-card' is an Angular component, then verify that it is part of this module.
2. If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
to suppress this message.
I tried to import material card module to app.module.ts. But then it's works only in root component, not in module.

Related

DataTable: Print Not working in Angular 9 and Electron

I have an android 9 app recently converted to Electron app.
For DataTable, I have enabled Print and Excel options. Excel upload is fine and exporting data.
But Print is not working.
Its giving the following error
TypeError: Cannot read property 'close' of undefined at _Api.action (buttons.print.js:140) at action (dataTables.buttons.js:559)
I could see that win.document is null in buttons.print.js.
Also if I build it as normal ANgular app ( ng serve) , print is working fine too
In Angular.JSON I have loaded the script in following order
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.js",
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
"node_modules/datatables.net-buttons/js/buttons.flash.js",
"node_modules/datatables.net-buttons/js/buttons.html5.js",
"node_modules/datatables.net-buttons/js/buttons.print.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/jszip/dist/jszip.js"
The package.json file is as follows
"dependencies": {
"jquery": "^3.4.1",
"datatables.net": "^1.10.19",
"datatables.net-buttons": "^1.5.4",
"datatables.net-buttons-dt": "^1.5.4",
"datatables.net-dt": "^1.10.19",
"#angular-devkit/build-angular": "^0.900.2",
"#angular/animations": "~9.0.1",
"#angular/common": "~9.0.1",
"#angular/compiler": "~9.0.1",
"#angular/core": "~9.0.1",
"#angular/forms": "~9.0.1",
"#angular/localize": "9.0.1",
"#angular/platform-browser": "~9.0.1",
"#angular/platform-browser-dynamic": "~9.0.1",
"#angular/router": "~9.0.1",
"#fortawesome/angular-fontawesome": "^0.3.0",
"#fortawesome/fontawesome-svg-core": "^1.2.14",
"#fortawesome/free-solid-svg-icons": "^5.7.1",
"#ng-bootstrap/ng-bootstrap": "4.2.2",
"angular-datatables": "^7.0.0",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"cors": "^2.8.5",
"express": "^4.16.4",
"indexeddb-angular": "^0.1.8",
"jszip": "^3.1.5",
"luxon": "^1.16.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.23",
"ngx-indexed-db": "^2.0.5",
"ngx-material-timepicker": "^3.1.0",
"ngx-multi-window": "0.3.2",
"ngx-print": "^1.1.4",
"popper.js": "^1.14.6",
"rxjs": "~6.5.4",
"tslib": "1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-builders/custom-webpack": "8.4.1",
"#angular-eslint/builder": "0.0.1-alpha.18",
"#angular/cli": "9.0.2",
"#angular/compiler-cli": "9.0.1",
"#angular/language-service": "9.0.1",
"#ngx-translate/core": "12.0.0",
"#ngx-translate/http-loader": "4.0.0",
"#types/datatables.net": "^1.10.14",
"#types/datatables.net-buttons": "^1.4.0",
"#types/jasmine": "3.3.16",
"#types/jasminewd2": "2.0.8",
"#types/jquery": "^3.3.29",
"#types/mocha": "5.2.7",
"#types/node": "12.11.1",
"#typescript-eslint/eslint-plugin": "2.19.0",
"#typescript-eslint/parser": "2.19.0",
"chai": "4.2.0",
"codelyzer": "5.1.2",
"conventional-changelog-cli": "2.0.32",
"core-js": "3.1.4",
"cross-env": "7.0.0",
"electron": "8.0.0",
"electron-builder": "22.3.2",
"electron-reload": "1.5.0",
"eslint": "6.8.0",
"eslint-plugin-import": "2.20.1",
"jasmine-core": "3.4.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.2.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-electron": "6.3.0",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.2",
"mocha": "6.2.2",
"ngx-electron": "2.2.0",
"npm-run-all": "4.1.5",
"protractor": "~5.4.0",
"spectron": "10.0.1",
"ts-node": "8.3.0",
"tslint": "~5.11.0",
"typescript": "3.7.5",
"wait-on": "4.0.0",
"webdriver-manager": "12.1.7"
},
Any pointers on this will be helpful
The information given in the post helped me ( angular application build in electron print a div shows blank window ).
The answer is : in main.ts for electron, need to add
nativeWindowOpen: true as below.
win = new BrowserWindow({
x: 0,
y: 0,
width: size.width,
height: size.height,
webPreferences: {
nodeIntegration: true,
nativeWindowOpen: true, //**** add this**
allowRunningInsecureContent: (serve) ? true : false,
},
});

angular 7+ ionic 4 Can't bind to 'datasets' since it isn't a known property of 'canvas'

I am getting the error when trying to use ng2-charts with Angular 7 and ionic 4.
package.json:
"dependencies": {
"#angular/common": "^7.2.2",
"#angular/core": "^7.2.2",
"#angular/forms": "^7.2.2",
"#angular/http": "^7.2.2",
"#angular/platform-browser": "^7.2.2",
"#angular/platform-browser-dynamic": "^7.2.2",
"#angular/router": "^7.2.2",
"#ionic-native/core": "^5.0.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^4.1.0",
"chart.js": "^2.8.0",
"ng2-charts": "^2.2.2",
"rxjs": "~6.3.3",
"zone.js": "^0.8.29"
},
app.module.ts:
import { ChartsModule } from 'ng2-charts';
...
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
ChartsModule
],
Any hint will be helpful. Thanks!

Layering component styles (css) on top of each other

In our SPA there is a strange feature of css styles behavior,
the problem is layering styles, this happens when you go to /rout (links), styles from the previous component are saved and added to the new, when you reload such a page in the browser (ctrl+r) everything falls into place, the component begins to have only its own css styles.
our sequence of actions:
open the component [A]
transition to component [B]
styles of component [A] added to component [B]
we pass from component [B] already in [С]
component [С] has styles from the whole chain of transitions [А] + [B] + [С] although it should have only [С]
We use:
"dependencies": {
"#amcharts/amcharts4": "^4.1.3",
"#angular/animations": "^7.2.4",
"#angular/cdk": "^7.3.1",
"#angular/common": "^7.2.4",
"#angular/compiler": "^7.2.4",
"#angular/core": "^7.2.4",
"#angular/forms": "^7.2.4",
"#angular/http": "^7.2.4",
"#angular/material": "^7.3.1",
"#angular/platform-browser": "^7.2.4",
"#angular/platform-browser-dynamic": "^7.2.4",
"#angular/router": "^7.2.4",
"#compodoc/compodoc": "^1.1.7",
"#molteni/export-csv": "0.0.2",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"copyfiles": "^2.1.0",
"core-js": "^2.6.2",
"decimal.js-light": "^2.5.0",
"google-protobuf": "^3.6.1",
"grpc-web": "^1.0.3",
"hammerjs": "^2.0.8",
"husky": "^1.2.0",
"jquery": "^3.3.1",
"ngx-i18n-combine": "^1.1.0",
"ngx-translate-parser-plural-select": "^1.1.3",
"node-sass": "^4.11.0",
"normalize.css": "^8.0.1",
"protobufjs": "^6.8.8",
"qrious": "^4.0.2",
"rxjs": "^6.3.3",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-builders/jest": "^7.2.0",
"#angular-devkit/build-angular": "~0.12.1",
"#angular/cli": "~7.2.1",
"#angular/compiler-cli": "^7.2.0",
"#angular/language-service": "^7.2.0",
"#commitlint/cli": "^7.3.2",
"#commitlint/config-angular": "^7.3.1",
"#types/google-protobuf": "^3.2.7",
"#types/jquery": "^3.3.29",
"#types/node": "~10.12.12",
"codelyzer": "~4.5.0",
"commitizen": "^2.7.6",
"cz-customizable": "^5.3.0",
"date-format": "^2.0.0",
"fs-extra": "^7.0.1",
"git-describe": "^4.0.3",
"hash-files": "^1.1.1",
"htmllint": "^0.7.3",
"htmllint-cli": "0.0.7",
"http-server": "^0.11.1",
"jest": "^23.6.0",
"js-beautify": "^1.8.9",
"minimist": "^1.2.0",
"protractor": "^5.4.2",
"replace": "^1.0.1",
"stylelint": "^9.9.0",
"stylelint-config-standard": "^18.2.0",
"tar": "^4.4.8",
"ts-node": "^7.0.1",
"tslint": "^5.12.0",
"typescript": "3.1.6",
"typescript-formatter": "^7.2.2",
"webpack-bundle-analyzer": "^3.0.3"
}

Angular5 material Paginator is not working

I want to use MatPaginatorModule in my angular t project but i am getting error:
Can't bind to 'pageSize' since it isn't a known property of 'mat-paginator'
1. If 'mat-paginator' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
...............
html
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
i have imported module in my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { GlobalModule } from './global/global.module';
import { ProtectedModule} from './protetcted/protect-module.component';
import { AppRoutingModule } from './app.routing.module';
// import { MatTableModule } from '#angular/material/table';
import { MatPaginatorModule } from '#angular/material';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
GlobalModule,
ProtectedModule,
AppRoutingModule,
// MatTableModule,
MatPaginatorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
i am using angular5
package.json
{
"name": "eci",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.10",
"#angular/cdk": "^5.2.5",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.1.0",
"cfenv": "^1.0.4",
"core-js": "^2.4.1",
"express": "^4.15.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "~1.7.2",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.3.1",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
#Kumail,
Everything looks fine from the snippets you posted.
Though this error will occur only when the required module is not linked. The only reason I could think of is that, you might not have saved app.module.ts file after modifications. I did follow all the steps to integrate a MatPaginatorModule in a test project and it worked. Then I mocked to include that module in app.module.ts but not saved the changes. This time I got the error you posted. Try saving, If you could have missed after modifying app.module.ts file.
If the error is coming while doing testing, then the imports are needed in the test/spec file. (app.component.spec.ts)

Issue while running ASP Dot net core 2.0 - MVC 6 application with angular 4 material

I have created a ASP.Net Core Web application like in image with Angular. After successful creation of application, the solution run fine and output came in browser perfectly.
After, I have included angular material to the above project. Below is package.json
.{
"name": "WebApplication1",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"#angular/animations": "5.0.2",
"#angular/common": "5.0.2",
"#angular/compiler": "5.0.2",
"#angular/compiler-cli": "5.0.2",
"#angular/core": "5.0.2",
"#angular/forms": "5.0.2",
"#angular/http": "5.0.2",
"#angular/platform-browser": "5.0.2",
"#angular/platform-browser-dynamic": "5.0.2",
"#angular/platform-server": "5.0.2",
"#angular/router": "5.0.2",
"#angular/cdk": "5.0.1",
"#angular/material": "^5.0.0-rc.3",
"#ngtools/webpack": "1.5.0",
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/webpack-env": "1.13.0",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"chai": "4.0.2",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.5",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.18"
},
"dependencies": {
"#angular/cdk": "^5.0.1"
}
}
After installing angular material using npm, I have added all angular/material module import code in app.server.module.ts. Like below:
import { MatFormFieldModule } from '#angular/material';
And imported MatFormFieldModule into NgModule.
And my html is like:
<mat-form-field>
<textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field>
Finally the below error is coming in browser:
"mat-form-field" is unknown element
Please help me to short out this issue.
Import below Modules into the app.server.module.ts.
import { NgModule } from '#angular/core';
import { MatInputModule, MatFormFieldModule } from '#angular/material';
#NgModule({
imports: [
MatInputModule,
MatFormFieldModule
],
})
export class serverModule {
}
Declare your component Eg. Index.component.ts is declared into your module like below.
#NgModule({
imports: [
MatInputModule,
MatFormFieldModule
],
declarations : [
IndexComponent.ts
]
})
export class serverModule {
}
Then into your Index.component.html write this.
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field>
</form>
Note. before all these steps you should setup angular material into your project .
For any module of angular material that you want to use into your project, you should first import it's Mat...Module into the module that you are working to.
just like above.

Resources