One alternative to get started on your Angular application is to use TeamMaestro's seed. Specially if you want to use a single repo for both Web and Mobile branches of your application. TeamMaestro includes support for Angular CLI, on the web side, and NativeScript on the mobile side. And that is a pretty simple seed with very little overhead.

So, go ahead and clone that repository, or get a zip copy. Then follow that repository's instructions to get it up and running.

1. After you have the seed up and running, next step is to install JS44D and its dependencies.

Run the following on your project root:

npm install js44d --save
npm install jquery --save
npm install @types/jquery @types/kendo-ui --save-dev

2. Edit src/app/tsconfig.app.json, to add jquery & kendo-ui type references:

Add this property under the compilerOptions: "types": ["jquery", "kendo-ui"]. Your src/app/tsconfig.app.json should end up looking like this:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": ["jquery", "kendo-ui"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/*.tns.*"
  ]
}

3. Edit src/index.html to add script references for jquery & kendo-ui.

Add these lines right before the end of your "body" section, that is, right before </body>:

    <script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    
    <script  src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
    <script  src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

4. Copy assets from js44d

Contents of the assets folder are used to apply our styling to our apps. You may use, or edit, them at will. The only item that is mandatory, if you're going to use the datagrid widget, is the kendo folder. That folder contains the css styles for the kendo widgets. This library's datagrid is based on kendo-ui grid. The other folders in assets are all optional.

You'll need to copy at least the kendo folder, and anything else you want to use, to your app's src/assets folder.

If you use our main.scss styles, then you'll need to add an extra line to styles.scss (see next).

5. Install bootstrap and edit style.scss

Run npm i bootstrap --save and then edit src/style.scss to add these lines:

@import './assets/kendo/kendo.common.css';
@import './assets/kendo/kendo.default.css';

@import './assets/main';  // you need this only if you copy 'main.scss' into 'src/assets'

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~bootstrap/dist/css/bootstrap-theme.min.css';

6. Export Data Models from your 4D Structure Tables

You should then export Data Models for all tables in your 4D Structure.

4D RESTApi Component includes a special method that can be used to generate FourDModel classes for each table on a 4D Structure. Method REST_ExportDataModel can be run from a host database and it'll present a popup for selecting a 4D Table, or all tables, and it'll generate the corresponding FourDModel class(es). A simple way to use it is to create a dummy new method, put a call to REST_ExportDataModel and run that method:

You should add a new folder to your app: src/app/dataModels, to hold all your data models. Add two subfolders to that folder: src/app/dataModels/DB, for your database tables. And another: src/app/dataModels/customDataModels, where you should put your custom data models, or data model extensions.