Error angular structure loaded both synchronously and asynchronously - Исправление ошибок и поиск оптимальных решений проблем

I just upgraded my Angular 6 project to Angular 11. This project has SSR implemented and here is the issue.

When I run ng run myapp:server I get this error:

✔ Server application bundle generation complete.

Initial Chunk Files | Names         |    Size
main.js             | main          | 4.06 kB

                    | Initial Total | 4.06 kB

Build at: 2021-04-22T14:02:16.388Z - Hash: 2a6aaefe9d15b8a7dedc - Time: 4907ms

Error: Angular structure loaded both synchronously and asynchronously

In my angular.json I have this code:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        },
  // ...
}

Any idea where I should check, update something?

Источник

Current behavior
When I use the latest primeNG version 12.0.0-rc-1 on the Angular version 12.0.1 app and building the app using the ng build command its throwing this error

× Compiling TypeScript sources through NGC
ERROR: Angular structure loaded both synchronously and asynchronously
An unhandled exception occurred: Angular structure loaded both synchronously and asynchronously
See "C:UserssunAppDataLocalTempng-wtTTRwangular-errors.log" for further details.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file C:WINDOWSsystem32cmd.exe
npm ERR! errno ENOENT
npm ERR! matrix-ui-core-ng@3.10.5-pre.0 build: `npm run index && ng build --configuration production --project core`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the matrix-ui-core-ng@3.10.5-pre.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UserssunAppDataRoamingnpm-cache_logs2021-06-02T06_51_49_794Z-debug.log

Process finished with exit code 1

Expected behavior
The app should build without any error.

Please tell us about your environment:
OS: Windows 10
IDE: WebStorm
Node: v14.15.0

Источник

Issue

I have the following Angular 12 workspace:

projects/
  lib_a/
  lib_b/
  host/

Where basically:

lib_a contains some UI kit
lib_b handles authentication stuff and depends on lib_a to reuse the UI kit
host is an app that imports both libs

What I’m wondering is… is this possible? Can I import lib_a into its sibling lib_b?

Both libs can be built just fine but as soon as I try to import one into the other (say, lib_a into lib_b) I get the following error:

Building entry point 'lib_b'
------------------------------------------------------------------------------
✖ Compiling with Angular in legacy View Engine compilation mode.
ERROR: Angular structure loaded both synchronously and asynchronously

I googled the error and found this previous question: How to fix: Error: Angular structure loaded both synchronously and asynchronously, so I reviewed all imports and they seem to be OK, then disabled Ivy for both libs and checked that there aren’t any missing dependencies. Still got nothing.

None of these libraries is published so a local solution would be preferred (i.e. I can’t deploy the package to NPM/GitHub yet).

Solution

I also failed setting up an angular workspace with a library that references another library (= monorepo). You should create an NX workspace instead.

Here are the commands I did
Here is a demo project with all instructions
nx.dev

This DOES in fact allow you to reference libraries from applications, and libraries from other libraries, all in the same workspace.

Answered By – Pieterjan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Источник

Angular structure loaded both synchronously and asynchronously when adding primeng tableModule

Questions : Angular structure loaded both synchronously and asynchronously when adding primeng tableModule

2023-02-06T11:59:17+00:00 2023-02-06T11:59:17+00:00

361

I had the following error when loading TableModule from primeng into my components module file and trying to run ‘npm run packagr’:

Maximum call stack size exceeded

I found this solution, to change my primeng version primeng12 to primeng11.4.5. So I did that, but now I am getting the following error:

Angular structure loaded both  synchronously and asynchronously

This is my components module file:

import { NgModule } from  '@angular/core';
import { CommonModule }  from '@angular/common';
import {  HeaderComponent } from  './header.component';
import {  TableModule } from  'primeng/table';

@NgModule({
   declarations: [HeaderComponent],
   imports: [CommonModule, TableModule],
   exports: [HeaderComponent],
})
export  class HeaderModule {} //RED LINE APPEARS  HERE UNDER HEADERMODULE, BUT NOWHERE  ELSE

Does anyone have any ideas how I can fix this?

Total Answers 1

Answers 1 : of Angular structure loaded both synchronously and asynchronously when adding primeng tableModule

Fixed this by changing prime ng version to 9.1.3 and installing angular cdk

2023-02-06T11:59:17+00:00 2023-02-06T11:59:17+00:00Answer Link

mRahman

Источник

Я только что обновил свой проект Angular 6 до Angular 11. В этом проекте реализован SSR, и вот в чем проблема.

Когда я запускаю ng run myapp:server, я получаю эту ошибку:

✔ Server application bundle generation complete.

Initial Chunk Files | Names         |    Size
main.js             | main          | 4.06 kB

                    | Initial Total | 4.06 kB

Build at: 2021-04-22T14:02:16.388Z - Hash: 2a6aaefe9d15b8a7dedc - Time: 4907ms

Error: Angular structure loaded both synchronously and asynchronously

В моем angular.json у меня есть этот код:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        },
  // ...
}

Любая идея, где я должен проверить, обновить что-то?

11 ответов

Включение Ivy решает проблему для меня, добавьте эти угловые параметры компилятора в свой tsconfig.app.json :

"angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true,
    "fullTemplateTypeCheck": true, 
    "enableIvy": true
  },

Lhoussin Ghanem
9 Май 2021 в 04:41

Я следовал документам внешней библиотеки, и один из моих импортированных модулей использовал опционный объект, имя свойства которого было создано с синтаксисом массива []:

@NgModule({
  ...
  imports: [MyLibrary.forFeature(MODALS)]
  ...
}) 


export enum MODAL_NAMES {
 ADVANCED_MODAL = 'ADVANCED_MODAL'
}

export const MODALS = {
 //error was here
 [MODAL_NAMES.ADVANCED_MODAL]: {
  ...
 }
};

Поэтому я изменил его на строку, и это помогло.

export const MODALS = {
     //no error: Angular structure loaded both synchronously and asynchronously
     'ADVANCED_MODAL': {
      ...
     }
    };

Cristik
23 Мар 2022 в 18:36

Может быть, это будет полезно для кого-то. Я использую NgRx в своем приложении и столкнулся с той же ошибкой. Я потратил 1 день, чтобы обнаружить, что я неправильно указал редукторы для своей функции. Я предоставил refreshReducer как ActionReducer вместо функции, которая возвращает состояние

StoreModule.forFeature(REFRESH_FEATURE_KEY, refreshReducer)

Александр Купченя
2 Сен 2022 в 17:53

У меня была три раза одна и та же ошибка,

1: неправильный импорт библиотеки

Во-первых, потому что я создавал библиотеку, и один компонент этой библиотеки не импортировал другой модуль из той же библиотеки с относительным путем.

import { aModule } from '@my-lib/a.module.ts' // wrong

import { aModule } from '../../a.module.ts' // correct

2: отсутствующие зависимости

Одна из моих библиотек заставила импортировать некоторые зависимости. одним из них был @videogular/ngx-videogular, который на сегодняшний день принимает только угловую версию v11, но я использую угловую версию v12.

Я знаю, что это работает с angular v12, и чтобы исправить это, мне пришлось принудительно установить следующую npm i @videogular/ngx-videogular --force

3 : `enableIvy: true`

Если вы используете зависимости, которые используют enableIvy: true в своих tsconfig.lib.prod.json, вам также необходимо включить ivy в своем собственном проекте. если этого не сделать, возникнет эта ошибка.

Кроме того, если вы добавите зависимость, которая работает, а другую нет, вы также получите ту же ошибку. Поэтому, если у вас возникла эта ошибка после обновления некоторых внешних библиотек, проверьте, включили ли они плющ или нет, и перейдите к прежней версии, в которой этого не было.

Raphaël Balet
25 Ноя 2021 в 13:40

Я столкнулся с той же ошибкой в проекте Angular (не в библиотеке), и проблема заключалась в том, что я удалил какой-то общий компонент из pproject, но забыл удалить его из соответствующего модуля.

Dharman
21 Июн 2021 в 18:26

У меня такая же проблема в моем проекте после обновления Angular 9.1 до 11 при компиляции библиотеки. В папке моей библиотеки в файле tsconfig.json я удалил следующий angularCompileOptions

"angularCompilerOptions": {
  "fullTemplateTypeCheck": true,
  "strictInjectionParameters": true,
  "enableIvy": "false"
}

И он начал работать.

Не знаю, смогу ли я помочь этой информацией кому-нибудь, но информации по этому вопросу очень мало. Поэтому опубликую.

Андрей Керничный
31 Май 2021 в 08:24

Я столкнулся с той же проблемой, но не в SSR. Я получал ту же ошибку с ng serve

Чтобы исправить это, я просто добавляю @angular/cdk в зависимость dev, и проблема решена.

npm i @angular/cdk

-1

Santosh Mahto
25 Апр 2021 в 12:14

Поправьте меня, если я ошибаюсь, но ответ здесь https://stackoverflow.com/a/67768272/16383608 Я бы сказать, что это рассматривается как включение Ivy из-за «enableIvy»: «ложь» вместо «enableIvy»: ложь. Если вы столкнулись с этой проблемой, я бы сосредоточился на ваших зависимостях, зависимостях разработчиков и импорте библиотек. В моем случае каждый раз отсутствовали какие-то зависимости из-за неправильного импорта или неполного package.json.

Adrianna
5 Июл 2021 в 16:54

У нас есть angularCompilerOptions.enableIvy = false.

Причина: ключевое слово export требуется для заводских функций, чтобы исправить эту ошибку.

Примере:

import { NgModule } from '@angular/core';
import { JDbApiClient, LinksJDbContext } from '../shared';
import { JDbApiClientModule } from './jdb.api-client.module';


/* Error is HERE... -> */ export /*<- ...if keyword is missing */ function newLinksJDbContext(api: JDbApiClient) {
  return new LinksJDbContext(api);
}

@NgModule({
  imports: [JDbApiClientModule], 
  providers: [
    {
      provide: LinksJDbContext,
      useFactory: newLinksJDbContext,
      deps: [JDbApiClient],
    },
  ],  
})
export class LinksJDbContextModule {}

Alexander Shagin
16 Авг 2021 в 16:37

