Angular 6.0.0 Compatability about delivery-sdk-js HOT 13 CLOSED

Hi, have you seen our sample Angular 6 app ? It's currently running on Angular 6. There is an issue with Angular CLI which ignores dynamic require expressions which essentially means that it tries to include node specific, which of course, fails.

The workaround is to tell your app to use 'Browser' specific package which you can do in the ts.config.json. I have described this process in the main readme of the angular app above.

Additionally, you can see the code also here https://github.com/Enngage/KenticoCloudSampleAngularApp/blob/master/tsconfig.json#L16

Let me know how that works!

from delivery-sdk-js.

Okey, so for Angular universal take a look at this sample application: https://github.com/Enngage/kentico-cloud-js-angular-universal-starter

It's pretty much the default starter provided by Angular team and only modified to load some data from Kentico Cloud. Can you try using that application on your end? You may notice that in order to fully leverage Angular universal, you need to use Angular's HttpClient for we provided a specific service.

Take a look at https://github.com/Enngage/kentico-cloud-js-angular-universal-starter/blob/master/src/app/home/home.component.ts#L21

Also, you need to use beta version of this library as you can see here: https://github.com/Enngage/kentico-cloud-js-angular-universal-starter/blob/master/package.json#L37

And finally, no extra configuration in tsconfig seems to be necessary here. The original issue in this thread was caused by Angular cli not properly building an application, but that seems to be fixed now.

from delivery-sdk-js.

So, in this case you need to provide the angularHttpService as a dependency through your deps in factory and then add this as a parameter to your KenticoServiceFactory function. Some information about this is in Angular docs here: https://angular.io/guide/dependency-injection-in-action#defining-providers

Hope that helps.

from delivery-sdk-js.

That worked perfectly, thanks!

Also in my case I'm running Angular Universal which runs seperate tsconfigs for server (nodejs) and browser, so I set the path as the non browser bundle on the server and it seems to work perfectly.

from delivery-sdk-js.

Awesome, glad to hear it! Thanks for the note, I've yet to use Angular Universal so I might incorporate that into the Angular example :-)

from delivery-sdk-js.

I was finally able to update to parse5 which strips the dependency out of Node so this should no longer be an issue. Though, the parse5 is relatively large library so I would recommend using browser specific package if possible anyway. (200KB vs 370KB)

from delivery-sdk-js.

@martinabrahams I am currently trying to do the same. Can you give a bit more information as to what you did with the path. I have it in tsconfig.json. Is there somewhere else it should be?

from delivery-sdk-js.

@r3plica Have you seen the sample Angular application? You can see how tsconfig.json looks like right here: https://github.com/Enngage/KenticoCloudSampleAngularApp#angular-6-support

from delivery-sdk-js.

Yeah and I used it to build my application, but as martin has done, I am trying to create a Universal application. I think I understand what he has done (just testing now). Instead of using:
https://github.com/Enngage/KenticoCloudSampleAngularApp/blob/master/tsconfig.json#L17
I changed it to:

"node_modules/kentico-cloud-delivery/_bundles/kentico-cloud-delivery-sdk.umd.min.js"

But that also does not work. I get an error stating:

