ngx-lite icon indicating copy to clipboard operation
ngx-lite copied to clipboard

Upgrade to Angular 12 causing errors during build

Open ambigos1 opened this issue 3 years ago • 6 comments

Hi, Just upgraded to Angular 12, include angular/cli 12. json-ld library worked for me when using angular 9.

After upgrading getting the following errors during build.

Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.component.d.ts:10:21 - error TS2694: Namespace '"XXX/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDefWithMeta'.

10 static ɵcmp: i0.ɵɵComponentDefWithMeta<NgxJsonLdComponent, "ngx-json-ld", never, { "json": "json"; }, {}, never, never>; ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.module.d.ts:5:21 - error TS2694: Namespace '"XXX/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDefWithMeta'.

5 static ɵmod: i0.ɵɵNgModuleDefWithMeta<NgxJsonLdModule, [typeof i1.NgxJsonLdComponent], [typeof i2.CommonModule], [typeof i1.NgxJsonLdComponent]>; ~~~~~~~~~~~~~~~~~~~~~

image

**Versions

  • OS: Windows
  • Package Version ^0.6.3
  • Angular Version ~12.0.1

ambigos1 avatar May 22 '21 20:05 ambigos1

Hello, I've got a similar issue to #56

Just upgraded to Angular 12, include angular/cli 12. json-ld library worked for me when using angular 11.

After upgrading getting the following errors during build:

Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.component.d.ts:9:21 - error TS2694: Namespace '"/.../node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDef'.
9     static ɵfac: i0.ɵɵFactoryDef<NgxJsonLdComponent, never>;
                      ~~~~~~~~~~~~

Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.component.d.ts:10:21 - error TS2694: Namespace '"/.../node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDefWithMeta'.
10     static ɵcmp: i0.ɵɵComponentDefWithMeta<NgxJsonLdComponent, "ngx-json-ld", never, { "json": "json"; }, {}, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.module.d.ts:5:21 - error TS2694: Namespace '"/.../node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDefWithMeta'.
5     static ɵmod: i0.ɵɵNgModuleDefWithMeta<NgxJsonLdModule, [typeof i1.NgxJsonLdComponent], [typeof i2.CommonModule], [typeof i1.NgxJsonLdComponent]>;
                      ~~~~~~~~~~~~~~~~~~~~~

Versions

  • OS: Linux, Debian based
  • Angular: 12.0.1
  • ngx-lite/json-ld:
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/@ngx-lite/json-ld/-/json-ld-0.6.3.tgz",
      "integrity": "sha512-OD3lbq1mO5Py8S80XD23v/LLpT74YOE6u4s9NZ3rCCmpijNN37ypOEBDuJalh8cq/MN7qWHID0lDFszULB5cVQ==",
      "requires": {
        "tslib": "^2.0.0"
      }

Dialvive avatar May 23 '21 04:05 Dialvive

No response since yesterday. Someone here know of this Library is deprecated?

ambigos1 avatar May 23 '21 13:05 ambigos1

No response since yesterday. Someone here know of this Library is deprecated?

Try assigning the mantainer or other collaborator on your issue, and add a label please.

Dialvive avatar May 24 '21 02:05 Dialvive

I Solved it by writing the component that inject the schema markup. the component code were took from this library plus an extra feature I did that minify the json schema on production for better performance :),

json-ld.component.ts:

import { ChangeDetectionStrategy, HostBinding, Component, Input, OnInit } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { environment } from 'src/environments/environment';

@Component({ selector: 'app-json-ld', template: '', changeDetection: ChangeDetectionStrategy.OnPush, }) export class JsonLdComponent { @Input() set json(currentValue: any) { this.jsonLD = this.getSafeHTML(currentValue); } @HostBinding('innerHTML') jsonLD?: SafeHtml; constructor(private sanitizer: DomSanitizer) { }

getSafeHTML(value: {}) { let json = value ? JSON.stringify(value, null, 2).replace(/</script>/g, '<\/script>') : '';

if (environment.production) {
  json = JSON.stringify(JSON.parse(json));
}

const html = `<script type="application/ld+json">${json}</script>`;
return this.sanitizer.bypassSecurityTrustHtml(html);

} }

json-ld.module.ts: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { JsonLdComponent } from './json-ld/json-ld.component';

@NgModule({ declarations: [ JsonLdComponent ], imports: [ CommonModule ], exports: [JsonLdComponent], }) export class JsonLdModule { }

After Implementing this you just need to switch references Instead <ngx-json-ld [json]="schema"></ngx-json-ld> --> <app-json-ld [json]="schema"></app-json-ld>

And update the module import.

Good luck to you all.

ambigos1 avatar May 24 '21 06:05 ambigos1

i'm having same problem, not even upgrade or anything, error just appears, and I just removed this wrapper @ngx-lite/ngx-json-ld to use directly npm install ngx-json-ld, and it works now (still on version 10 for me).

unpherum avatar Jun 03 '21 05:06 unpherum

Same issue why no fix yet ?

logicappsource avatar Jun 14 '21 16:06 logicappsource