Если кто-то сталкивается с этой ошибкой при использовании @ngrx/store, проверьте, правильно ли используется редьюсер. Как указано в docs, константа, созданная с помощью createReducer, должна быть заключена в экспортируемую функцию и используется в StoreModule. Например:

const ngrxReducer = createReducer(
    INITIAL_STATE,
    on(someAction, (state, { someProperty }) => ({
        someProperty
    })
);

export function reducer(state: State | undefined, action: Action) {
    return ngrxReducer(state, action);
}

Grzegorz Jaworski
27 Авг 2021 в 15:47

Я столкнулся с этой проблемой при обновлении библиотеки до Angular 12. Я исправил проблему, добавив "enableIvy": true в свой tsconfig.json.

"angularCompilerOptions": {
    "enableIvy": true,
}

И Мне пришлось изменить свой скрипт ngPackagr, включив в него аргумент -c tsconfig.json:

ng-packagr -p lib/.../package.json -c tsconfig.json

Chris Stillwell
29 Ноя 2021 в 20:18

Источник

If you are using dependencies that do use enableIvy: true in their tsconfig.lib.prod.json then you also have to enable ivy on your own project. not doing so will create this error. I was running into this issue with a library being updated to Angular 12. I fixed the issue by adding «enableIvy»: true to my tsconfig.json Enabling Ivy solves the problem for me, add this angular Compiler Options to your tsconfig.app.json : We have angularCompilerOptions.enableIvy = false.

First, it was because I was creating a library, and one component of this library wasn’t importing other module from the same library with the relative path.

import {
   aModule
} from '@my-lib/a.module.ts' 

import {
   aModule
} from '../../a.module.ts'

2._

"angularCompilerOptions": {
   "skipTemplateCodegen": true,
   "strictMetadataEmit": true,
   "enableResourceInlining": true,
   "fullTemplateTypeCheck": true,
   "enableIvy": true
},

Suggestion : 2

Current behavior
When I use the latest primeNG version 12.0.0-rc-1 on the Angular version 12.0.1 app and building the app using the ng build command its throwing this error include the latest primeng version 12.0.0-rc-1 in the package.json create a new angular app with the latest version 12.0.1 build an app using the command ng build —configuration production

×
Compiling TypeScript sources through NGC
ERROR: Angular structure loaded both synchronously and asynchronously
An unhandled exception occurred: Angular structure loaded both synchronously and asynchronously
See "C:UserssunAppDataLocalTempng-wtTTRwangular-errors.log"
for further details.
npm ERR!code ELIFECYCLE
npm ERR!syscall spawn
npm ERR!file C: WINDOWS system32 cmd.exe
npm ERR!errno ENOENT
npm ERR!matrix - ui - core - ng @3 .10 .5 - pre .0 build: `npm run index && ng build --configuration production --project core`
npm ERR!spawn ENOENT
npm ERR!
   npm ERR!Failed at the matrix - ui - core - ng @3 .10 .5 - pre .0 build script.
npm ERR!This is probably not a problem with npm.There is likely additional logging output above.

npm ERR!A complete log of this run can be found in:
   npm ERR!C: Users sun AppData Roaming npm - cache _logs 2021 - 06 - 02 T06_51_49_794Z - debug.log

Process finished with exit code 1

Suggestion : 3

Architect runs builders asynchronously.
To invoke a builder, you schedule a task to be run when all configuration resolution is complete. You can also invoke a builder directly from another builder or test by calling context.scheduleBuilder().
You pass an options object directly to the method, and those option values are validated against the schema of the builder without further adjustment. Builders have option defaults specified in the angular.json configuration file, which can be overwritten by an alternate configuration for the target, and further overwritten by command line flags

1._

      content_copy

      npm install @example / my - builder

2._

      
        content_copy
      
      import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
import { JsonObject } from '@angular-devkit/core';

interface Options extends JsonObject {
  source: string;
  destination: string;
}

export default createBuilder(copyFileBuilder);

async function copyFileBuilder(
  options: Options,
  context: BuilderContext,
): Promise<BuilderOutput> {
}

3._

      
        content_copy
      
      import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
import { JsonObject } from '@angular-devkit/core';
import { promises as fs } from 'fs';

interface Options extends JsonObject {
  source: string;
  destination: string;
}

export default createBuilder(copyFileBuilder);

async function copyFileBuilder(
  options: Options,
  context: BuilderContext,
): Promise<BuilderOutput> {
  try {
    await fs.copyFile(options.source, options.destination);
  } catch (err) {
    return {
      success: false,
      error: err.message,
    };
  }

  return { success: true };
}

5._

      
        content_copy
      
      import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
import { JsonObject } from '@angular-devkit/core';
import { promises as fs } from 'fs';

interface Options extends JsonObject {
  source: string;
  destination: string;
}

export default createBuilder(copyFileBuilder);

async function copyFileBuilder(
  options: Options,
  context: BuilderContext,
): Promise<BuilderOutput> {
  context.reportStatus(`Copying ${options.source} to ${options.destination}.`);
  try {
    await fs.copyFile(options.source, options.destination);
  } catch (err) {
    context.logger.error('Failed to copy file.');
    return {
      success: false,
      error: err.message,
    };
  }

  context.reportStatus('Done.');
  return { success: true };
}

6._

      content_copy

      {
         "$schema": "http://json-schema.org/schema",
         "type": "object",
         "properties": {
            "source": {
               "type": "string"
            },
            "destination": {
               "type": "string"
            }
         }
      }

Suggestion : 4

Template validation produces error messages when a type error is detected in a template binding
expression, similar to how type errors are reported by the TypeScript compiler against code in a .ts
file. The compiler could not refer to the template constant because it isn’t exported.
The collector, however, can fold the template constant into the metadata definition by in-lining its contents.
The effect is the same as if you had written: If an expression uses unsupported syntax, the collector writes an error node to the .metadata.json file.
The compiler later reports the error if it needs that piece of metadata to generate the application code.

1._

      
        content_copy
      
      @Component({
  selector: 'app-typical',
  template: '<div>A typical component for {{data.name}}</div>'
})
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { … }
}

