Is there a way to use OSDK with the AngularJS framework instead of React?
3 Likes
Yes. You can use AngularJS as the Typescript framework while leveraging the benefits of OSDK.
1) Start a new application in the Developer Console
Follow the documentation to start a new application using the Developer Console.
The boilerplate code comes already with React template (for now, stay tuned for updates at Annoucements). The dev server uses Vite.js (https://v2.vitejs.dev/) which does not fully support AngularJS. But with a few modifications it is possible to do so.
Original Palantir OSDK template in React:
2) Modify the current template
There many options to circunvent the Vite.js limitation. One option is to use the Analog.js meta-framework. Analog.js comes with an integration with Vite.js using the @analogjs/vite-plugin-angular plugin.
Firstly, we need to remove in the package.json file the React dependencies and add both Analog.js and AngularJS dependencies. Versions might differ from the time you are reading this post.
Remove the below dependencies:
"react": "^18",
"react-dom": "^18",
"react-router-dom": "^6.23.1"
Add the below dependencies instead
"@angular/core": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"zone.js": "~0.14.0"
In devDependencies, remove the below:
"@types/react": "^18",
"@types/react-dom": "^18",
"@vitejs/plugin-react": "^4.2.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.6"
And add the below devDependencies:
"@analogjs/platform": "^1.5.0",
"@analogjs/vite-plugin-angular": "^1.5.0",
"@angular-devkit/build-angular": "^17.0.0",
"@angular-devkit/core": "^17.0.0",
"@angular-devkit/schematics": "^17.0.0",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.0.0",
"@ngtools/webpack": "^17.0.0",
Your dependencies should look like something like this:
"dependencies": {
"@angular-app-v3/sdk": "latest",
"@osdk/client": "^2.0.8",
"@osdk/oauth": "^1.0.0",
"@angular/core": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"zone.js": "~0.14.0"
},
"devDependencies": {
"@analogjs/platform": "^1.5.0",
"@analogjs/vite-plugin-angular": "^1.5.0",
"@angular-devkit/build-angular": "^17.0.0",
"@angular-devkit/core": "^17.0.0",
"@angular-devkit/schematics": "^17.0.0",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.0.0",
"@ngtools/webpack": "^17.0.0",
"@types/node": "^20.12.12",
"@typescript-eslint/eslint-plugin": "^7.16.0",
"@typescript-eslint/parser": "^7.16.0",
"eslint": "^8.57.0",
"typescript": "~5.4.2",
"vite": "^5.4.8",
"vitest": "^2.1.2"
}
Then run the below command in the terminal
npm install
If you face any dependency conflict error you can either check the versions above and the error message with the help of AIP Assist or make sure you don’t have other versions already installed removing the old ones using the below command:
rm -rf node_modules package-lock.json
npm install
The final package.json should look like something like this:
{
"name": "angular-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev:remote": "vite --mode code-workspaces",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"test": "vitest run",
"preview": "vite preview"
},
"dependencies": {
"@angular-app-v3/sdk": "latest",
"@osdk/client": "^2.0.8",
"@osdk/oauth": "^1.0.0",
"@analogjs/router": "^1.5.0",
"@angular/core": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"zone.js": "~0.14.0"
},
"devDependencies": {
"@analogjs/platform": "^1.5.0",
"@analogjs/vite-plugin-angular": "^1.5.0",
"@angular-devkit/build-angular": "^17.0.0",
"@angular-devkit/core": "^17.0.0",
"@angular-devkit/schematics": "^17.0.0",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.0.0",
"@ngtools/webpack": "^17.0.0",
"@types/node": "^20.12.12",
"@typescript-eslint/eslint-plugin": "^7.16.0",
"@typescript-eslint/parser": "^7.16.0",
"eslint": "^8.57.0",
"typescript": "~5.4.2",
"vite": "^5.4.8",
"vitest": "^2.1.2"
}
}
3) Modify the Vite config files
Now we need to modify the below files accordingly to the Analog.JS docs (https://analogjs.org/docs/packages/vite-plugin-angular/overview)
Replace vite.config.js to the below
import { defineConfig } from 'vite';
import angular from '@analogjs/vite-plugin-angular';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [angular()],
base:
process.env.NODE_ENV === "development"
? process.env.DEV_SERVER_BASE_PATH
: undefined,
server: {
port: Number(process.env.DEV_SERVER_PORT ?? 8080),
host: process.env.DEV_SERVER_HOST,
},
});
Create a new tsconfig.app.json file
{
"extends": "./tsconfig.json",
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"noEmit": false,
"target": "es2020",
"module": "es2020",
"lib": ["es2020", "dom"],
"skipLibCheck": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"files": [],
"include": ["src/**/*.ts"]
}
4) Setup your AngularJS app
Now that the dependencies are installed we need to remove the old React files from the ./src/ folder and add the AngularJS files using the Analog.JS boilerplate. For reference, get yourself familiarized with the Analog.JS docs especially the routing process (https://analogjs.org/docs/features/routing/overview).
Firstly, we need to modify the index.html to use Angular tags instead of React tags:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/angular_logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ontology SDK + Angular</title>
</head>
<body>
<app-root></app-root>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
Now let’s add our files to the src folder. Below is just an example, but it will depend on how you want to setup your Angular project. You can find more ideas on the official Angular docs(https://v17.angular.io/start#create-the-sample-project).
src/
app/
app.module.ts
app.component.ts
app.component.html
app.component.css
main.ts
index.html
main.ts
import 'zone.js'; // Add this line
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Welcome to Ontology SDK + Angular</h1>`,
styles: []
})
export class AppComponent { }
Finally, just run the below command
npm run dev:remote
And inspired on the current boilerplate you can easily reassemble the components in AngularJS:
4 Likes
Thank you @jeanphelippe your post is quite helpful. The amount of detail you shared makes a great difference.