タグ付けされた質問 「angular」

Ionic 4アプリケーションを次の2つのコマンドでアップグレードしました。 # Upgrading to Ionic 5 npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save # Upgrading to Angular 9 ng update @angular/core @angular/cli そして私がそうしたとき、私はionic serveこのエラーを受け取り始めました： > ng run app:serve --host=localhost --port=8100 [ng] chunk {} 0.js, 0.js.map () 22.1 kB [rendered] [ng] chunk {common} common.js, common.js.map (common) 25.7 kB [rendered] [ng] [ng] ERROR …

11 node.js  angular  typescript  ionic-framework 

私が最近取り組んでいるAngular 8プロジェクト（ノードv10.16.0）でこのエラーが発生し始めました。npm update caniuse-lite browserslistを実行しても何も起こらなかった そのため、package-lock.jsonを削除し、node_modulesを削除してnpm installを実行しましたが、browserlistファイルがなくなっています。ng buildを実行すると、同じメッセージが表示されます：Browserslist：caniuse-lite is時代遅れです。次のコマンドを実行してくださいnpm update 同じトピックに関するこの投稿を参照： Browserslist：caniuse-lite is時代遅れ。次のコマンド「npm update caniuse-lite browserslist」を実行してください。 ただし、WebCompilerとautoprefixerについて話しているので、私はそれらを知りません。ご案内ください

11 angular  npm-install 

更新のスタックトレースを変更すると、常にに戻りglobalZoneAwareCallbackます。どのようにして変更のきっかけを見つけましたか？ デバッグに関しては、明確な図を用意しておくとよいでしょう。

11 angular  debugging  angular-ngzone 

次のコード this.afAuth.auth.signInWithPopup（new auth.GoogleAuthProvider（）） がChromeでこの警告を生成しています： http://google.com/のリソースに関連付けられたCookie が設定されましたSameSite=Noneが、設定されていませんSecure。Chromeの将来のリリースでは、とが設定されている場合にのみ、クロスサイトリクエストでCookieを配信SameSite=NoneしSecureます。

11 angular  firebase  google-chrome  firebase-authentication 