2._

      content_copy

         "angularCompilerOptions": {
            …
            "strictMetadataEmit": true
         }

3._

      content_copy

      @Component({
         …
         providers: [{
            provide: server,
            useFactory: () => new Server()
         }]
      })

5._

      
        content_copy
      
      const template = '<div>{{hero.name}}</div>';

@Component({
  selector: 'app-hero',
  template: template
})
export class HeroComponent {
  @Input() hero: Hero;
}

6._

      
        content_copy
      
      @Component({
  selector: 'app-hero',
  template: '<div>{{hero.name}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}

Suggestion : 5

Observable execution errors are delivered to the subscriber’s error handler, and the subscriber automatically unsubscribes from the observable.
src/observables.ts (error)
content_copy

observable.subscribe(() => {
throw new Error(‘my error’);
});

Observable subscriptions are cancellable.
Unsubscribing removes the listener from receiving further values, and notifies the subscriber function to cancel work. Observables subscribe() is responsible for handling errors.
Promises push errors to the child promises.
This makes observables useful for centralized and predictable error handling.

1._

      
        content_copy
      
      
const observable = new Observable<number>(observer => {
  
});


observable.subscribe(value => {
  
});

2._

      
        content_copy
      
      
let promise = new Promise<number>(resolve => {
  
});
promise.then(value => {
  
});

3._

      content_copy

      observable.pipe(map(v => 2 * v));

5._

      content_copy

      const subscription = observable.subscribe(() => {
         
      });

      subscription.unsubscribe();

6._

      content_copy

      observable.subscribe(() => {
         throw new Error('my error');
      });

Suggestion : 6

The BannerComponent tests frequently call detectChanges.
Some testers prefer that the Angular test environment run change detection automatically. Tests can explore how the HeroDetailComponent responds to different id parameter values by manipulating the ActivatedRoute injected into the component’s constructor. Now the tests can control the component’s hero directly by manipulating the spy-stub’s testHero and confirm that service methods were called. That’s possible by configuring the TestBed with the ComponentFixtureAutoDetect provider.
First import it from the testing utility library:

1._

      
        content_copy
      
      @Component({
  selector: 'app-banner',
  template: '<h1>{{title}}</h1>',
  styles: ['h1 { color: green; font-size: 350%}']
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}

2._

      
        content_copy
      
      let component: BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
let h1: HTMLElement;

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ BannerComponent ],
  });
  fixture = TestBed.createComponent(BannerComponent);
  component = fixture.componentInstance; 
  h1 = fixture.nativeElement.querySelector('h1');
});

3._

      content_copy

      it('should display original title', () => {
         expect(h1.textContent).toContain(component.title);
      });

5._

      content_copy

      it('no title in the DOM after createComponent()', () => {
         expect(h1.textContent).toEqual('');
      });

6._

      content_copy

      it('should display original title after detectChanges()', () => {
         fixture.detectChanges();
         expect(h1.textContent).toContain(component.title);
      });

Suggestion : 7

XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons. Warning: Synchronous XHR requests often cause hangs on the web, especially with poor network conditions or when the remote server is slow to respond. Synchronous XHR is now deprecated and should be avoided in favor of asynchronous requests. One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

1._

const xhr = new XMLHttpRequest();
xhr.open("GET", "/bar/foo.txt", true);
xhr.onload = (e) => {
   if (xhr.readyState === 4) {
      if (xhr.status === 200) {
         console.log(xhr.responseText);
      } else {
         console.error(xhr.statusText);
      }
   }
};
xhr.onerror = (e) => {
   console.error(xhr.statusText);
};
xhr.send(null);

2._

function xhrSuccess() {
   this.callback.apply(this, this.arguments);
}

function xhrError() {
   console.error(this.statusText);
}

function loadFile(url, callback, ...args) {
   const xhr = new XMLHttpRequest();
   xhr.callback = callback;
   xhr.arguments = args;
   xhr.onload = xhrSuccess;
   xhr.onerror = xhrError;
   xhr.open("GET", url, true);
   xhr.send(null);
}

3._

function showMessage(message) {
   console.log(`${message} ${this.responseText}`);
}

loadFile("message.txt", showMessage, "New message!nn");

5._

function showMessage(message) {
   console.log(`${message} ${this.responseText}`);
}

loadFile("message.txt", 2000, showMessage, "New message!n");

6._

const request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false); 
request.send(null);

if (request.status === 200) {
   console.log(request.responseText);
}

