webpack failed to compile. Kendo Angular ui - kendo-ui

I just enhanced my app with kendo's DialogModule, and now webpacks fails to compie, due to this error:
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/intl.service.d.ts (1,117): Cannot find module '#telerik/kendo-intl'.
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/cldr-intl.service.d.ts (1,117): Cannot find module '#telerik/kendo-intl'.
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/date.pipe.d.ts (3,35): Cannot find module '#telerik/kendo-intl'.
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/number.pipe.d.ts (3,37): Cannot find module '#telerik/kendo-intl'.
ERROR in /Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es/intl-members.d.ts (1,117): Cannot find module '#telerik/kendo-intl'.
ERROR in ./~/#progress/kendo-angular-intl/dist/es/intl-members.js
Module not found: Error: Can't resolve '#telerik/kendo-intl' in '/Users/marco/ants-web-v2/node_modules/#progress/kendo-angular-intl/dist/es'
# ./~/#progress/kendo-angular-intl/dist/es/intl-members.js 1:0-44
# ./~/#progress/kendo-angular-intl/dist/es/main.js
# ./~/#progress/kendo-angular-grid/dist/es/grid.module.js
# ./~/#progress/kendo-angular-grid/dist/es/main.js
# ./src/app/app.module.ts
# ./src/main.ts
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
this is my package.json content:
"dependencies": {
"#angular/animations": "^4.2.4",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"#progress/kendo-angular-buttons": "^1.0.4",
"#progress/kendo-angular-dateinputs": "^1.0.4",
"#progress/kendo-angular-dialog": "^1.0.3",
"#progress/kendo-angular-dropdowns": "^0.1.0",
"#progress/kendo-angular-excel-export": "^1.0.2",
"#progress/kendo-angular-grid": "^1.2.0",
"#progress/kendo-angular-inputs": "^1.0.5",
"#progress/kendo-angular-intl": "^1.2.0",
"#progress/kendo-angular-l10n": "^1.0.1",
"#progress/kendo-angular-layout": "^1.0.4",
"#progress/kendo-data-query": "^1.0.4",
"#progress/kendo-drawing": "^1.1.0",
"#progress/kendo-theme-default": "^2.37.5",
"angular2-google-maps": "^0.17.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ngx-bootstrap": "^1.7.1",
"rxjs": "^5.4.1",
"zone.js": "^0.8.12"
}
I'm aware i'm using angular4, so far it never caused any problem

I am using a setup of Angular 4.2.6 and Kendo UI. Try the following dependencies in your package.json. It works for me.
"dependencies": {
"#angular/animations": "4.2.6",
"#angular/common": "4.2.6",
"#angular/compiler": "4.2.6",
"#angular/core": "4.2.6",
"#angular/forms": "4.2.6",
"#angular/http": "4.2.6",
"#angular/material": "2.0.0-beta.7",
"#angular/platform-browser": "4.2.6",
"#angular/platform-browser-dynamic": "4.2.6",
"#angular/router": "4.2.6",
"#progress/kendo-angular-buttons": "1.0.5",
"#progress/kendo-angular-dialog": "1.0.4",
"#progress/kendo-angular-dropdowns": "1.1.2",
"#progress/kendo-angular-grid": "1.2.3",
"#progress/kendo-angular-inputs": "1.0.7",
"#progress/kendo-angular-intl": "1.2.1",
"#progress/kendo-angular-l10n": "1.0.2",
"#progress/kendo-angular-label": "1.0.2",
"#progress/kendo-angular-layout": "1.0.5",
"#progress/kendo-data-query": "1.0.5",
"#progress/kendo-theme-default": "2.38.1",
"core-js": "2.4.1",
"rxjs": "5.4.2",
"zone.js": "0.8.13"
}
I hope the current versions of the Kendo UI dialog and intl package fix your issue.
"#progress/kendo-angular-intl": "1.2.1"
"#progress/kendo-angular-dialog": "1.0.4"
Update: Angular 4.3.0 is out - you may try this version instead of 4.2.6

Related

Stuck on build error on migration of basic Tabs from {N} 6 to 8

