Kendo-ui-angular controls in .NET 4.5 application - kendo-ui-angular2

I have setup my angular2 application on .NET 4.5 and included all the libraries that are required for angular2 in my application. The initial app component is running fine. Now I have included all the required #progress/kendo-angular -* libs in my package.json and restored the packages. I just added one pie chart in my app module. when I run this application I am getting the errors in console stating unable to get the kendo libraries. Like
GET failed for http://localhost:59086/#progress/kendo-angular-buttons
My package.json
"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/platform-browser": "~2.4.0",
"#angular/platform-browser-dynamic": "~2.4.0",
"#angular/router": "~3.4.0",
"#progress/kendo-angular-buttons": "^0.20.1",
"angular-in-memory-web-api": "~0.2.1",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.7.4"
},
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonsModule } from '#progress/kendo-angular-buttons';
#NgModule({
imports: [BrowserModule, ButtonsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Did you check to be sure you can get the private NPM Packages?
npm view #progress/kendo-angular-grid versions
From http://www.telerik.com/kendo-angular-ui/getting-started/
Also, did you npm install all the packages? e.g. npm install --save #progress/kendo-angular-buttons #progress/kendo-angular-l10n #angular/animations? When you do this, you may also see dependencies in the console. The above statement from the above link wasn't adequate, from what I recall. I ended up having to install most of the Kendo packages, including internationalization.
Note above this is install #angular/animations.

Related

Cannot find module 'ngx-bootstrap'

I'm having an issue in my application with ngx-bootstrap whereby it now can't detect the module unless you specify the path
For example:
import { BsModalService, BsModalRef } from 'ngx-bootstrap';
produces "Cannot find module 'ngx-bootstrap'".
Removing the reference and checking quickfixes just replaces the reference with:
import { BsModalService, BsModalRef} from 'ngx-bootstrap/modal/public_api';
Obviously this isn't ideal as they should be available through ngx-bootstrap without specifying the folder, and i would have to go through dozens of components and change these references which shouldn't be necessary. Has anyone had this problem before?
I've already tried:
npm install
npm update in case there were updates in recent commits
Deleting node_modules folder and doing npm install again
Re-installing ngx-bootstrap on its own - npm install ngx-bootstrap --save
npm cache clean
I've even started afresh and cloned my app into another location, run npm install, and the same thing happens
This was working fine yesterday. I'm not sure what I'm missing.
More info:
Angular CLI: 9.0.2
Node: 12.16.1
OS: win32 x64
Angular: 9.0.1
package.json:
"private": true,
"dependencies": {
"#agm/core": "^1.1.0",
"#angular-devkit/build-angular": "^0.900.7",
"#angular/animations": "9.0.1",
"#angular/cdk": "^9.2.0",
"#angular/common": "9.0.1",
"#angular/compiler": "9.0.1",
"#angular/core": "9.0.1",
"#angular/forms": "9.0.1",
"#angular/platform-browser": "9.0.1",
"#angular/platform-browser-dynamic": "9.0.1",
"#angular/router": "9.0.1",
"#auth0/angular-jwt": "^4.0.0",
"#microsoft/signalr": "^3.1.3",
"#ng-select/ng-select": "^3.7.3",
"#ngx-progressbar/core": "^5.3.2",
"#ngx-pwa/local-storage": "^9.0.3",
"#types/date-fns": "^2.6.0",
"angular-9-datatable": "^0.1.1",
"angular-calendar": "^0.28.2",
"angular-gauge": "^3.1.2",
"angular-gridster2": "^9.0.1",
"angular-resize-event": "^1.2.1",
"bootstrap": "^4.4.1",
"chartjs-plugin-annotation": "^0.5.7",
"ckeditor4-angular": "^1.1.0",
"core-js": "^3.6.4",
"crypto-js": "^4.0.0",
"echarts": "^4.7.0",
"file-saver": "^2.0.2",
"html2canvas": "^1.0.0-rc.5",
"jspdf": "^1.5.3",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"ng-dynamic-component": "^6.1.0",
"ng2-dragula": "^2.1.1",
"ng4-charts": "^1.0.2",
"ngx-bootstrap": "^5.3.2",
"ngx-color": "^4.1.1",
"ngx-echarts": "^4.2.2",
"ngx-image-compress": "^8.0.4",
"ngx-image-cropper": "^3.1.5",
"ngx-infinite-scroll": "^8.0.1",
"ngx-material-timepicker": "^5.5.1",
"ngx-pagination": "^5.0.0",
"ngx-swiper-wrapper": "^9.0.1",
"ngx-toastr": "^12.0.1",
"pluralize": "^8.0.0",
"rxjs": "6.5.4",
"rxjs-compat": "6.5.4",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.10.0",
"valid-url": "^1.0.9",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular/cli": "9.0.2",
"#angular/compiler-cli": "9.0.1",
"#angular/language-service": "9.0.1",
"#types/echarts": "^4.4.4",
"#types/file-saver": "^2.0.1",
"#types/googlemaps": "^3.39.2",
"#types/jasmine": "3.5.3",
"#types/jasminewd2": "2.0.8",
"#types/jspdf": "^1.3.3",
"#types/node": "^13.9.8",
"#types/pluralize": "0.0.29",
"#types/valid-url": "^1.0.3",
"codelyzer": "^5.2.2",
"ie-shim": "^0.1.0",
"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.1",
"karma-jasmine": "~3.1.1",
"karma-jasmine-html-reporter": "^1.5.3",
"node-sass": "^4.13.1",
"protractor": "~5.4.3",
"ts-node": "~8.6.2",
"tslint": "~6.0.0",
"typescript": "3.7.5",
"webpack-bundle-analyzer": "^3.6.1"
},
If anyone has any ideas let me know
Thanks!
Based on ngx-bootstrap documentation, angular 9 doesn't support this kind of import . If you want to use BsModalService , ButtonsModule and so on you have to import them as below :
// RECOMMENDED
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
instead of :
// NOT RECOMMENDED
import { BsModalService, BsModalRef , ButtonsModule } from 'ngx-bootstrap';
As per https://github.com/valor-software/ngx-bootstrap/issues/5753
Updated documentation: https://valor-software.com/ngx-bootstrap/#/modals
// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { ModalModule } from 'ngx-bootstrap';
#NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}
This is the ideal solution as it is the one that is documented by the maintainer of the repo.
I had the same problem today, trying to update from Angular 9.0.2 to Angular 9.1.0.
I guess it's because you have in your package.json: "ngx-bootstrap": "^5.3.2", so npm is taking the latest version available on ngx-bootrap tag: 5.6.0. (At least that's the version I have today)
I've solved just replacing the imports on my code, from 'ngx-bootstrap' to 'ngx-bootstrap/someBootstrapComponent'.
For example, my previous import was:
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
And my new import looks like:
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
I know this is not an ideal solution, but meanwhile at least you can have your app compiling properly.
I hope it helps.
Best regards,
Jesús.
So it seems like it might be a problem with later versions of ngx-bootstrap. In my package.json, I replaced "ngx-bootstrap": "^5.3.2" with "ngx-bootstrap": "5.3.2", ran npm install and it built without any problems.
import { ModalModule } from 'ngx-bootstrap/modal';
This must be working .. simple solution
For some reason, the same package.json that's ran before, now doesn't works. The advice above work like a charm.
Solution: remove the ^.
"ngx-bootstrap": "^5.3.2" to "ngx-bootstrap": "5.3.2"
I am currently using Angular 9 with the latest version of ngx-bootstrap.
I believe the latest implementation is to import the BsDatepickerModule in the app.module.ts file like this
Import statement in app.module.ts code:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
in app.module.ts imports:
imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot()
]
Component Code:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
#Component({ selector: 'app-', templateUrl: './register.component.html', styleUrls: ['./register.component.css'],
})
export class RegisterComponent implements OnInit {
bsConfig: Partial<BsDatepickerConfig>;
constructor() {}
ngOnInit() {
this.bsConfig = Object.assign({}, { containerClass: 'theme-blue' });
}
}
package.json
"#angular/core": "~9.1.7",
"bootstrap": "^4.5.0",
"ngx-bootstrap": "^5.6.1",
"#angular/cli": "~9.1.6"
From the official site:
Usage
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
// RECOMMENDED
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { BsDatepickerModule } from 'ngx-bootstrap';
#NgModule({
imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot(),
...
]
})
export class AppModule(){}
https://valor-software.com/ngx-bootstrap/#/datepicker
techjunkieblog.com

