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?
Related
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.
Server rendered pages contain non-minified css and served without gzipping. Can anyone suggest a solution to cater this as when I include material 5.0.0-rc0 and some of my css in the application then the static server rendered page size reaches to at least a 300kb.
package.json:
"#angular/animations": "^5.0.0",
"#angular/cdk": "^5.0.0-rc0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/material": "^5.0.0-rc0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/platform-server": "^5.0.0",
"#angular/router": "^5.0.0",
"babel-runtime": "^6.20.0",
"meteor-node-stubs": "~0.3.0",
"meteor-rxjs": "^0.4.8",
"rxjs": "^5.5.0",
"zone.js": "^0.8.16"
Compiler Versions:
angular-compilers#0.2.8_1
angular-html-compiler#0.2.8
angular-scss-compiler#0.2.8
angular-typescript-compiler#0.2.8_1
babel-compiler#6.24.7
babel-runtime#1.1.1
Try adding material theme files to global stylesheet main.scss in client folder in your application source files.
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
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
I have an Angular2 app which worked perfectly fine until two days ago. When I tried to build the solution in Visual Studio 2015, I got 10 errors:
Build: Cannot find type definition file for 'hammerjs'.
Build: Cannot find type definition file for 'jasmine'.
Build: File (...)/wwwroot/lib/ng2-translate/index.ts' not found.
And 6 more about various files in ng2-translate not found.
Surprisingly, when I build my app by dotnet run command, it works well.
I updated everything by npm-check-updates -u, but it didn't change anything.
My package.json:
{
"version": "1.0.0",
"name": "CarMarket",
"private": true,
"dependencies": {
"#angular/common": "~4.0.3",
"#angular/compiler": "~4.0.3",
"#angular/core": "~4.0.3",
"#angular/forms": "~4.0.3",
"#angular/http": "~4.0.3",
"#angular/platform-browser": "~4.0.3",
"#angular/platform-browser-dynamic": "~4.0.3",
"#angular/router": "~4.0.3",
"#angular/upgrade": "~4.0.3",
"angular-in-memory-web-api": "~0.3.1",
"body-parser": "1.17.1",
"bootstrap": "3.3.7",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"es6-shim": "^0.35.0",
"fancybox": "3.0.0",
"jquery": "3.2.1",
"ng2-charts": "^1.5.0",
"ng2-translate": "^5.0.0",
"reflect-metadata": "^0.1.8",
"rxjs": "5.3.0",
"systemjs": "0.20.12",
"zone.js": "^0.8.9"
},
"devDependencies": {
"#types/node": "^7.0.13",
"del": "2.2.2",
"gulp": "3.9.1",
"gulp-typescript": "3.1.6",
"gulp-watch": "4.3.11",
"merge": "1.2.0",
"typescript": "^2.0.10",
"typings": "^2.1.1"
},
"scripts": {
"postinstall": "typings install"
}
}
What might be the reason of those errors? H
As the error clearly states, you are missing type definitions for hammerjs and jasmine. You can either add them to your typings definition file, or you can install the types packages directly:
npm install --save #types/hammerjs
npm install --save #types/jasmine