ERROR in src/app/core/models/scanario.ts(18,26): error TS2694: Namespace '"C:/Users/JaymieJeffrey/Documents/GitHub/pickyourbest/node_modules/kentico-cloud-delivery/_commonjs/fields/field-types".Fields' has no exported member 'UrlSlug'. src/app/core/models/scanario.ts(19,27): error TS2694: Namespace '"C:/Users/JaymieJeffrey/Documents/GitHub/pickyourbest/node_modules/kentico-cloud-delivery/_commonjs/fields/field-types".Fields' has no exported member 'UrlSlug'. src/app/core/models/tech-made-simple.ts(5,30): error TS2694: Namespace '"C:/Users/JaymieJeffrey/Documents/GitHub/pickyourbest/node_modules/kentico-cloud-delivery/_commonjs/fields/field-types".Fields' has no exported member 'RichText'. src/app/core/models/tech-made-simple.ts(7,32): error TS2694: Namespace '"C:/Users/JaymieJeffrey/Documents/GitHub/pickyourbest/node_modules/kentico-cloud-delivery/_commonjs/fields/field-types".Fields' has no exported member 'RichText'. src/app/home/home.component.ts(6,26): error TS2305: Module '"C:/Users/JaymieJeffrey/Documents/GitHub/pickyourbest/node_modules/kentico-cloud-delivery/_commonjs/index"' has no exported member 'CloudError'. src/app/buying-guide/pillar.component.ts(7,26): error TS2305: Module '"C:/Users/JaymieJeffrey/Documents/GitHub/pickyourbest/node_modules/kentico-cloud-delivery/_commonjs/index"' has no exported member 'CloudError'. src/app/buying-guide/pillar.component.ts(69,68): error TS2339: Property 'taxonomyTerms' does not exist on type 'TextField'. src/app/buying-guide/pillar.component.ts(71,94): error TS2339: Property 'taxonomyTerms' does not exist on type 'TextField'. src/app/buying-guide/pillar.component.ts(77,99): error TS2339: Property 'taxonomyTerms' does not exist on type 'TextField'. src/app/buying-guide/cluster.component.ts(7,26): error TS2305: Module '"C:/Users/JaymieJeffrey/Documents/GitHub/pickyourbest/node_modules/kentico-cloud-delivery/_commonjs/index"' has no exported member 'CloudError'.

from delivery-sdk-js.

Thanks for this, just a quick question. I created a factory to provide the delivery client. It looks like this:

import { DeliveryClient, TypeResolver } from 'kentico-cloud-delivery';

import { Attribute } from '../models/attribute';
import { Pillar } from '../models/pillar';
import { Scenario } from '../models/scanario';
import { TechMadeSimple } from '../models/tech-made-simple';

export const KenticoClientService = {
  provide: DeliveryClient,
  useFactory: KenticoServiceFactory,
  deps: []
};

export function KenticoServiceFactory() {
  return new DeliveryClient({
    projectId: 'my-project-id',
    typeResolvers: [
      new TypeResolver('attribute', () => new Attribute()),
      new TypeResolver('pillar', () => new Pillar()),
      new TypeResolver('scenario', () => new Scenario()),
      new TypeResolver('tech_made_simple', () => new TechMadeSimple()),
    ]
  });
}

Any idea how to add the angularHttpService to that?

from delivery-sdk-js.

I have changed my service to:

import { Injectable } from '@angular/core';

import { IDeliveryClient, DeliveryClient, TypeResolver } from 'kentico-cloud-delivery';
import { AngularHttpService } from 'kentico-cloud-angular-http-service';

import { Attribute } from '../models/attribute';
import { Pillar } from '../models/pillar';
import { Scenario } from '../models/scanario';
import { TechMadeSimple } from '../models/tech-made-simple';
import { WhatToLookFor } from '../models/what-to-look-for';
import { Blog } from '../models/blog';
import { QuickThree } from '../models/quick-three';

@Injectable({ providedIn: 'root' })
export class KenticoClientService {
  deliveryClient: IDeliveryClient

  constructor(angularHttpService: AngularHttpService) {
    this.deliveryClient = new DeliveryClient({
      projectId: 'da5abe9f-fdad-4168-97cd-b3464be2ccb9',
      httpService: angularHttpService,
      typeResolvers: [
      new TypeResolver('attribute', () => new Attribute()),
      new TypeResolver('pillar', () => new Pillar()),
      new TypeResolver('scenario', () => new Scenario()),
      new TypeResolver('tech_made_simple', () => new TechMadeSimple()),
      new TypeResolver('what_to_look_for', () => new WhatToLookFor()),
      new TypeResolver('blog', () => new Blog()),
      new TypeResolver('quick_three', () => new QuickThree()),
      ]
    });
  }
}

does that look right to you?

from delivery-sdk-js.

Using that service, it does work.

from delivery-sdk-js.

Yes, that is the correct use of the service.

from delivery-sdk-js.