We have an app written in NativeScript Angular and based on BottomNavigation and TabView.
I've posted before about issues we have had building our app after migrating from NativeScript 6 to 8.
I can't share our code base so I have taken the legacy code in {N} 6 and stripped out all of our own components to leave just the bare bones.
There is a public repo here: https://github.com/syborp/testapp
It builds and runs fine in {N} 6 and there is a screenshot on the GitHub README.
When we migrate to {N} 8 we keep ending up at this error.
Searching for devices...
Preparing project...
webpack is watching the files...
C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40
throw new Error("The target entry-point \"" + invalidTarget.entryPoint.name + "\" has missing dependencies:\n" +
^
Error: The target entry-point "undefined" has missing dependencies:
- nativescript-angular/element-registry
at TargetedEntryPointFinder.findEntryPoints (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40:23)
at C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\execution\analyze_entry_points.js:29:41
at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\execution\single_process_executor.js:28:29)
at C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:59
at SyncLocker.lock (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\locking\sync_locker.js:34:24)
at SingleProcessExecutorSync.execute (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:27)
at Object.mainNgcc (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\src\main.js:74:25)
at Object.process (C:\Users\user\testapp\node_modules\#angular\compiler-cli\ngcc\index.js:29:23)
at NgccProcessor.processModule (C:\Users\user\testapp\node_modules\#ngtools\webpack\src\ngcc_processor.js:175:16)
at C:\Users\user\testapp\node_modules\#ngtools\webpack\src\ivy\host.js:146:18
at C:\Users\user\testapp\node_modules\#ngtools\webpack\src\ivy\host.js:76:24
at Array.map (<anonymous>)
at Object.host.resolveModuleNames (C:\Users\user\testapp\node_modules\#ngtools\webpack\src\ivy\host.js:74:32)
at actualResolveModuleNamesWorker (C:\Users\user\testapp\node_modules\typescript\lib\typescript.js:109497:133)
at resolveModuleNamesWorker (C:\Users\user\testapp\node_modules\typescript\lib\typescript.js:109760:26)
at resolveModuleNamesReusingOldState (C:\Users\user\testapp\node_modules\typescript\lib\typescript.js:109857:24)
Executing webpack failed with exit code 1.
It sounds like the entry point main.ts cannot be found but I think it looks ok in package.json.
"description": "Test App",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"scripts": {
"lint": "tslint \"app/**/*.ts\""
},
"dependencies": {
"#angular/animations": "^12.2.5",
"#angular/common": "^12.2.5",
"#angular/compiler": "^12.2.5",
"#angular/core": "^12.2.5",
"#angular/forms": "^12.2.5",
"#angular/http": "8.0.0-beta.10",
"#angular/platform-browser": "^12.2.5",
"#angular/platform-browser-dynamic": "^12.2.5",
"#angular/router": "^12.2.5",
"#master.technology/permissions": "^2.0.1",
"#nativescript/angular": "^12.2.0",
"#nativescript/core": "~8.1.1",
"#nativescript/fingerprint-auth": "^8.0.0",
"nativescript": "^6.5.0",
"nativescript-app-sync": "^2.0.0",
"nativescript-bottom-navigation": "^2.0.5",
"nativescript-camera": "^4.0.2",
"nativescript-drop-down": "^5.0.6",
"nativescript-fancyalert": "^3.0.9",
"nativescript-fingerprint-auth": "^7.0.2",
"nativescript-fontawesome": "^1.0.0",
"nativescript-gradient": "^2.0.1",
"nativescript-imagepicker": "^7.1.0",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-modal-datetimepicker": "^1.1.4",
"nativescript-pdf-view": "^2.1.0",
"nativescript-permissions": "^1.3.12",
"nativescript-theme-core": "~1.0.4",
"nativescript-toast": "^1.4.6",
"nativescript-ui-listview": "^10.0.2",
"reflect-metadata": "~0.1.10",
"ruby": "^0.6.1",
"rxjs": "~7.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.2.5",
"#angular/cli": "^12.2.5",
"#angular/compiler-cli": "^12.2.5",
"#nativescript/android": "~8.1.1",
"#nativescript/webpack": "~5.0.0",
"#ngtools/webpack": "^12.2.5",
"#types/node": "14.6.2",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"codelyzer": "~4.5.0",
"extract-text-webpack-plugin": "~3.0.2",
"lazy": "1.0.11",
"sass": "~1.39.0",
"tslint": "~5.12.1",
"typescript": "~4.3.5",
"uglifyjs-webpack-plugin": "^2.2.0"
},
"main": "./app/main.ts"
}
Or is it a webpack issue?
Any advice much appreciated.
TIA.

Jasmine unit tests run in Chrome but not in PhantomJs

I have a project that was created with the angular cli. I generate new components with the cli and even the most basic tests fail when using PhantomJS with the following stack.
× should create an instance
PhantomJS 2.1.1 (Windows 8 0.0.0)
Failed: undefined is not a constructor (evaluating 'attr.name.startsWith(_I18N_ATTR_PREFIX)')
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48660:70
filter#[native code]
_visitAttributesOf#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48660:24
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48603:32
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
I suspect that there is some incompatibility with my combination of npm packages. Here is my package.json
"dependencies": {
"#angular/animations": "^5.0.2",
"#angular/common": "^5.0.2",
"#angular/compiler": "^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/router": "^5.0.2",
"angularfire2": "^5.0.0-rc.4",
"core-js": "^2.4.1",
"crds-styles": "^1.3.1",
"firebase": "^4.6.2",
"intl": "^1.2.5",
"ng2-toastr": "^4.1.2",
"ngx-bootstrap": "1.9.3",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.4",
"#angular/compiler-cli": "^5.0.2",
"#angular/language-service": "^5.0.2",
"#types/jasmine": "2.5.38",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.89",
"codelyzer": "^4.0.1",
"firebase-tools": "^3.15.4",
"jasmine-core": "~2.6.0",
"jasmine-spec-reporter": "~4.2.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "2.2.4",
"karma-phantomjs-launcher": "^1.0.4",
"karma-teamcity-reporter": "^1.0.0",
"prettier": "^1.9.2",
"protractor": "~5.1.2",
"replace": "^0.3.0",
"ts-node": "~2.0.0",
"tslint": "~5.7.0",
"tslint-config-prettier": "^1.6.0",
"typescript": "2.5.3"
}
Any ideas?
You use the startsWith() method which was introduced in ECMAScript 6. Phantom JS currently does not support this JS version. You can see the current status here : https://github.com/ariya/phantomjs/issues/14506 . You could use ChromeHeadless instead or skip the files that contain ES6 code (but they won't be tested).

Should I use devDependencies or dependencies in the package.json in a ASP.NET MVC project?

I'm creating a ASP.NET Core 2.0 MVC application and integrating with Angular 4. I created a NPM package configuration file called package.json and saved in the root folder.
I don't want to use angular-cli, but use Gulp to compile and bundle the angular files.
I'm getting errors when the Visual Studio 2017 install the packages. Should I use devDependencies or dependencies in the package.json file.
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
"#angular/animations": "^4.2.4",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"core-js": "^2.4.1",
"gulp": "^3.9.1",
"gulp-babel": "7.0.0",
"gulp-concat": "2.6.1",
"gulp-sourcemaps": "2.6.1",
"gulp-typescript": "3.2.1",
"minimatch": "3.0.4",
"minimist": "1.2.0",
"rimraf": "2.6.1",
"require-dir": "0.3.2",
"rxjs": "^5.4.2",
"systemjs-builder": "0.16.9",
"zone.js": "^0.8.14",
"typescript": "2.4.2"
},
"devDependencies": {
"#angular/animations": "^4.2.4",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"core-js": "^2.4.1",
"gulp": "^3.9.1",
"gulp-babel": "7.0.0",
"gulp-concat": "2.6.1",
"gulp-sourcemaps": "2.6.1",
"gulp-typescript": "3.2.1",
"minimatch": "3.0.4",
"minimist": "1.2.0",
"rimraf": "2.6.1",
"require-dir": "0.3.2",
"rxjs": "^5.4.2",
"systemjs-builder": "0.16.9",
"zone.js": "^0.8.14",
"typescript": "2.4.2"
}
}
the short answer is you should use both, dependencies for UI libraries that you want to bundle, and devDependencies for those that allow you to develop the app.
there's an awesome explanation in this post: https://stackoverflow.com/a/22004559/1303897