Suggestion : 8

We send the error during user signup fail. So we have created the “/signup” route in the express app. Now on signup failure send the error using res.status(401).json() method. Now on the frontend side, the auth.service.ts is sending the signup request to the backend. This will return an observable response. So we can subscribe to this request and except the backend response on the frontend side. So by this way, we can send it as a response to the frontend now on the frontend side in angular we can handle this simply in the service file, so we have created an auth.service.ts file from where we send a request to the backend.

Example: Explain it with a very simple example let’s say we are trying to create a new user in the database and send a post request for this from the signup page.

router.post('/signup', UserController.(req, res) => {
   bcrypt.hash(req.body.password, 10)
      .then((hash) => {
         var user = new User({
            email: req.body.email,
            password: hash
         })
         User.save((err, d) => {
            if (err) {
               res.status(401).json({
                  message: 'Failed to create new user'
               })
            } else {
               res.status(200).json({
                  message: 'User created'
               })
            }
         })
      })
})

So, if data saved successfully then we can send the success response to the user.

Syntax:

res.status(200).json({
   message: 'User created'
})

But if data is not saved to the database then we get an error object in the callback. If we get an error, or we know the scenario in which error occurs then we simply send.

res.status(401).json({
   message: 'Failed to create new user'
})

Here we have created an addUser() method that sends HTTP request to the backend (Express framework) providing user details so this.http.post() method returns an Observable, so we can subscribe this and this provides us three callback methods first is success case, second is error case and the third is done (when all operations performed or end). In the success case, we are navigating the user to the login page.

}, (err) => {
   console.log(err.error.message);
   this.error = err.message;
   
   
});

Источник

534 viewsJune 12, 2021angularangular

Saswata383.06K

June 12, 2021

0 Comments

In my ‘admin-products.component.html originally had a table like this:

<table class="table">
  <thead>
     <tr>
        <th>Title</th>
        <th>Price</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let p of filteredProducts">
        <td>{{ p.title }}</td>
        <td>{{ p.price }}</td>
        <td>
            <a [routerLink]="['/admin/products/', p.event)">
<data-table-column [property]="'title'" [header]="'Title'" [sortable]="true" [resizable]="true">
    <data-table-column [property]="'price'" [header]="'Price'" [sortable]="true" [resizable]="true">
        <ng-template #dataTableCell let-item="item">
            {{ item.price | currency:'USD':true }}
        </ng-template>
    </data-table-column>
    <data-table-column [property]="'key]">Edit</a>
        </ng-template>
    </data-table-column>

I have the error message in the title after ng serve. Should I got it because maybe angular-4-data-table is not compatible with Angular 11.2.14?

Источник

VAchris

I would like to globally enable input sanitizing. The docs state that it can be done but looking at the QuillConfig interface there doesn’t appear to be an option.

Can we get sanitize added?

export interface QuillConfig {
    bounds?: HTMLElement | string;
    customModules?: CustomModule[];
    customOptions?: CustomOption[];
    suppressGlobalRegisterWarning?: boolean;
    debug?: 'error' | 'warn' | 'log' | false;
    format?: QuillFormat;
    formats?: string[];
    modules?: QuillModules;
    placeholder?: string;
    readOnly?: boolean;
    scrollingContainer?: HTMLElement | string | null;
    theme?: string;
    strict?: boolean;
    trackChanges?: 'user' | 'all';
    defaultEmptyValue?: any;
}

Error: Angular structure loaded both synchronously and asynchronously

Error: ../../../../../node_modules/ngx-quill/lib/quill.service.d.ts:12:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

12     static ɵfac: i0.ɵɵFactoryDeclaration<QuillService, [null, { optional: true; }]>;
                       ~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill.service.d.ts:13:22 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.

13     static ɵprov: i0.ɵɵInjectableDeclaration<QuillService>;
                        ~~~~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-editor.component.d.ts:3:34 - error TS2307: Cannot find module 'quill' or its corresponding type declarations.

3 import QuillType, { Delta } from 'quill';
                                   ~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-editor.component.d.ts:124:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

124     static ɵfac: i0.ɵɵFactoryDeclaration<QuillEditorBase, never>;
                        ~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-editor.component.d.ts:125:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.

