Kendo NumericTextBox and MaskedTextBox AOT issue - kendo-ui-angular2

While AOT compiling the project with Kendo Angular2 NumericTextBox and MaskedTextBox, following error occurs:
maskedtextbox.component.ngfactory.ts:275:35: Supplied parameters do not match any signature of call target.
maskedtextbox.component.ngfactory.ts:279:35: Supplied parameters do not match any signature of call target.
maskedtextbox.component.ngfactory.ts:283:35: Supplied parameters do not match any signature of call target.
numerictextbox.component.ngfactory.ts:203:41: Property 'widgetClass' is private and only accessible within class 'NumericTextBoxComponent'
numerictextbox.component.ngfactory.ts:208:41: Property 'numericClass' is private and only accessible within class 'NumericTextBoxComponent'
6.numerictextbox.component.ngfactory.ts:242:48: Property 'hostBlur' is protected and only accessible within class 'NumericTextBoxComponent' and its subclasses.
Here is my package.json entries:
"#angular/common": "2.4.0",
"#angular/compiler": "2.4.0",
"#angular/compiler-cli": "2.4.0",
"#angular/core": "2.4.0",
"#angular/forms": "2.4.0",
"#angular/http": "2.4.0",
"#angular/platform-browser": "2.4.0",
"#angular/platform-browser-dynamic": "2.4.0",
"#angular/platform-server": "2.4.0",
"#angular/router": "3.4.0",
"#progress/kendo-angular-buttons": "0.14.0",
"#progress/kendo-angular-dialog": "0.14.1",
"#progress/kendo-angular-dropdowns": "0.24.4",
"#progress/kendo-angular-intl": "0.9.0",
"#progress/kendo-angular-grid": "0.7.0",
"#progress/kendo-angular-popup": "0.15.0",
"#progress/kendo-angular-upload": "0.12.0",
"#progress/kendo-data-query": "0.2.0",
"#progress/kendo-popup-common": "0.3.0",
"#progress/kendo-angular-inputs": "0.18.2",
"#progress/kendo-theme-default": "2.11.4",
"#telerik/kendo-dropdowns-common": "0.2.0",
"#telerik/kendo-intl": "0.12.0",
"#telerik/kendo-theme-default": "1.32.0",
"#telerik/kendo-draggable": "1.5.1",
"#telerik/kendo-inputs-common": "2.1.0",
AppModule imports
import { DialogModule } from '#progress/kendo-angular-dialog';
import { DropDownsModule } from '#progress/kendo-angular-dropdowns';
import { PopupModule } from '#progress/kendo-angular-popup';
import { IntlService } from '#progress/kendo-angular-intl';
Another Module imports
import { GridModule } from '#progress/kendo-angular-grid';
import { UploadModule } from '#progress/kendo-angular-upload';
import { InputsModule } from '#progress/kendo-angular-inputs';

Why all the telerik packages? You probably don't need those. Could you also share your app.module.ts file?
You should use only the #progress package and declare this in your app.module.ts :
import { InputsModule } from '#progress/kendo-angular-inputs';
edit: Answered too fast, they are dependancies for the progress packages. You shouldn't put them in your packages.json, though, as they will be installed automatically by npm as dependancies.

I am having this problem as well (or something very similar). I can not run the JIT version of my application (using "npm start" with the lite server) or build the application into an AOT version. I'm not even using the masked textbox anywhere in my application. The only reason I have inputs installed at all is for the slider.
Anyhow, I can understand the build causing errors if something is wrong in the factory component but I do not understand why running the JIT version would be an issue. Maybe since the AOT folder resides within my root npm installed application folder everything gets JIT compiled on npm start?
I was able to get the JIT version running by deleting the following files:
AOT\app
AOT\#progres
AOT\#telerik
I cannot however build the application. When I attempt, I get the following:
Error at
C:/Dashboard/aot/node_modules/#progress/kendo-angular-inputs/dist/es/slider/slider-ticks.component.ngfactory.ts:87:7:
Supplied parameters do not match any signature of call target.
Error at
C:/0/Health/Dashboard-lite/aot/node_modules/#progress/kendo-angular-inputs/dist/es/slider/slider.component.ngfactory.ts:207:7:
Supplied parameters do not match any signature of call target.
Examining the slider-ticks.component.ngfactory, the error looks like this:
Hopefully this helps to eventually solve the problem...