Cannot find type definition file for 'rx/rx.all'

I have trying to get material2 select to work in my application but it appears I am missing something.
I keep getting the error
"Error TS2688 Build:Cannot find type definition file for 'rx/rx.all'"
Below is package.json
{
"version": "1.0.0",
"name": "reportbook",
"dependencies": {
"#angular/common": "~2.4.0",
"#angular/compiler": "~2.4.0",
"#angular/core": "~2.4.0",
"#angular/forms": "~2.4.0",
"#angular/http": "~2.4.0",
"#angular/material": "~2.0.0-beta.2",
"#angular/platform-browser": "~2.4.0",
"#angular/platform-browser-dynamic": "~2.4.0",
"#angular/router": "~3.4.0",
"#angular/upgrade": "~2.4.0",
"#types/core-js": "~0.9.34",
"#types/hammerjs": "~2.0.33",
"#types/jasmine": "~2.5.43",
"#types/lodash": "4.14.50",
"#types/rx": "4.1.1",
"angular-in-memory-web-api": "~0.2.4",
"bootstrap": "~3.3.7",
"core-js": "~2.4.1",
"hammerjs": "~2.0.8",
"lodash": "~4.16.6",
"moment": "~2.16.0",
"ng2-bootstrap": "~1.3.3",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.0.0-beta.12",
"systemjs": "~0.19.41",
"zone.js": "~0.7.7"
},
"devDependencies": {
"del": "~2.2.2",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-tsc": "^1.2.5",
"gulp-typescript": "^2.14.1",
"hammerjs": "^2.0.8",
"path": "^0.12.7",
"tslint": "^3.15.1",
"typescript": "~2.1.6",
"gulp-sass": "~2.3.2",
"rimraf": "~2.3.2"
}
}
I will appreciate it very much if anyone can point me in th right direction
I ran into this issue and downgraded #types/rx from 4.1.1 to 2.5.34 and that seemed to work.

MVC Core with Angular2: MSB6006 "tsc.exe" exited with code 1

After adding the following "Angular 2" dependencies to MVC wwwroot folder
(Copying from "node_modules" to "wwwroot/lib/ng2")
"#angular/common": "2.0.0-rc.5",
"#angular/compiler": "2.0.0-rc.5",
"#angular/compiler-cli": "0.5.0",
"#angular/core": "2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.5",
"#angular/platform-browser": "2.0.0-rc.5",
"#angular/platform-browser-dynamic": "2.0.0-rc.5",
"#angular/router": "3.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.5",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.17",
I got the following error when trying to rebuild the project
Error MSB6006 "tsc.exe" exited with code 1. Project.Name "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" 214
The project compiles successfully when I deleted the folder "wwwroot/lib/ng2/#angular/compiler-cli". but I don't know yet if this will affect angular2 development or not?

Resources