125     static ɵdir: i0.ɵɵDirectiveDeclaration<QuillEditorBase, never, never, { "format": "format"; "theme": "theme"; "modules": "modules"; "debug": "debug"; "readOnly": "readOnly"; "placeholder": "placeholder"; "maxLength": "maxLength"; "minLength": "minLength"; "required": "required"; "formats": "formats"; "customToolbarPosition": "customToolbarPosition"; "sanitize": "sanitize"; "styles": "styles"; "strict": "strict"; "scrollingContainer": "scrollingContainer"; "bounds": "bounds"; "customOptions": "customOptions"; "customModules": "customModules"; "trackChanges": "trackChanges"; "preserveWhitespace": "preserveWhitespace"; "classes": "classes"; "trimOnValidation": "trimOnValidation"; "linkPlaceholder": "linkPlaceholder"; "compareValues": "compareValues"; "filterNull": "filterNull"; "debounceTime": "debounceTime"; "defaultEmptyValue": "defaultEmptyValue"; "valueGetter": "valueGetter"; "valueSetter": "valueSetter"; }, { "onEditorCreated": "onEditorCreated"; "onEditorChanged": "onEditorChanged"; "onContentChanged": "onContentChanged"; "onSelectionChanged": "onSelectionChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, never>;
                        ~~~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-editor.component.d.ts:129:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

129     static ɵfac: i0.ɵɵFactoryDeclaration<QuillEditorComponent, never>;
                        ~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-editor.component.d.ts:130:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

130     static ɵcmp: i0.ɵɵComponentDeclaration<QuillEditorComponent, "quill-editor", never, {}, {}, never, ["[quill-editor-toolbar]"]>;
    [91m                    ~~~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-view.component.d.ts:1:23 - error TS2307: Cannot find module 'quill' or its corresponding type declarations.

1 import QuillType from 'quill';
                        ~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-view.component.d.ts:35:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

35     static ɵfac: i0.ɵɵFactoryDeclaration<QuillViewComponent, never>;
                       ~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-view.component.d.ts:36:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

36     static ɵcmp: i0.ɵɵComponentDeclaration<QuillViewComponent, "quill-view", never, { "format": "format"; "theme": "theme"; "modules": "modules"; "debug": "debug"; "formats": "formats"; "sanitize": "sanitize"; "strict": "strict"; "content": "content"; "customModules": "customModules"; "customOptions": "customOptions"; "preserveWhitespace": "preserveWhitespace"; }, { "onEditorCreated": "onEditorCreated"; }, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-view-html.component.d.ts:15:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

15     static ɵfac: i0.ɵɵFactoryDeclaration<QuillViewHTMLComponent, never>;
                       ~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill-view-html.component.d.ts:16:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

16     static ɵcmp: i0.ɵɵComponentDeclaration<QuillViewHTMLComponent, "quill-view-html", never, { "content": "content"; "theme": "theme"; "sanitize": "sanitize"; }, {}, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill.module.d.ts:10:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

10     static ɵfac: i0.ɵɵFactoryDeclaration<QuillModule, never>;
                       ~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill.module.d.ts:11:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

11     static ɵmod: i0.ɵɵNgModuleDeclaration<QuillModule, [typeof i1.QuillEditorComponent, typeof i2.QuillViewComponent, typeof i3.QuillViewHTMLComponent], [typeof i4.CommonModule], [typeof i1.QuillEditorComponent, typeof i2.QuillViewComponent, typeof i3.QuillViewHTMLComponent]>;
                       ~~~~~~~~~~~~~~~~~~~~~
../../../../../node_modules/ngx-quill/lib/quill.module.d.ts:12:21 - error TS2694: Namespace '"/Users/dreamer/Code/bharti-automation/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

12     static ɵinj: i0.ɵɵInjectorDeclaration<QuillModule>;
                       ~~~~~~~~~~~~~~~~~~~~~

===================================
Dependencies Versions =>

«dependencies»: {
«@angular/animations»: «~11.2.12»,
«@angular/common»: «~11.2.12»,
«@angular/compiler»: «~11.2.12»,
«@angular/core»: «~11.2.12»,
«@angular/forms»: «~11.2.12»,
«@angular/platform-browser»: «~11.2.12»,
«@angular/platform-browser-dynamic»: «~11.2.12»,
«@angular/router»: «~11.2.12»,
«@ng-bootstrap/ng-bootstrap»: «^9.1.2»,
«@types/quill»: «^1.3.10»,
«angular-crumbs»: «^3.0.1»,
«bootstrap»: «^5.0.1»,
«imagesloaded»: «^4.1.4»,
«jquery»: «^3.6.0»,
«magnific-popup»: «^1.1.0»,
«masonry-layout»: «^4.2.2»,
«ng-circle-progress»: «^1.6.0»,
«ng-masonry-grid»: «^1.3.0»,
«ngx-countup»: «^7.3.3»,
«ngx-owl-carousel-o»: «^6.0.0»,
«ngx-pagination»: «^5.1.1»,
«ngx-quill»: «^16.1.1»,
«ngx-useful-swiper»: «^10.0.1»,
«quill»: «^1.3.7»,
«rxjs»: «~6.6.0»,
«swiper»: «^6.7.0»,
«tslib»: «^2.0.0»,
«zone.js»: «~0.11.3»
}

Hi,

In new projects, I have a this error:

core.mjs:6449 ERROR TypeError: (0 , tslib__WEBPACK_IMPORTED_MODULE_2__.__awaiter) is not a function
    at ngx-quill.mjs:47:44
    at Observable._subscribe (defer.js:5:18)
    at Observable._trySubscribe (Observable.js:37:1)
    at Observable.js:31:1
    at errorContext (errorContext.js:19:1)
    at Observable.subscribe (Observable.js:22:21)
    at share.js:58:21
    at SafeSubscriber.<anonymous> (lift.js:10:1)
    at Observable.js:26:1
    at errorContext (errorContext.js:19:1)

Old projects work well.

My ts.config.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "types": ["google.maps"],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "tslib": ["./node_modules/tslib/tslib.d.ts"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

My package.json:

{
  "name": "...",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.2",
    "@angular/cdk": "^12.2.12",
    "@angular/common": "~13.1.2",
    "@angular/compiler": "~13.1.2",
    "@angular/core": "~13.1.2",
    "@angular/forms": "~13.1.2",
    "@angular/localize": "^13.1.2",
    "@angular/material": "^12.2.12",
    "@angular/platform-browser": "~13.1.2",
    "@angular/platform-browser-dynamic": "~13.1.2",
    "@angular/router": "~13.1.2",
    "@angular/service-worker": "~13.1.2",
    "ngx-quill": "^16.0.1",
    "quill": "^1.3.7",
    "rxjs": "^7.4.0",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.3",
    "@angular/cli": "~13.1.3",
    "@angular/compiler-cli": "~13.1.2",
    "@angular/language-service": "~13.1.2",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@types/quill": "^1.3.7",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.5.4"
  }
}

My app.module.ts:

...
import { QuillModule } from 'ngx-quill'


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    routing,
    QuillModule.forRoot()
  ],
  declarations: [
		..
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

I am using

"ngx-quill": "^9.2.0",
 "quill": "^2.0.0-dev.4",
 "quill-better-table": "^1.2.10",
 "quill-blot-formatter": "^1.0.5",
 "quill-delta-to-html": "^0.12.0",

Angular version

Angular CLI: 8.3.29
      Node: 14.18.1
      Angular: 8.2.14

used QuillModule in library module for lazy loading.

import: [
    QuillModule.forRoot()
]

when I try to take build of my application I am getting the following issue.
ERROR in Error during template compile of ‘RequisitionModule’
Function calls are not supported in decorators but ‘QuillModule’ was called.

Could anyone help me to sort out this issue? please

I have been using this p[ackage for a project and it has been super helpful. I wanted to integrate the ability to detect as a user types in a URL but I am unable to do so. I tried using quill magic URL but it does not provide typings and I could not use it with ngx-quill. Is there a way to do so if I have missed the documentation?

I wanted to know if there is any way we can add some labels.
For example when a user hovers on B button for bold he/she should see a bold tooltip.
Or B(Bold) something like that.

I have already read all of the content of the following related Issues: #91 and #57.

Error:

When running dev:ssr i get the following error:
ReferenceError: document is not defined

Solutions from above mentioned issues did not help as following.

Code i need to implement

I need to implement the following code to add icons to my custom «undo» and «redo» actions.

const isBrowser = isPlatformBrowser( platformId );
if ( isBrowser ) {
    const icons = Quill.import( 'ui/icons' );
    icons[ 'undo' ] = quillUndoIcon;
    icons[ 'redo' ] = quillRedoIcon;
}

Mocked «document» global in server.ts (not helping)

i have tried mocking the document with domino, but somehow its still saying document is not defined..

const template = fs
  .readFileSync( path.join( join( process.cwd(), 'dist/lebenslauf-generator/browser' ), 'index.html' ) )
  .toString();

// Shim for the global window and document objects.
const window = domino.createWindow( template );
global[ 'window' ] = window;
global[ 'document' ] = window.document;

Usage of quill with require

I have also tried avoiding the quill import by requiring Quill in an if isBrowser statement:

  const Quill = require( 'quill' );
  const icons = Quill.import( 'ui/icons' );
  icons[ 'undo' ] = quillUndoIcon;
  icons[ 'redo' ] = quillRedoIcon;

while this resolved the error on compilation, it broke quill on the client.

What next?

So should i mock a quill component somehow? How would i do that? Could you provide a mocked version for the server or something?

Also i dont quite understand: We would mock the ngx-quill component but i dont think this would fix the problem which is caused by the following import:
import Quill from 'quill';

I get the following error on the browser console whenever I try to perform a new Delta()

core.js:6479 ERROR TypeError: quill__WEBPACK_IMPORTED_MODULE_0__.Delta is not a constructor at AppComponent.clickDoDelta (app.component.ts:15) at AppComponent_Template_button_click_3_listener (app.component.html:5)

I have been trying to figure out why but no luck for the past 12 hours. Any suggestions:

To re-create the issue, the code is as follows:

import { Component } from '@angular/core';
import {Delta} from 'quill';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor() {
  }

  clickDoDelta() {
    const delta = new Delta().insert('hi there');
  }
}

The template is as follows. The editor itself appears.

<h1>Test Delta with ngx-quill</h1>

<quill-editor></quill-editor>

<button type="button" (click)="clickDoDelta()">Do a Delta</button>

And the versioning information is:

% npm ls | grep -i quill
├── @types/quill@1.3.10
├── ngx-quill@14.2.0
├── quill-delta@3.6.3
% ng version

Angular CLI: 12.2.2
Node: 12.17.0
Package Manager: npm 7.15.0
OS: darwin x64

Angular: 12.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.2
@angular-devkit/build-angular   12.2.2
@angular-devkit/core            12.2.2
@angular-devkit/schematics      12.2.2
@angular/cli                    12.2.2
@schematics/angular             12.2.2
rxjs                            6.6.7
typescript                      4.3.5

I register a custom font size list via the following.

In angular module.

QuillModule.forRoot({ customOptions: [ { import: 'attributors/style/size', whitelist: FontSizeList } ] }),

In angular component

readonly modules = { toolbar: [ [{ 'size': FontSizeList }], ] };

The font size list

export const FontSizeList: string[] = ['10px', '12px', '14px', '16px'];

But the font size option in the list cannot be applied the quill content

If I downgrade the ngx-quill to 14.0.0, it works again. So I guess there are some bugs relating to this feature in version 15.0.0

Btw, my quill version is 1.3.7.

Hello,

The maxLength attribute, doesn’t it prevent the user from continuing to type? what it only does is indicate in the form control that it is invalid, right?

If so, is there a way to get it to continue typing without having to use onContentChanged?

Thank you and best regards.

Upgraded to latest version 9.2.0 and getting error during build.

Compiling ngx-quill : es2015 as esm2015

ERROR in node_modules/ngx-quill/src/quill-editor.component.d.ts:3:17 - error TS2614: Module '"C:/Users/pedro/Documents/Development/ussi/e-solutions/node_modules/@types/quill"' has no exported member 'Delta'. Did you mean to use 'import Delta from "C:/Users/pedro/Documents/Development/ussi/e-solutions/node_modules/@types/quill"' instead?

3 import Quill, { Delta } from 'quill';

YSFKBDY

I am using Quill Editor Component in my Angular project. And I want to drop some texts to the editor. While dropping, editor loses focus, so getSelection() is always null for me. Because of that, I want to drop text to mouse’s cursor position.

How can I do that?

When I enter some code in the code block of the quill editor, it renders in the browser as a string. Though it looks ok, but I am unable to apply some styles to the view. When code is displayed in the browser, ngx-quill puts the starting and ending tags in a span with class «hljs-name». But for me, when I am entering some code, it is not putting them in the .hljs-name span. Instead, it is rendered as a string like,

lorien

Hello guys. Please, do you have any ideas why such thing happen?

How to Reproduce

Write ten lines, one char per line. Click «Save» button.
Reload page. Reload page. Keep reloading until you see the bug.
I am referring here to our UI which we use to edit a message. By each reloading the page we just load the editor component with SAME content. Most of times the editor component renders HTML correctly. But some time it fails.

Normal rendering

Invalid rendering

Hi i’m having some difficult for installing your image resizer plugin. I tried what is wrote here but it didn’t work. I also searched for a solution from this repo but i couldn’t find anything. Could give me some help installing the new plugin?

depperm

Neither the quill-editor or quill-view display anything.

angular v11
ngx-quill v13

package.json

"dependencies": {
  "@angular/common": "11.0.0",
  "@angular/core": "11.0.0",
  "@angular/forms": "11.0.0",
  "@angular/platform-browser": "11.0.0",
  "ngx-quill": "13.0.0",
  "rxjs": "6.3.3",
  ...
"devDependencies": {
  ...
  "quill": "^1.3.7"

style.scss

@import '~quill/dist/quill.core.css';
...

app.module.ts

imports: [
  ...
  QuillModule.forRoot()

my-component.html

<p>{{faq.answer}}</p>
<quill-view [content]="faq.answer"></quill-view>
<quill-editor [(ngModel)]="faq.answer"></quill-editor>

The quill-editor has a maxLength attribute but does quill-view have a similar attribute? I would like to display a limit of 50 characters.

Thanks!

Big shout out to KillerCodeMonkey for his amazing work!

I have issues regarding displaying quill in an Angular 11 project.

I have the following packages installed (ctrl + f in my package-lock.json file)
@types/quill: 1.3.10
ngx-quill: 13.2.0
quill: 1.3.7
quill-delta: 3.6.3

I have imported QuillModule.forRoot() in my app.module.ts, and used quill in my html with the default html from the example repo (ngx-quill-example):
<quill-editor [styles]=»{height: ‘200px’}» (onFocus)=»focus($event)» (onEditorChanged)=»changedEditor($event)»
(onBlur)=»blur($event)» (onEditorCreated)=»created($event)»>

The events do not fire at all, and the DOM only contains this:

The height and width are both set to 100%.

The stylings are added in styles.scss, as in the documentation.

Neimhin

This might be a noob question, I’m still wrapping my head around both quill and ngx-quill.

I haven’t figured out how to access the full quill API when using the <quill-editor> component. I’m using @ViewChild to get a reference to the quill-editor component and it has all the functions documented in your README etc. but I can’t find a way to use any of the functions documented in the QuillJS API. In particular I’d like to be able to use the .getLines() method rather than manually parsing the [(ngModel)]‘d html description of the contents. .getLines() is a lot more convenient in my use case because I need to know where the line breaks are.

What would your method be for accessing the native QuillJS API?

Источник

Issue

Solution

Angular structure loaded both synchronously and asynchronously when adding primeng tableModule

Questions : Angular structure loaded both synchronously and asynchronously when adding primeng tableModule

Answers 1 : of Angular structure loaded both synchronously and asynchronously when adding primeng tableModule

11 ответов

1: неправильный импорт библиотеки

2: отсутствующие зависимости

3 : enableIvy: true

=================================== Dependencies Versions =>

Error:

Code i need to implement

Mocked «document» global in server.ts (not helping)

Usage of quill with require

What next?

How to Reproduce

Normal rendering

Invalid rendering

3 : `enableIvy: true`

===================================
Dependencies Versions =>