This project was generated with Angular CLI version 6.2.1.
Before installation check @syncfusion:registry=http://nexus.syncfusion.com/repository/ej2-production/
is available in npmrc file. Then use the below command to install all dependent packages.
npm install
Use npm run build
command to compile the source files. It calls the following tasks synchronously,
- SEO changes
- Styles ship
- Site-map generate.
- Copy source
- Build production
- Move
It will set meta data and description for the h1 tag to show our components first in search engine. Use the below command to run it individual.
gulp SEO-changes
It copies css files for themes from node_modules. Use the below command to run it individual.
gulp styles-shipping
The below command combines sample of all components and store it in sitemap-demos.xml file to index our components, samples, documents in search engine.
gulp sitemap-generate
It select all the files in src/app/
and check the indexof value of the files is /common
. If the condition satisfies it copy the files to src/source
. Use the below command to run this task.
gulp copy-source
Use the below command to flag for a production build.
npm run build:prod
It copy files from OpennewSamples folder to output folder and replace (/assets)
to (./assets
if the ./output/main-es5.js
is exist. To run this task use the below command.
gulp move
It runs unit tests in a project. Use the below command to run this task,
ng test
It runs linting tools on Angular app code. Use the below command to run lint task,
ng lint
To run your sample browser you can use any of the following command. This will help at development time. If any changes detect means it will automatically compile and browser will reloaded.
npm run start
Access URLs:
Local URL is works only in your machine.
http://localhost:4200
External URL is works in all locally connected LAN. (You can use to see sample browser in mobile).
http://your-ip-address:4200
Note: Here, The mentioned IP is your local machine IP Address.
Create your new folder in 'src' location and name the folder as control name for example “listview” it is control name.
Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space.
Add your sample router module named controlName.module.ts
Note: Export sample routed array of links. This has used to sample list.
Add your sample router module to sb router module
- Import your controlName.moduler.ts in sb.router.ts
- Add imported module to app routes
import { ListViewModule } from '../listview/listview.module';
const appRoutes: any = [
{ path: 'listview', loadChildren: ListViewModule },
{ path: '', redirectTo: 'listview/default', pathMatch: 'full' , hideOnDevice:true},
];
Note: set hideOnDevice as true if you want to hide a sample in devices.
Add your dependency in “package.json” file inside the dependencies.
Note: Here, '*' Specifies that install the latest published package form the online. '*' is recommended for Syncfusion packages.
"dependencies": {
"@syncfusion/ej2-angular-base": "*",
"@syncfusion/ej2-angular-list": "*",
},
Add your dependency in “system.config.js” file inside the packages.
packages: {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'@syncfusion/ej2-lists': { main: '/src/list-view/index.js', defaultExtension: 'js' },
'@syncfusion/ej2-data': { main: '/index.js', defaultExtension: 'js' },
'@syncfusion/ej2-base': { main: '/index.js', defaultExtension: 'js' },
'@syncfusion/ej2-angular-base': { main: '//index.js', defaultExtension: 'js' },
'@syncfusion/ej2-angular-list': { main: 'src/list-view/index.js', defaultExtension: 'js' }
},
Add your dependency in “config.json” file inside the styleDependency array.
{
"styleDependency":["ej2-angular-lists"]
}
Add sample description within the div tag with id as description.
<div class="control-section">
<div id='description'>
//sample description.
</div>
</div>
Add your samples in “samplelist.ts” located in “/src/common” folder
- Import your Sample Module routed array for json
- Add your samples in Sample List as Like below
import { listAppRoutes } from '../listview/listview.module';
export let samplesList: any = [
{
"name": "ListView", "category": "List", "path": "listview", "samples": listAppRoutes,
}
];
No, In your sample level html files, you don't read css files.
For example: Refer Here.
ngc -p ./Samples/tsconfig.json
: Can't bind to 'dataSource' since it isn't a known property of 'ejs-dropdownlist'.
- If 'ejs-dropdownlist' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
- If 'ejs-dropdownlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div style="max-width: 200px"
If you have used some control in your samples, you have to map component module in your control module.
For Example: If You use ejs-dropdownlist
control in your sample, you need to import that control module in your sample level modulefile