npm i -g create-jqwidgets-angular-app create-jqwidgets-angular-app my-app cd my-app npm start
Then open http://localhost:4200/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.
npm install -g create-jqwidgets-angular-app
Make sure you have the latest version of Node on your machine.
It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies.
my-app ├── e2e ├── node_modules ├── src ├── .angular-cli.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── README.md ├── tsconfig.json ├── tslint.json
Subfolders are not shown in order to keep it short.
Once the installation is done, you must navigate to the folder created:
Now the project is ready and you can run some commands like:
Builds the app in development mode and starts a web server.
Open http://localhost:4200 to view it in the browser.
The page will reload if you make edits.
npm run build
Builds the app in production mode and stores it in the dist/ directory.
This project will show you the Angular jQWidgets Grid. But of course you will want to use some other widgets too.
For that you need to add their files first. This is done in the tsconfig.json file.
Open the tsconfig.json and add this at the bottom:
"include": [ "src/**/*" ], "files": [ "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid.ts" ]
In the files section, we have the jqxGrid Typescript file included. This is for the current example. We should add the Typescript files for each widget we are using.
If you are getting started with jQWidgets and Angular, using create-jqwidgets-angular-app is the easiest way to do that.
Just install, run and you will see an Angular jQWidgets Grid on your page.
Then you can customize the project as much as you want, making something great.