getting the same error. i modified the file numerictextbox.component.d.ts to remove private/protected from the 3 declaration. and made type of widgetClass and numericClass to any to make aot build work
can these be ignored?
Error at
App/aot/node_modules/#progress/kendo-angular-inputs/dist/es/numerictextbox/numerictextbox.component.ngfactory.ts:195:41: Property 'widgetClass' is private and only accessible within class 'NumericTextBoxComponent'.
Error at
App/aot/node_modules/#progress/kendo-angular-inputs/dist/es/numerictextbox/numerictextbox.component.ngfactory.ts:200:41: Property 'numericClass' is private and only accessible within class 'NumericTextBoxComponent'.
Error at
App/aot/node_modules/#progress/kendo-angular-inputs/dist/es/numerictextbox/numerictextbox.component.ngfactory.ts:214:48: Property 'hostBlur' is protected and only accessible within class 'NumericTextBoxComponent' and its subclasses.

Related

Electron Forge v6, Keytar & Node-Loader Error "no suitable image found... file too short"

I am having some trouble getting the Keytar package working in an Electron Forge v6 project (beta.54).
In a freshly generated project, I receive an error about "file too short" when I run the application. Below is an excerpt of the error dialog shown originating from the main process:
> electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 1 / 1
✔ Compiling Main Process Code
✔ Launch Dev Servers
✔ Compiling Preload Scripts
✔ Launching Application
Webpack Output Available: http://localhost:9000
App threw an error during load
Error: node-loader:
Error: dlopen(/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node, 1): no suitable image found. Did find:
/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node: file too short
/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node: file too short
at Object.<anonymous> (/Users/abc/Desktop/app2/.webpack/main/index.js:1015:9)
at Object../node_modules/keytar/build/Release/keytar.node (/Users/abc/Desktop/app2/.webpack/main/index.js:1018:30)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at Object../node_modules/keytar/lib/keytar.js (/Users/abc/Desktop/app2/.webpack/main/index.js:1029:14)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at Object../src/index.ts (/Users/abc/Desktop/app2/.webpack/main/index.js:1440:14)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at /Users/abc/Desktop/app2/.webpack/main/index.js:85:18
at Object.<anonymous> (/Users/abc/Desktop/app2/.webpack/main/index.js:88:10)
at Module._compile (internal/modules/cjs/loader.js:1152:30)
It seems that node-loader is having trouble with this package. I cannot decipher what is happening as I can see the package .node files are copied into ./webpack/main/native_modules , but there is a hashed filename at the root which seems to import the native file.
One strange thing I did notice is that the hashed file at .webpack/main/9e6f9bf6669542cb15efba32c033f3de.node contains the following and not the native binary data:
module.exports = __non_webpack_require__("./native_modules/build/Release/keytar.node")
Subsequently... these .node files /native_modules/build/Release/keytar.node are what I expect.
How should one proceed? I didn't rush to open issues on GitHub until I figured where the issue was coming from.
I feel at the root, there's an issue with how the .node file is generated in keytar, but then who even knows what black magic is happening with Webpack and the loaders.
Steps to reproduce
Create a new Electron Forge project `npx create-electron-app app2 --template=typescript-webpack
Install Keytar npm install keytar
Add const key tar = require('keytar'); into src/index.ts
Run the app via npm run start
Experience the error
Versions
Node: v14.14.0
NPM: v7.0.13
Package JSON dependencies:
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.54",
"#electron-forge/maker-deb": "^6.0.0-beta.54",
"#electron-forge/maker-rpm": "^6.0.0-beta.54",
"#electron-forge/maker-squirrel": "^6.0.0-beta.54",
"#electron-forge/maker-zip": "^6.0.0-beta.54",
"#electron-forge/plugin-webpack": "6.0.0-beta.54",
"#marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
"#typescript-eslint/eslint-plugin": "^4.0.1",
"#typescript-eslint/parser": "^4.0.1",
"css-loader": "^4.2.1",
"electron": "11.0.3",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.20.0",
"fork-ts-checker-webpack-plugin": "^5.0.14",
"node-loader": "^1.0.1",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.2",
"typescript": "^4.0.2"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0",
"keytar": "^7.2.0"
}
I had pretty much exact replica of this issue with native module loading the only difference being that in my case the module was locally built and installed as a part of the project.
Something in the webpack's support for native modules has issues within this configuration and causes this. What did the trick for me was to remove node-loader in webpack in webpack.rules.js, ie removing this section:
- // Add support for native node modules
- {
- test: /\.node$/,
- use: 'node-loader',
- },
I found this solution and further discussion on the topic from the issue tracker of electron-forge: https://github.com/electron-userland/electron-forge/issues/1688

How is the SharePoint FX's integration with Angular?

How is the SharePoint FX's integration with Angular? I know it has good support for React, but want to know the pros and cons of SharePoint Framework with Angular 6+
Lets update some of the files for Angular to work with SharePoint Framework.
package.json
"#angular/common": "^6.0.3",
"#angular/compiler": "^6.0.3",
"#angular/core": "^6.0.3",
"#angular/elements": "^6.0.3",
"#angular/platform-browser": "^6.0.3",
"#angular/platform-browser-dynamic": "^6.0.3",
"#webcomponents/custom-elements": "^1.1.1",
"core-js": "^2.5.7",
"rxjs": "^6.2.0",
"zone.js": "^0.8.26"
tsconfig.json
This is the TypeScript configuration file for the IDE. Open tsconfig.json file, add below line under "compilerOptions".
"emitDecoratorMetadata": true,
gulpfile.js
This file defines all the tasks for the project like compiling TypeScript files to JavaScript, bundle and minify JS/CSS files etc. We need to modify the build process. Open "gulpfile.js" file and add below code just above the "build.initialize" line.
const webpack = require('webpack');
const path = require('path');
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.plugins.push(new webpack.ContextReplacementPlugin(/\#angular(\\|\/)core(\\|\/)fesm5/, path.join(__dirname, './client')));
return generatedConfiguration;
}
});
Here are two solution with source code about use Angular 6 in SharePoint framework for your reference.
Angular Demo Webpart
Angular Elements in SharePoint Framework

react-geosuggest issue Module not found: Error: Can't resolve 'prop-types'

I'm having trouble releasing my application on Azure when it comes to use webpack.
The following error is thrown when run on the server.
ERROR in ./node_modules/react-geosuggest/module/prop-types.js
Module not found: Error: Can't resolve 'prop-types' in 'd:\a\1\s\some\project\node_modules\react-geosuggest\module'
# ./node_modules/react-geosuggest/module/prop-types.js 7:17-38
# ./node_modules/react-geosuggest/module/Geosuggest.js
# multi moment react-geosuggest react-bootstrap react-overlays ./Scripts/React/Components/Oem
and I don't see/know what exactly the issue is.
On the other hand - locally - it's running/building without any issues. So I'm really stuck at this point.
This is what my dependencies (in package.json) look like:
"dependencies": {
"bootstrap": "3.3.7",
"classnames": "^2.2.5",
"moment": "^2.19.2",
"react": "15.6.1",
"react-addons-css-transition-group": "^15.6.0",
"react-addons-transition-group": "^15.6.0",
"react-dom": "15.6.1",
"react-bootstrap": "0.31.5",
"react-geosuggest": "2.7.0",
"webpack": "^3.6.0",
"pathval": "1.1.0"
}
In antoher project where I use react-geosuggest it's working/building without any complains.
I've already tried to use the latest version of react & react-dom as well as adding prop-types. But still the same issue.
I had a similar problem and solved it by adding this to my dependencies section in package.json:
"prop-types": "^15.6.1"
followed by rerunning:
yarn install

Angular2 and express node.d.ts conflict

I am trying to configure an angular2+express project. I understand the cause of the problem, but not the correct solution. Here are the relevant parts of my package.json dependencies:
"dependencies": {
"angular2": "2.0.0-beta.0",
"express": "^4.13.3",
"tsd": "^0.6.5",
"typescript": "^1.4.1",
<...lots of peer dependencies>
}
Node 5.2.0 is installed globally. When I run tsd install, I get ./typings/node.d.ts pulled in, for what the comments claim to be v0.12.0 API. But this conflicts with angular2/typings/node/node.d.ts (which also claims v0.12.0). The .d.ts files are different, for example:
./node_modules/angular2/typings/node/node.d.ts
---> declare var global: NodeJS.Global;
./typings/node/node.d.ts
---> declare var global: any;
The result is a mass of TS2300: Duplicate identifier errors. I can hack around this by manually deleting ./typings/node and editing ./typings/express/express.d.ts to have:
/// <reference path="../../node_modules/angular2/typings/node/node.d.ts" />
Now everything works, but obviously this is just plain 'wrong'. What is the standard way to pull in expres.d.ts so it plays nice with Angular 2?

How to integrate foundation for apps into an existing Express framework

OK, I'm fairly new to all this front end programming and I hope my question is not silly.
I have an existing app made with an express.js framework with a custom gulp config and ejs. Now, I want to integrate the all new shiny Foundation for Apps into it.
On the Zurb website, the manual install is only a one-liner through bower or npm (http://foundation.zurb.com/apps/docs/index.html#!/installation)
bower install foundation-apps --save
npm install foundation-apps --save
So that's what I did, but the Foundation formatting is not happening at all.
I tried to include the CDN reference lines (css and js) too, but the same is happening.
When I proceed to create an app with the "normal" installation, everything is working great. But I want to use the Express framework and this is not the case here!
I am missing something but I don't see what.
package.json
{
"name": "2004app",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"apache-server-configs": "^2.7.1",
"body-parser": "~1.12.0",
"browser-sync": "^1.3.0",
"cookie-parser": "~1.3.4",
"debug": "~2.1.1",
"del": "^1.1.0",
"ejs": "~2.3.1",
"express": "~4.12.2",
"foundation-apps": "^1.1.0",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.0.0",
"gulp-cache": "0.2.2",
"gulp-changed": "^1.0.0",
"gulp-concat": "2.5.2",
"gulp-csso": "^1.0.0",
"gulp-flatten": "0.0.4",
"gulp-if": "^1.2.1",
"gulp-imagemin": "^2.0.0",
"gulp-jshint": "^1.6.3",
"gulp-load-plugins": "^0.8.0",
"gulp-minify-html": "0.1.5",
"gulp-nodemon": "^2.0.2",
"gulp-rename": "1.2.2",
"gulp-replace": "^0.5.0",
"gulp-sass": "^1.2.0",
"gulp-size": "^1.0.0",
"gulp-sourcemaps": "^1.3.0",
"gulp-uglify": "^1.0.1",
"gulp-uncss": "^1.0.0",
"gulp-useref": "^1.0.1",
"jshint-stylish": "^1.0.0",
"morgan": "~1.5.1",
"opn": "^1.0.0",
"psi": "^1.0.4",
"require-dir": "^0.1.0",
"run-sequence": "^1.0.1",
"serve-favicon": "~2.2.0"
}
}
For example, the following code is not rendering like it should. It only shows a line with 3 times "Content goes here", instead of this : http://foundation.zurb.com/apps/docs/#!/accordion
<zf-accordion>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
</zf-accordion>
Is what I am trying to do possible ?
How can I use the CDN references ? (I successfully put CDN references for bootstrap in another app)
Thanks!
It is possible!
Though it has quite a few moving pieces that you should understand.
I recently did the same thing, but depending on the size of your app's frontend it may take some time to understand everything that is going on. It's not as simple as just including a library.
You mention express app, is it an Angular app? First thing if your not familiar with Angular I would read about it and specifically 'Modules' as in the end that is all Foundation Apps is.
https://docs.angularjs.org/guide/module
You will need to create your angular module and have Foundation as dependency.
Also it is good to realize that the way that foundation for apps is packaged its meant to be compiled in its own weird sort of way. So basically whenever you make changes your re-compiling your front end html/logic/css.
Make sure your express app is serving up the Single Page Application which is Foundation Apps. Be sure to watch your web development console to see if your getting any strange Angular errors. If you are you can typically click on them and get help from the angular site.
Also the Foundation Apps gulp task is unique in it has its own little plugin to create the routing based off the templates. See the following link:
http://foundation.zurb.com/apps/docs/#!/angular
If your just getting into Front End Frameworks I would suggest going through a few basic Angular tutorials before tackling a angular app such as Foundation Apps.
Once familiar with Angular look at exactly what the Gulp build is doing (gulpfile.js). It takes care of the following:
Copies static resources
Its running SASS and compiling styling
Copies Foundation for Apps Javascript
Copies the templates and builds the routes (the route building is a little hidden
Once you understand what the Gulpfile.js is doing you should start to piece together how the front end is built.
I reworked it using Grunt, but ended up switching back to gulp because of their template job (ngHtml2js)
Don't giveup, be persistent and it will slowly make sense!
I'm working on the same task you mentioned up there, an existing MEAN application, that I developed with ejs front end template, and a front-end that I developed with the foundation-apps tools, the front-end has everything I need for my MEAN back-end, now for merging all of this together into a single node app.
UI is developed independently using foundation for app build tools such as gulp, considering my UI is developed with all the zurb foundation html parts are included to represent all the required functions served by my MEAN app. So after the build with foundation-apps the resulting build folder contains basic assets without any SASS or the need for foundation-apps to be in the package.json dependencies, since the foundation.js file is in the assets folder for the front-end, and sass is already built into app.css
I dont see how it's possible to have two single page web apps running on the same node server, in case I try separating the two different app configurations, angular dependency injection, routes, index files separated etc..
The challenge is wrapping up a single page web app with all dependencies, while maintaining how the foundation UI manages it's routing, as it is quite different from how express manages routing, it happens using different libraries.

Resources