先週、私はRxJSに答えました 質問「特定の副作用ごとにサブスクリプションを作成するべきか、それともサブスクリプションを最小限に抑えるべきか」について、別のコミュニティメンバーと話し合いました。完全なリアクティブアプリケーションアプローチの観点からどの方法を使用するか、またはいつ切り替えるかを知りたい。これは私とおそらく他の人たちが不必要な議論を避けるのに役立ちます。 セットアップ情報 すべての例はTypeScriptにあります サブスクリプションのライフサイクル/コンストラクターの使用に関する質問に焦点を当てず、フレームワークを無関係に保つ 想像してみてください：サブスクリプションはコンストラクター/ライフサイクルの初期化で追加されます 想像してみてください：登録解除はライフサイクル破棄で行われます 副作用とは（角度サンプル） UIでの更新/入力（例 value$ | async） コンポーネントの出力/アップストリーム（例@Output event = event$） 異なる階層の異なるサービス間の相互作用 使用例： 2つの機能： foo: () => void; bar: (arg: any) => void 2つのソースオブザーバブル： http$: Observable<any>; click$: Observable<void> fooがhttp$発行された後に呼び出され、値は必要ありません barclick$エミット後に呼び出されますが、現在の値が必要ですhttp$ ケース：特定の副作用ごとにサブスクリプションを作成する const foo$ = http$.pipe( mapTo(void 0) ); const bar$ = http$.pipe( switchMap(httpValue => click$.pipe( …

10 javascript  angular  typescript  rxjs  reactive-programming 

これが私の最初のJSON配列フォーマットです。 this.columnNames = [ {field : "Name"}, {field : "Address"}, {field : "Age"} ]; これが私の最初のJSON配列フォーマットです。 this.rowData = [ {Name : "Praveen",Address : "aiff",Age : "12",w : "1",e : "8"}, {Name : "Akashay",Address : "xvn",Age : "15",w : "2",e : "7"}, {Name : "Bala",Address : "hjk",Age : "16",w : "3",e : …

10 arrays  angular  comparison 

これらのバージョンを使用する2つのAngularプロジェクトがあります。 9.0.0-next.6 8.1.0 バージョン9では、これを使用してwindowオブジェクトを提供および注入しました。 @NgModule({ providers: [ { provide: Window, useValue: window }, ] }) export class TestComponent implements OnInit { constructor(@Inject(Window) private window: Window) } それはうまくいきます。 このアプローチをバージョン8に適用すると、コンパイル中に警告とエラーがスローされました。 警告：TestComponentのすべてのパラメーターを解決できません… 私はこのように単一引用符を使用してそれを解決しました： @NgModule({ providers: [ { provide: 'Window', useValue: window }, ] }) export class TestComponent implements OnInit { constructor(@Inject('Window') private window: …

10 javascript  angular  typescript  dependency-injection  angular8 

Uncaught TypeError：t.rgbは関数ではありません Angularアプリケーションを作成してビルドし、それを提供しようとしています $ ng serve --prod --aot これにより、コンソールで次のエラーが発生します Uncaught TypeError: t.rgb is not a function at HO (color.js.pre-build-optimizer.js:227) at GO (color.js.pre-build-optimizer.js:232) at rgb.js.pre-build-optimizer.js:36 at RH (ramp.js.pre-build-optimizer.js:4) at Module.zUnb (BrBG.js.pre-build-optimizer.js:16) at f (bootstrap:78) at Object.0 (index.js.pre-build-optimizer.js:26) at f (bootstrap:78) at t (bootstrap:45) at Array.r [as push] (bootstrap:32) アプリケーションが表示されない --prodフラグ（フラグ）を縮小しないでアプリケーションをビルドすると、機能します。 D3を使用しているときにのみこの問題が発生します …

10 javascript  angular  d3.js 

flex-layoutをAngularアプリに追加しようとしていますが、追加して使用しようとすると、アプリが壊れます。インストールしました npm i @angular/flex-layout @angular/cdk 次にapp.module.tsにインポートされます import { FlexLayoutModule } from '@angular/flex-layout'; import [ FlexLayoutModule ] typescriptも最新にアップグレードしました npm i typescript@latest しかし、アプリをコンパイルしようとすると、あらゆる種類のエラーが発生します。 ERROR in node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:24:19 - error TS1086: An accessor cannot be declared in an ambient context. 24 protected get parentElement(): HTMLElement | null; ~~~~~~~~~~~~~ node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:26:19 - error TS1086: An accessor …

10 angular  angular-flex-layout 

Angular要素を作成するときにAngular9でVSCode（1.44.0-insider）に奇妙な警告が出ます： export class AppModule { constructor(private injector: Injector) { const helloElement = createCustomElement(HelloComponent, {injector}); customElements.define('my-hello', helloElement); } ngDoBootstrap() {} } のタイプhelloElementは受け入れられず、typescriptからのエラーメッセージが表示されます。 タイプ「NgElementConstructor」の引数は、タイプ「CustomElementConstructor」のパラメーターに割り当てることができません

9 angular  visual-studio-code  angular-elements 

Angular 9以降は使用できます $localize`Hello ${name}:name:` typescriptコードのi18nの場合。ng xi18nコマンドは文字列を検出しないため、これにはまだいくつかの制限がありますが、これらのテキストが翻訳ファイルに手動で追加された場合は機能します。 $localize機能は非常によくで文書化されたソースでJSDocのしかし、それは複数形で作業する方法については説明しません。私が意味するのは次のようなものです（疑似コード）： $localize`Hello {${count}, plural, =1 {reader} other {readers}}` これは可能$localizeですか？はいの場合：方法は？いいえの場合：Angularはこのような式をHTMLからTypeScriptにどのようにコンパイルしますか？

9 angular  angular-i18n 

100ms間隔でコメントを「遅延読み込み」するコンポーネントがあります。 setTimeoutを使用すると、実際に遅延します。 成分 <div *ngFor="let post of posts"> <app-post [post]="post" ></app-post> </div> これにより、アプリケーションが遅くなります（平均fps 14、アイドル時間51100ms）： while(this.postService.hasPosts()){ setTimeout(()=> { this.posts.push(this.postService.next(10)); },100); } これにより、アプリケーションがスムーズになります（平均fps 35、アイドル時間40800ms） while(this.postService.hasPosts()){ timer(100).subscribe(()=> { this.posts.push(this.postService.next(10)); }); } 説明はありますか、なぜrxjsタイマーがはるかにうまく機能するのですか？ 私はFirefoxでランタイム分析を行いました。最初の例では、フレームレートは14 fpsに下がります。他の例では、35 fpsになります。 アイドル時間も20％短くなります。 この方法はさらにスムーズです（平均fps 45、アイドル時間13500ms）： interval(100).pipe(takeWhile(this.postService.hasPosts()).subscribe(()=> { this.posts.push(this.postService.next(10)); }); }

9 javascript  angular  typescript  rxjs 

node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts：191：9のエラー-エラーTS1086：アンサーコンテキストでアクセサーを宣言できません。 191 set ngbPanelToggle（panel：NgbPanel）; ~~~~~~~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/checkbox.d.ts：28：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 28フォーカスを設定（isFocused：boolean）; ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：14：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 14 get disabled（）：ブール値。~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：15：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 15無効に設定（isDisabled：ブール）; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：61：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 61設定値（値：任意）; ~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：65：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 65無効に設定（isDisabled：ブール）; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：66：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 66フォーカスを設定（isFocused：ブール）; ~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：67：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 67 check（）を取得します：ブール値。~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：68：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 68 get disabled（）：ブール値。~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：69：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 69 get value（）：any; ~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts：70：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 70 get nameAttr（）：string; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts：42：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 42セット間隔（値：数値）; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts：43：9-エラーTS1086：アクセサはアンビエントコンテキストで宣言できません。 43 get interval（）：number; ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts：47：9-エラーTS1086：アクセサーはアンビエントコンテキストで宣言できません。 …

9 angular  bootstrap-4  ng-bootstrap 

Ionic 4からIonic 5にアップグレードしたら、次のエラーが発生します。 src / app / app.component.ts（4,10）のエラー：エラーTS2305：モジュール '"/ node_modules / @ ionic / angular / ionic-angular"'にはエクスポートされたメンバー 'Events'がありません。 次のインポート行が問題の原因です。 import { Events, Platform } from '@ionic/angular'; @ionic/angularIonic 5のエラーからメンバーイベントを修正するにはどうすればよいですか？

9 angular  ionic-framework  ionic5 

ngx-datatableを使用して再利用可能なデータテーブルを作成しています。動的コンポーネントを行の詳細の内部にレンダリングしたいと思います。データテーブルコンポーネントは、親モジュールから引数としてコンポーネントクラスを受け取り、ComponentFactoryを使用してcreateComponentを作成します。動的コンポーネントに対してコンストラクターとonInitメソッドが実行されていることがわかりますが、DOMに接続されていません。 これは、row-detailのデータテーブルhtmlのようになります。 <!-- [Row Detail Template] --> <ngx-datatable-row-detail rowHeight="100" #myDetailRow (toggle)="onDetailToggle($event)"> <ng-template let-row="row" #dynamicPlaceholder let-expanded="expanded" ngx-datatable-row-detail-template> </ng-template> </ngx-datatable-row-detail> <!-- [/Row Detail Template] --> そして、これは私の.tsファイルは次のようになります。 @ViewChild('myDetailRow', {static: true, read: ViewContainerRef}) myDetailRow: ViewContainerRef; @ViewChild('dynamicPlaceholder', {static: true, read: ViewContainerRef}) dynamicPlaceholder: ViewContainerRef; renderDynamicComponent(component) { var componentFactory = this.componentFactoryResolver.resolveComponentFactory(component); var hostViewConRef1 = this.myDetailRow; var hostViewConRef2 …

9 angular  ngx-datatable