I want to create a responsive side nav. I watched a video on youtube.
click here to see that video
After, I enter below command to the terminal
ng generate #angular/material:material-nav -name=nav
But it give an error as below,
Unknown option: '-e'
How to resolve that?
My Package.json as below,
{
"name": "euc",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"bootstrap": "^4.4.1",
"hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.23",
"#angular/cli": "~8.3.23",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
Angular CLI flags start with a double dash.
ng generate #angular/material:material-nav --name=nav
Related
I have added phonegap-plugin-push plugin to an ionic 4.10.2 about two months ago,
it worked and I left the project alone for a while,
now when I recompile it (I don't have the working version anymore) it doesn't work.
The only notable difference since then is the console messages:
kill() returned unexpected error 1
as I have read they have to do with WKWebview and it was never been fixed,
but no one have ever mentioned it has anything to do with push notifications
I also get PushPlugin skip badge
I don't see any version changes in package.json that could indicate a change in versions of plugins.
{
"name": "*******",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "^8.2.3",
"#angular/common": "~8.1.2",
"#angular/core": "~8.1.2",
"#angular/forms": "~8.1.2",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "~8.1.2",
"#angular/platform-browser-dynamic": "~8.1.2",
"#angular/router": "~8.1.2",
"#ionic-native/call-number": "^5.18.0",
"#ionic-native/camera": "^5.17.0",
"#ionic-native/core": "^5.0.0",
"#ionic-native/launch-navigator": "^5.17.0",
"#ionic-native/push": "^5.19.1",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^4.7.1",
"#ionic/storage": "^2.2.0",
"angular2-moment": "^1.9.0",
"angular2-signaturepad": "^2.9.0",
"call-number": "^1.0.1",
"cordova-android": "8.1.0",
"cordova-ios": "4.5.5",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^4.0.0",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"cordova-plugin-whitelist": "1.3.3",
"cordova-sqlite-storage": "^3.4.0",
"cordova-support-google-services": "^1.3.2",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"hammerjs": "^2.0.8",
"mx.ferreyra.callnumber": "0.0.2",
"phonegap-plugin-multidex": "^1.0.0",
"phonegap-plugin-push": "2.3.0",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/architect": "~0.801.2",
"#angular-devkit/build-angular": "~0.801.2",
"#angular-devkit/core": "~8.1.2",
"#angular-devkit/schematics": "~8.1.2",
"#angular/cli": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/compiler-cli": "~8.1.2",
"#angular/language-service": "~8.1.2",
"#ionic/angular-toolkit": "~2.0.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-sqlite-storage": {},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"uk.co.workingedge.phonegap.plugin.launchnavigator": {
"GOOGLE_API_KEY_FOR_ANDROID": "1234",
"OKHTTP_VERSION": "3.+"
},
"mx.ferreyra.callnumber": {},
"call-number": {},
"phonegap-plugin-push": {}
},
"platforms": [
"android",
"ios"
]
}
}
nothing have change with Firebase and Provisioning files either.
any ideas? did it happen to anyone else recently? or is it just a coincidence and I should put more effort in searching the problem elsewhere
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,
},
});
I developped a web app with angular i need to package my web app using electron , it all seems fine until i run electron-packager , it takes forever , i dont know if it is supposed to be this slow or is there something wrong ?
ps : im on windows 7
this is my package.json
{
"name": "recherche-final",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build && electron .",
"pack": "electron-packager."
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.3",
"#angular/cdk": "^6.2.0",
"#angular/common": "^6.0.3",
"#angular/compiler": "^6.0.3",
"#angular/core": "^6.0.3",
"#angular/forms": "^6.0.3",
"#angular/http": "^6.0.3",
"#angular/material": "^6.4.2",
"#angular/platform-browser": "^6.0.3",
"#angular/platform-browser-dynamic": "^6.0.3",
"#angular/router": "^6.0.3",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.6.8",
"#angular/cli": "~6.0.8",
"#angular/compiler-cli": "^6.0.3",
"#angular/language-service": "^6.0.3",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"electron": "^5.0.6",
"electron-packager": "^14.0.1",
"electron-winstaller": "^3.0.4",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
i expect my app.exe
I know this is a late answer but just in case it helps anybody else- Have you checked how you have packaged your app? Make sure that your package.json files for angular and Electron are different. You are probably packing all the angular node modules as well into the electron application which is not necessary.
https://medium.com/#hellobharadwaj/electron-plus-angular-react-why-use-2-different-package-json-files-361ae47d07f3
I dont know whay bootstrap is not loaded properly at angular CLI Typescript based ASP.NET MVC based project. Somehow, seems default CSS files are overriden or i dont know exactly about the problem and no idea how to figure it out. I almost tried all solutions available on stackoverflow.com
For example following Bootstrap snippet not showing panel headers.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
I just created Angular app via CLI and modified package.json within the app. I did not copied the whole content at root folder.
So my solution structure is :
Moreover, part of angular.json is :
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"assets": [
"src/favicon.ico",
"src/assets"
],
"index": "src/index.html",
"main": "src/main.ts",
"outputPath": "../wwwroot/dist",
"polyfills": "src/polyfills.ts",
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss"
"src/styles.scss"
],
"tsConfig": "src/tsconfig.app.json"
},
.............
and packages.json is :
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^7.1.3",
"#angular/cdk": "^7.1.1",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/material": "^7.1.1",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26",
"bootstrap": "4.1.3",
"jquery": "^3.3.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.11.0",
"#angular/cli": "~7.1.3",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.27",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
Any body can let me know how to resolve this frustrating functioning error?
Since from what I can tell you don't even need the scss in your compile pipeline and you just need the css, change this;
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss"
"src/styles.scss"
],
to this;
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
"src/styles.scss"
],
...and ya should be good. Cheers.
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)