Angular workspace setup guide

Step 1: Install Angular CLI

Install the Angular CLI using the npm package manager:

npm install -g @angular/cli

Step 2: Scaffolding

Start with running the following command:

ng new my-project

You’ll be prompted with a few configuration options.

Keep in mind that if you opt for adding the Angular routing you must use it with the Hash location strategy

When the script finishes, you can run the following command:

cd my-project

Step 3: Integrate Component SDK

To integrate the Component SDK in the workspace, run the following command:

npm install -D @ixon-cdk/core @ixon-cdk/runner

Step 4: Generate IFrame wrapper component

Now that the workspace is correctly set up to run IXON Component SDK commands, run the following command to generate a component:

npx cdk generate my-component

Choose the IFrame wrapper template.

Step 5: Configure Angular

Now run the following two commands to configure the Angular build base URL and output path:

ng config "projects.my-project.architect.build.configurations.production.baseHref" "./"
ng config "projects.my-project.architect.build.options.outputPath" "components/my-component/dist"

Step 6: Build and Simulate

You can now build the Angular app and simulate it through the iframe wrapper component, by running these two commands:

ng build --watch
npx cdk simulate my-component

Step 7: Component Context

The following code snippet contains an angular module ComponentContextLoaderModule and a COMPONENT_CONTEXT injection token. Place the code in a file in your project and load the module in the app module. From that point, the component context can be injected into components, directives, or services by using the injection token.

import { APP_INITIALIZER, InjectionToken, NgModule } from '@angular/core';
import { getComponentContext } from '@ixon-cdk/iframe-adapter';
import { ComponentContext } from '@ixon-cdk/types';

export const COMPONENT_CONTEXT = new InjectionToken<ComponentContext>('ComponentContext');

@NgModule({
  providers: [
    { provide: APP_INITIALIZER, useValue: () => ComponentContextLoaderModule._ready, multi: true },
    { provide: COMPONENT_CONTEXT, useFactory: () => ComponentContextLoaderModule._value },
  ],
})
export class ComponentContextLoaderModule {
  static _ready: Promise<void>;
  static _value: ComponentContext;

  constructor() {
    ComponentContextLoaderModule._ready = getComponentContext().then(context => {
      ComponentContextLoaderModule._value = context;
    });
  }
}