Add files via upload

app.module.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+describe('Example test', () => {
+ /*let testComponent;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [ExampleModule]
+ });
+ testComponent = TestBed.createComponent(TestComponent);
+ });*/
+
+ test('Always true', () => {
+ expect(true).toBe(true);
+ });
+});

app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule as ngRouterModule } from '@angular/router';
+import { BootstrapComponent, CoreModule, RouterModule } from '@c8y/ngx-components';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { GpDeviceDetailsWidgetModule } from './widget/gp-device-details-widget.module';
+
+@NgModule({
+ imports: [
+ BrowserAnimationsModule,
+ ngRouterModule.forRoot([], { enableTracing: false, useHash: true }),
+ RouterModule.forRoot(),
+ CoreModule.forRoot(),
+ GpDeviceDetailsWidgetModule
+ ],
+ providers: [BsModalRef],
+ bootstrap: [BootstrapComponent]
+})
+export class AppModule {}

gulpfile.js

@@ -0,0 +1,24 @@
+const {src, dest, series} = require('gulp');
+const zip = require('gulp-zip');
+const del = require('del');
+const pkgJson = require('./package.json');
+
+function clean() {
+ return del(['dist']);
+}
+
+
+const bundle = series(
+ function createZip() {
+ return src(`./dist/apps/${pkgJson.c8y.application.contextPath}/**/*`)
+ .pipe(zip(`${pkgJson.c8y.application.contextPath}-${pkgJson.version}.zip`))
+ .pipe(dest('dist/'))
+ }
+)
+
+exports.clean = clean;
+exports.bundle = bundle;
+exports.default = series(bundle, async function success() {
+ console.log("Build Finished Successfully!");
+ console.log(`PluginOutput (Install in the browser): dist/${pkgJson.c8y.application.contextPath}-${pkgJson.version}.zip`);
+});

index.ts

@@ -0,0 +1,16 @@
+import './polyfills';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+declare const __MODE__: string;
+if (__MODE__ === 'production') {
+ enableProdMode();
+}
+
+export function bootstrap() {
+ platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .catch(err => console.log(err));
+}

jest.config.js

@@ -0,0 +1,6 @@
+// jest.config.js
+module.exports = {
+ preset: 'jest-preset-angular',
+ setupFilesAfterEnv: ['<rootDir>/setup-jest.js'],
+ transformIgnorePatterns: ['/!node_modules\\/lodash-es/']
+};

package.json

@@ -0,0 +1,95 @@
+{
+ "name": "cumulocity-device-details-widget-plugin",
+ "version": "1.0.0",
+ "description": "This is the Cumulocity module federation plugin. Plugins can be developed like any Cumulocity application, but can be used at runtime by other applications. Therefore, they export an Angular module which can then be imported by any other application. The exports are defined in `package.json`:",
+ "scripts": {
+ "start": "c8ycli server -u https://ravi.latest.stage.c8y.io",
+ "build": "c8ycli build",
+ "deploy": "c8ycli deploy",
+ "postinstall": "ngcc",
+ "prebuild": " gulp clean",
+ "postbuild": " gulp bundle"
+ },
+ "keywords": [],
+ "Author": "Darpankumar Lalani - Software AG, Global Presales",
+ "license": "Apache 2.0",
+ "dependencies": {
+ "@angular/animations": "14.0.6",
+ "@angular/common": "14.0.6",
+ "@angular/compiler": "14.0.6",
+ "@angular/core": "14.0.6",
+ "@angular/forms": "14.0.6",
+ "@angular/material": "14.0.6",
+ "@angular/platform-browser": "14.0.6",
+ "@angular/platform-browser-dynamic": "14.0.6",
+ "@angular/router": "14.0.6",
+ "@angular/upgrade": "14.0.6",
+ "@c8y/client": "1016.0.39",
+ "@c8y/ng1-modules": "1011.0.12",
+ "@c8y/ngx-components": "1016.0.39",
+ "@c8y/style": "1016.0.39",
+ "@ng-select/ng-select": "^9.0.1",
+ "@ngx-translate/core": "14.0.0",
+ "del": "^5.1.0",
+ "fs-extra": "^9.1.0",
+ "gulp": "^4.0.2",
+ "gulp-filter": "^6.0.0",
+ "gulp-inject-css": "^3.0.0",
+ "gulp-inject-string": "^1.1.2",
+ "gulp-replace": "^1.0.0",
+ "gulp-zip": "^5.0.1",
+ "i": "^0.3.6",
+ "ngx-bootstrap": "^9.0.0",
+ "rxjs": "~6.6.3",
+ "zone.js": "~0.11.7"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "14.0.6",
+ "@angular/cdk": "14.1.2",
+ "@angular-devkit/build-ng-packagr": "~0.803.28",
+ "@angular/compiler-cli": "14.0.6",
+ "@angular/language-service": "14.0.6",
+ "@angular/service-worker": "14.0.6",
+ "@angular/localize": "14.0.6",
+ "@types/jest": "^28.1.6",
+ "@types/webpack": "^5.28.0",
+ "file-loader": "^6.2.0",
+ "jest": "^28.1.3",
+ "jest-preset-angular": "^12.2.0",
+ "typescript": "4.7.4",
+ "style-loader": "3.3.1",
+ "html-loader": "4.1.0",
+ "@c8y/cli": "1016.0.39",
+ "ng-packagr": "^11.0.6"
+ },
+ "c8y": {
+ "application": {
+ "name": "Cumulocity Device Details Widget Plugin",
+ "contextPath": "cumulocity-device-details-widget-plugin",
+ "key": "cumulocity-device-details-widget-plugin-application-key",
+ "globalTitle": "Cumulocity Device Details Widget with Module Federation",
+ "tabsHorizontal": true,
+ "isPackage": true,
+ "noAppSwitcher": true,
+ "package": "plugin",
+ "requiredPlatformVersion": ">=1014.0.0",
+ "exports": [
+ {
+ "name": "Cumulocity Device Details Widget Plugin",
+ "module": "GpDeviceDetailsWidgetModule",
+ "path": "./widget/gp-device-details-widget.module.ts",
+ "description": "Adds a custom widget to the shell application"
+ }
+ ],
+ "remotes": {
+ "widget-plugin": [
+ "GpDeviceDetailsWidgetModule"
+ ]
+ }
+ },
+ "cli": {}
+ },
+ "browserslist": [
+ "last 2 major versions"
+ ]
+}

polyfills.ts

@@ -0,0 +1,33 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'message'];
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.

setup-jest.js

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

tsconfig.json

@@ -0,0 +1,17 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "experimentalDecorators": true,
+ "target": "es6",
+ "module": "es2020",
+ "lib": ["dom", "es2015", "es2016"]
+ },
+ "angularCompilerOptions": {
+ "enableIvy": true
+ }
+}

tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/spec",
+ "types": ["jest"],
+ "esModuleInterop": true
+ },
+ "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}