KendoUI Angular2 Can I install all the components? - kendo-ui-angular2

I hope. Kendo Grid, Combobox, treeview ... Kendo all package !
KendoUI Angular2 Can I install all the components?
npm install --save #progress/kendo-angular-buttons #progress/kendo-angular-l10n #angular/animations #progress/kendo-angular-grid #progress/kendo-angular-dropdowns #progress/kendo-angular-inputs #progress/kendo-angular-dateinputs #progress/kendo-data-query #progress/kendo-angular-intl #progress/kendo-drawing #progress/kendo-angular-excel-export
I do not want this method.
For example, "npm install --save #progress/kendo-ui-angular-allpackage"
Is there any way to do this?

As per the documentation you have to install kendo plugin using these dependencies
npm install --save #progress/kendo-angular-buttons #progress/kendo-angular-l10n #angular/animations
Reference from here
http://www.telerik.com/kendo-angular-ui/getting-started/
There is no dependency under the package name of
npm install --save #progress/kendo-ui-angular-allpackage
According to me Kendo use the pattern of angular like angular did seprate the code in different folders so
when need we need to install using particular package like #angular/router etc.

Related

How to use 2 different versions of the same node dependency in package.json?

I am working on a react js application where I am using Material-UI v5.0.0 for my UI components.
This new version replaces the package names from #material-ui/* prefix with #mui/*:
#material-ui/system -> #mui/system
#material-ui/styles -> #mui/styles
#material-ui/lab -> #mui/lab
In my project I am also using another dependency for displaying a calendar on 1 page which has a peer dependency of Material-UI v4.12.3 which imports material libraries like #material-ui/system.
How should I manage my dependencies in package.json so that I can use Material-UI v5.0.0 for majority of my UI/UX and still be able to use the dependency just for a specific UI screen.
Should I npm install both material UI v5.0.0 and v4.12.3 or is there a better way of doing this ?
With npm or yarn you may install specific packages under aliased names enabling you to use the same package under two different versions to do so you may
npm install <alias>#npm:<pkg_name><#version> # for npm
yarn add <alias>#npm:<pkg_name><#version> # for yarn
Example:
Installing Material-UI
npm install v5n#npm:#mui/material#5.0.0
npm install v4n#npm:#mui/material#4.12.3
Then you may require them as
import Button from 'v5/Button';

Cannot Import Material UI In React

I have installed #material-ui/icons using npm but anytime i run an import for
PS: I have Installed #material-ui/icons
import AccountCircleIcon from '#material-ui/icons/AccountCircle';
I get the following error
Failed to compile.
./node_modules/#material-ui/icons/utils/createSvgIcon.js
Module not found: Can't resolve '#material-ui/core/SvgIcon' in '/home/freduah/react-amazon-clone/node_modules/#material-ui/icons/utils'
Do you have Material Icons?
// with npm
npm install #material-ui/icons
// with yarn
yarn add #material-ui/icons
Check following page.
https://material-ui.com/components/icons/
As far I know you should have installed Material-UI itself. Because icons using SvgIcon components from the core package.
https://material-ui.com/components/material-icons/:
converted to SvgIcon components.
How to install the core package:
https://material-ui.com/getting-started/installation/
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core`

How to customize bootstrap 4 in reactjs app with reactstrap dependency?

I start developing a React app with reactstrap. I followed the Get Started running the following commands :
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
npm install bootstrap --save
npm install --save reactstrap#next react react-dom
Then I can see "bootstrap": "^4.0.0" in package.json's dependencies and bootstrap/ in my project node_modules folder. Well.
Now I would like to change, for instance, the boostrap primary color. Let's start easy :). I have read Bootstrap 4 Theming but I don't find any custom.scss in my project.
What is the proper way to add and edit bootstrap theme when using reactstrap ? Plus, how do I keep my changes across bootstrap updates since /node_modules is in .gitignore ?
PS: I am new to web / react development so my apologies if I ask/say anything stupid or obvious.
Thanks
Instructions here: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet
Install Sass: npm install node-sass --save
Install reactstrap. First bootstrap: npm install bootstrap --save. Then reactstrap: npm install --save reactstrap react react-dom
create your custom bootstrap theme file src/styles/custom-btsp.scss and edit as wanted (see theming v4).
add import './styles/css/custom.scss'; in src/index.js
Done!
Here is an exemple of my custom-btsp.scss file:
$theme-colors: (
"primary": #ffb800
);
$btn-border-radius: 3000px;
#import "~bootstrap/scss/bootstrap";
You should create SCSS file in your project structure. Include defal=ult bootstrap styles using scss import
#import "node_modules/bootstrap/scss/bootstrap";
and after that reassign styles.
But first thing you should to do is adjust your webpack to understand .scss file extensions

Can not find module '#angular/core' error

I am working on a basic Angular2 sample using NodeJS , and the editor
i am using is atom.
I have npm installed angular2(2.0.0-beta.17) and typescript
npm install angular2
npm install -g typescript
In my main.ts am importing
import { Component } from '#angular/core';
For the above line editor is displaying "Can not find module '#angular/core".
What is that I am missing.
Angular2 no longer uses the package angular2, but rather a list of different packages under the tag #angular. This list includes, but is not limited to:
#angular/common
#angular/core
#angular/compiler
#angular/forms
#angular/platform-browser
#angular/platform-browser-dynamic
Please refer to the 5 Min Quickstart Guide for further details.
Angular2 used the angular2 package up until the release candidate, when it introduced a breaking change by moving the different modules to their own packages, and all of these under the new #angular tag.
Package name for angular core is #angular/core.
Read quick start guide regarding all the packages needed for angular 2.
Hope this helps!!

Should dependencies be installed with bower or broccoli in ember app?

I'm new to js package managers and build tools so this seems a bit confusing to me.
I've set up a new ember app and I want to add the dependencies (foundation) in the recommended/conventional way. There seem to be two ways of adding this to your project, using bower or broccoli.
This page recommends using broccoli:
If you want to use the .scss version of Foundation, you should first configure your project to use broccoli-sass with:
npm install --save-dev broccoli-sass
and then rename your app/styles/app.css to app/styles/app.scss.
Then you can install Foundation using Bower with:
bower install --save-dev foundation
Now, inside your app/styles/app.scss, you can import the Foundation styles with:
#import 'bower_components/foundation/scss/normalize';
#import 'bower_components/foundation/scss/foundation';
whereas this recommends using bower.
$> bower install --save bootstrap
Afterwards add following two lines to your ember-cli-builds.js (or Brocfile.js if you are using an older version of Ember.js):
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
Could someone shed some light on what the difference between these is and which one is the better/recommended way?
Official ember-cli documentation recommends to use bower: "Ember CLI uses Bower for dependency management"

Resources