Angular 9 project fails

Angular 9 project fails
Trying to compile code that works in Angular 8.
ERROR in node_modules/#angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
../../../node_modules/#angular/core/src/application_ref.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/core/src/event_emitter.d.ts(8,39): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/core/src/linker/query_list.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
../../../node_modules/#angular/core/src/util/lang.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/http/src/backends/jsonp_backend.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/http/src/backends/xhr_backend.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
../../../node_modules/#angular/http/src/http.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
I isolate the problem to a service that I am loading.
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable, throwError } from 'rxjs';
import { map, takeUntil, tap, catchError } from 'rxjs/operators';
import * as Global from './global';
import { HttpClient } from '#angular/common/http';
import { HttpHeaders } from '#angular/common/http';
import { HttpErrorResponse } from '#angular/common/http';
my package.json
{
"name": "f202",
"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.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"rxjs": "^6.5.4",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.9",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/node": "~8.9.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"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.2.2"
}
}
Also tried the usual mixture of upgrading typescript, rxjs and angular components.
Any help would be appreciated!
------------------UPDATE-------------
Yes #phix was entirely correct with this second comment, It was still version 7.
I assumed going a global update (npm install #angular/cli#9.0.0 -g ) to 9 and then creating a project will automatically create a version 9 project - wrong assumption.
I used the info to properly upgrade my project
https://levelup.gitconnected.com/upgrade-to-angular-9-within-10-minutes-671c6fd6174b

Cannot find name 'process' angular 5

After seeing all the answers, nothing helped me...
baseUrl.interceptor.ts
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let baseurl = process.env.baseurl || 'http://test.com/users';
console.log(baseurl);
return next.handle(req);
}
tsconfig.json
"typeRoots": [
"node_modules/#types"
]
package.json
"dependencies": {
"#angular/animations": "^5.1.0",
"#angular/common": "^5.1.0",
"#angular/compiler": "^5.1.0",
"#angular/core": "^5.1.0",
"#angular/forms": "^5.1.0",
"#angular/http": "^5.1.0",
"#angular/platform-browser": "^5.1.0",
"#angular/platform-browser-dynamic": "^5.1.0",
"#angular/router": "^5.1.0",
},
"devDependencies": {
"#angular/cli": "1.6.4",
"#angular/compiler-cli": "^5.1.0",
"#angular/language-service": "^5.1.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
...
"ts-node": "~3.2.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
And an error below:
Please, help me somebody...
process is a variable that gives you access to your server.
In no case you are supposed to use it in your Angular application : it's made to be used on your Node server.
If you do that, this means that anyone who is running your application can see your environment variables. That includes, for instance, your API keys.
I'm setting up my environment within Angular with a dotenv file, I don't know if this is the same situation you have. That's where I'm requesting my env vars.
I set up the environment files dinamically with a node script before compilation time with fs.writeFile. There I can get the process.env and thanks to the 'dotenv' npm package also.

In Angular2, Angular/Material getting error MdCoreModule not exported

I recently inherited a Node.js with Angular 2 project and am trying to get up to speed. There are, obviously, numerous issues I am confronting so I am not sure if there is a direct version problem here, or if I set up something wrong.
I have the following import in a module from an example found here: http://candordeveloper.com/2017/04/25/how-to-create-dynamic-menu-and-page-title-with-angular-material-and-cli/
import { //only import the portions you will use to optimize build (MaterialModule to include all is deprecated)
MdCoreModule,
MdButtonModule,
MdCardModule,
MdIconModule,
MdMenuModule,
MdRippleModule,
MdSidenavModule,
MdToolbarModule,
//... add others you need
} from '#angular/material';
I used
npm install --save #angular/material #angular/cdk
to install the required packages, but am getting "'MdCoreModule' not exported error.
In package.json I have:
{
"name": "Test_Project",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.2.4",
"#angular/cdk": "^2.0.0-beta.11",
"#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/material": "^2.0.0-beta.11",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.4.3",
"#angular/compiler-cli": "^4.2.4",
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.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",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
I figure it might be a version issue, but I cannot find any related issues anywhere.
This is a copy of the (now deprecated) Material Module that Angular deleted from the official project. See Here.
import { NgModule } from '#angular/core';
import { OverlayModule } from '#angular/cdk/overlay';
import { A11yModule } from '#angular/cdk/a11y';
import { BidiModule } from '#angular/cdk/bidi';
import { ObserversModule } from '#angular/cdk/observers';
import { PortalModule } from '#angular/cdk/portal';
import { PlatformModule } from '#angular/cdk/platform';
import {
MdAutocompleteModule,
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
MdChipsModule,
MdCheckboxModule,
MdDatepickerModule,
MdTableModule,
MdDialogModule,
MdExpansionModule,
MdFormFieldModule,
MdGridListModule,
MdIconModule,
MdInputModule,
MdListModule,
MdMenuModule,
MdPaginatorModule,
MdProgressBarModule,
MdProgressSpinnerModule,
MdRadioModule,
MdRippleModule,
MdSelectModule,
MdSidenavModule,
MdSliderModule,
MdSlideToggleModule,
MdSnackBarModule,
MdSortModule,
MdStepperModule,
MdTabsModule,
MdToolbarModule,
MdTooltipModule,
StyleModule,
MdCommonModule
} from '#angular/material';
const MATERIAL_MODULES = [
MdAutocompleteModule,
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
MdChipsModule,
MdCheckboxModule,
MdDatepickerModule,
MdTableModule,
MdDialogModule,
MdExpansionModule,
MdFormFieldModule,
MdGridListModule,
MdIconModule,
MdInputModule,
MdListModule,
MdMenuModule,
MdPaginatorModule,
MdProgressBarModule,
MdProgressSpinnerModule,
MdRadioModule,
MdRippleModule,
MdSelectModule,
MdSidenavModule,
MdSliderModule,
MdSlideToggleModule,
MdSnackBarModule,
MdSortModule,
MdStepperModule,
MdTabsModule,
MdToolbarModule,
MdTooltipModule,
OverlayModule,
PortalModule,
BidiModule,
StyleModule,
A11yModule,
PlatformModule,
MdCommonModule,
ObserversModule,
];
#NgModule({
imports: MATERIAL_MODULES,
exports: MATERIAL_MODULES,
})
export class MaterialModule {}
MdCoreModule, while I'm not sure if it used to be there, isn't there for their recent versions, definitely so for you since your package.json says you're using beta.11, which is the most current version at this time. I assume yours would work if you simply got rid of MdCoreModule.
I can't tell from your code whether you've done this or not, but I would also suggest breaking out your imports for the Material Modules into its own file, like above, and import/export the separate module in your app.module.ts. For the sake of "only import the portions you will use to optimize build", you can delete whichever modules you do not use in your app from the imports and const exports.

cloud-angular has no exported member provideCloud

THE SITUATION
I have setup a blank app. Installed #ionic/cloud-angular and imported provideCloud.
But I am getting the following error:
cloud-angular has no exported member 'provideCloud'
(I have a similar error for ionicBootstrap)
THE STEPS:
ionic start whateva blank --v2
npm install #ionic/cloud-angular --save
ionic io init
Import provideCloud
THE CODE:
import { provideCloud, CloudSettings } from '#ionic/cloud-angular';
import { ionicBootstrap, Platform } from 'ionic-angular';
Ionic info:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.44
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: OS X El Capitan
Node Version: v4.6.0
Xcode version: Xcode 7.3.1 Build version 7D1014
Package.json dependencies:
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/compiler-cli": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/platform-server": "2.1.1",
"#ionic/cloud-angular": "^0.7.0",
"#ionic/storage": "1.1.6",
"ionic-angular": "2.0.0-rc.2",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.21"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.44",
"typescript": "2.0.6"
},
THE QUESTION:
Why I am getting the error?
I have just setup a new blank app.. There is something wrong in the setup?
Thanks!
When version 0.7.0 was released, provideCloud was replaced with CloudModule as you can see in their code.
The new way to set up your cloud setting is as follows
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'APP_ID'
}
};
#NgModule({
declarations: [ ... ],
imports: [
IonicModule.forRoot(MyApp),
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [ ... ],
providers: [ ... ]
})
export class AppModule {}

Resources