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

アプリケーションの開発者に使用を強制したい []{{}}要素属性ではなく。 たとえば、次のコードではエラーが発生するはずです（build / serve / lint時間で）： <mycomponent id="{{i}}"> 現在のコードは <mycomponent [id]="i"> どうすればいいですか？

9 angular 

私のプロジェクトには6つの重大度の高い脆弱性があり、それらを修正する方法がわかりません。npm監査修正が失敗します。これを修正するのを手伝ってください。 プロジェクトにhttps://www.npmjs.com/package/toastrをインストールしていたところ、インストール後に脆弱性が表示されました。何か繋がりがあるのか​​わかりません。=== npm監査セキュリティレポート=== Manual Review Some vulnerabilities require your attention to resolve Visit https://go.npm.me/audit-guide for additional guidance High Machine-In-The-Middle Package https-proxy-agent Patched in >=3.0.0 Dependency of @angular/cli [dev] Path @angular/cli > @schematics/update > pacote > make-fetch-happen > https-proxy-agent More info https://npmjs.com/advisories/1184 High Machine-In-The-Middle Package https-proxy-agent Patched in >=3.0.0 Dependency of …

9 angular  npm 

Angularアプリケーション内では、プレーンD3またはVegaのいずれかを介してD3ビジュアルを実行します。SCSSスタイリングも進行中です。 JavaScriptとSCSSからのスタイル設定で同じグローバル変数を参照できるようにしたいと思います。JSONファイルは、単純なimportステートメントを通じてTypescriptにロードする設定を保存するのに非常に役立ちます。しかし、SCSSから同じようにするにはどうすればよいですか？ node-sass-json-importer 良い候補のようですが、Angular 9 CLIアプリケーションに追加することは私には明らかではありません。 このStackOverflowの投稿はしばらく前にトピックについてブラッシュアップしましたが、node_modules持続可能性がほとんどないリソースの変更が含まれていました。 元のドキュメントには、Angular以外のアプリでWebpackをいかに調整するかについてのいくつかの入力もあります。これをCLI経由で構築されたAngularアプリに関連付ける方法がわかりません。 Webpack / sass-loader Blockquote Webpack v1 import jsonImporter from 'node-sass-json-importer'; // Webpack config export default { module: { loaders: [{ test: /\.scss$/, loaders: ["style", "css", "sass"] }], }, // Apply the JSON importer via sass-loader's options. sassLoader: { importer: jsonImporter() } }; …

8 json  angular  sass  angular9  node-sass-json-importer 

親コンポーネントと子コンポーネントがあります。モーダルコンポーネントとして作成された子コンポーネント。だから私は親コンポーネント内に子コンポーネントセレクターを含め、ビューのカプセル化をなしに設定したので、親コンポーネントのCSSとすべてを取ってそれも機能しますが、親コンポーネントはいくつかのサードパーティ（rappidjs）ライブラリcssを適用する#paper idを持っていますSVGダイアグラム）。子コンポーネントと同じように#dataMapper idがあります。ただし、子コンポーネントがに設定されているため、ここではサードパーティのcssは使用していません'encapsulation: ViewEncapsulation.None'。削除するencapsulation: ViewEncapsulation.Noneと機能しますが、モーダルは機能しません。onclickの代わりにすべてのモーダルがロードされます。この問題の解決方法を教えてください。 コーディング： 親コンポーネントTS @Component({ selector: 'app-data-model', templateUrl: './data-model.component.html', styleUrls: ['./data-model.component.css'] }) export class DataModelComponent implements OnInit{ // Modal openModal(id: string) { this.modalApp = true; this.modalService.open(id); } closeModal(id: string) { this.modalService.close(id); } 親コンポーネントHTML <div id="toolbar"> <div class="tool-bar-section"> <button class="btn" (click)="openModal('custom-modal-1');"><i class="fa fa-file-excel-o" style="font-size: 24px"></i></button> </div> </div> <div …

8 javascript  angular 

1週間前、私はGoogle Chromeコンソールに警告メッセージを表示し始めたと思います。 キャッシュをクリアしても何も変わりません。メッセージはシークレットモードでのみ表示されます。 これらの警告を取り除く方法はありますか？

8 javascript  angular  google-chrome 

プロジェクトをAngular 9にアップグレードしました。最初に気付いたのは、CIでビルド時間が大幅に増加したことです（2分から4分に）。 ログを分析すると、テストまたはビルドが実行されるたびに、CLIがプリコンパイルを実行します。これは新しいIvyアーキテクチャが原因ですが、私の理解から、このコンパイルはIvy互換でないコードでのみ発生するはずです。 それでCompiling @angular/common : es2015 as esm2015、ビルドに多くの（主に@angularパッケージから）が表示されるのはなぜですか？Angularコード自体はIvyと互換性があってはいけませんか？ 注：これは新しいプロジェクトでも発生します（ライブラリが少ない場合のみ）。 更新 これは、ビルドが必要なすべてのコマンドで発生します。例： ng test --code-coverage=true --watch=false --browsers=ChromeHeadle ng b -c=staging --aot アップデート2 私は私は比較のためにビルドを追加している：角度事前9とした後、角9移行（ビルドはまだ失敗が、私たちは〜に〜2分で、合計実行の4分を基準にユニットテストを使用することができます）

8 angular  typescript  ecmascript-6  angular-cli  angular9 

私はフルスタックのWeb開発者であり、現在は主に角のようなフロントエンドフレームワークとスプリングブートのようなバックエンドフレームワークを使用して単一ページアプリを構築しています。 通常、私のWebアプリの設計（CRUDだとしましょう）は次のとおりです。更新ページにいて、エンティティを更新するとします。次に、データベース内のエンティティを更新するリクエストがバックエンドに送信されます。バックエンドが応答してすべてが問題ないことを通知すると、エンティティは更新されました（ステータスコード200）次のページに進みます。これはentityName/{id}、エンティティのIDをURLを介して次のページに渡す場所など、URLを含む読み取りページです。次に、読み取りページでそのIDを取得し、バックエンドにリクエストを送信し、エンティティデータを取得して表示します。 この問題は、ユーザーがインターネットへの接続を失ったときに発生するため、バックエンドへのリクエストを実行できず、その結果、データをUIに表示したり、更新したりできません。 他のデザインはこれです：私は更新ページにいて、エンティティを更新します。リクエストはバックエンドに対して行われますが、状態もクライアント側で保持されています。したがって、接続が失われたとしましょう。読み取りページに移動して、更新されたエンティティを表示できます。さらに、状態/データはクライアント側に保持されるため、エンティティがクライアント側に存在するため、IDからエンティティを取得するためにバックエンドに2番目のリクエストを行う必要はありません。ユーザーがアプリに費やした時間の間に接続が回復し、更新要求がサーバーに対して行われ、データベースとクライアント側のデータが同期されます。 UIは、バックエンドに送信された情報を表示するための要求にあまり依存しないため、2番目の方法の方がユーザーにとって便利であるように思えます。 最初のアプローチが使用されていることはよく知っています。私はこのように開発しているので、私の質問は次のとおりです。最初の設計から2番目の設計に移行することは可能ですか。 2番目の設計を実装するには、サービスを使用してコンポーネント間でデータを共有します（angularで実装する場合）。このようにして、アプリの状態をクライアント側で保持できます。しかし、もっと良い方法があるかもしれません。アプリケーションの状態を管理するNgRxライブラリについて聞いたことがあります。クライアント側でアプリケーションの状態を管理するのに正しい方法ですか？ また、接続が失われたときに作成できなかった要求が、接続が戻ったときに作成されることを確認するという2番目の問題もあります。そして私は疑問に思います：接続が戻ったときに要求をキューに入れて再実行できるツールを使用することは可能ですか？プログレッシブウェブアプリとService Workerの概念はありますが（Service Workerを使用してサーバーと交換されるデータをキャッシュできることを知っているような）概念しかありません。それがこの問題を解決する方法かどうか疑問に思いますか？ 私の投稿に対するあなたのコメントを待っています。それが長すぎないことを願っています。前もって感謝します。

8 angular  web  progressive-web-apps  ngrx 

これが私の問題です。 問題のオンライン例 フォームに変換する必要がある動的JSONがあります。そこで、リアクティブフォームを使用し、JSONのすべてのプロパティを確認することで、FormGroupまたはFormControlを次のように作成しました。 sampleJson ={prop1:"value1", prop2: "value2",...} ... myForm: FormGroup; myKeys=[]; ... ngOnInit() { this.myForm = this.getFormGroupControls(this.sampleJson, this.myKeys); } getFormGroupControls(json:any,keys): FormGroup{ let controls = {}; let value = {}; for (let key in json) { if (json.hasOwnProperty(key)) { value = json[key]; if (value instanceof Object && value.constructor === Object) { …

8 angular  angular-reactive-forms 

角度バージョン： @angular-devkit/architect 0.803.22 @angular-devkit/build-angular 0.803.22 @angular-devkit/build-optimizer 0.803.22 @angular-devkit/build-webpack 0.803.22 @angular-devkit/core 8.3.22 @angular-devkit/schematics 8.3.22 @angular/cli 8.3.22 @angular/fire 5.3.0 @ngtools/webpack 8.3.22 @schematics/angular 8.3.22 @schematics/update 0.803.22 rxjs 6.4.0 typescript 3.5.3 webpack 4.39.2 1.「サーバーエラー」とは 証明書の有効期限が切れていますか？ 2.どうすれば修正できますか？ ~~~~ EDIT ~~~~ ハードドライブを消去して、新しいオペレーティングシステムをインストールしました。まだ動かない。 angular / angularfire gitページで問題を開きました：https : //github.com/angular/angularfire/issues/2285 angular / fireパッケージが見つかりました。JSONは、Firebaseツールが7.12.1までの場合にFirebaseツール6.10.0を使用します。 GitHubでの@wSedlacekの提案。うまくいきませんでした。 この問題が発生する前にシステム時間を変更しましたが、問題は解決しましたが、プロジェクトを開始するたびにシステム時間を2020年1月4日に戻すのはわずかな不便なので、問題はまだ修正されていません。 @wSedlacekは、package.jsonの古いバージョンのfirebase-toolsが原因でHTTPS証明書が期限切れになることを発見しました。jsonには、2020年1月5日に期限切れになる証明書がありました。 この問題は同時に発生し始めたため、関連している可能性があります： なぜFirebaseツールで私がログインしていると表示されているにもかかわらず、角度のある火がログインしていないと表示されるのですか？ …

8 angular  firebase 

elementrefにコンポーネントを子として追加し、そのプロパティにアクセスしたい。 const element: HTMLElement = document.createElement('div'); element.innerHTML = // Component needs to be added here // Need to have access to properties of the Component here プロジェクトにフルカレンダーを追加しました。タイムラインでは、カスタムリソース要素を追加する必要があります。このため、HTMLElementと一部のデータにのみアクセスできます。だから私がしたいのは、初期化されたコンポーネントをHTMLElementに渡すことです。 現在、私の唯一のオプションは、HTMLを文字列として書き込み、それをinnerHTMLに渡すことです。より良いオプションはありますか？

8 angular 

コンポーネントは次のように定義されています： import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { } 「app.component.html」ではなく、特定のコンポーネントを、「htm.app.component.htm」という拡張子の付いたファイルでロードしたい @Component({ selector: 'app-root', templateUrl: './app.component.htm', styleUrls: ['./app.component.less'] }) なんらかの理由で機能しません： ERROR in ./app.component.htm 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. <p> …

8 angular  angular-cli 

ポップアップを表示するシンプルなフレームワークがあるとしましょう： @Component( selector: 'popup-host', template: ''' <div class="popup-container"> <ng-template #popupRef></ng-template> </div> ''', styles: ['.popup-container { position: absolute; top: 100; left: 100; z-index: 100; }'], ) class PopupContainerComponent { final PopupController _controller; final ComponentLoader _loader; PopupContainerComponent(this._controller, this._loader); void ngOnInit() { _controller.container = this; } @ViewChild('popupRef', read: ComponentRef) ComponentRef popupRef; void render(PopupConfig …

8 angular  typescript  ecmascript-6  angular-dart 

この記事では、 アイビーは、しかし、将来のためのいくつかの可能性を開きます。これで、zone.jsなしでアプリケーションを実行し、変更の検出を半手動で処理できるようになります（Reactの場合と少し似ています）。これらのAPIはすでに存在しますが、実験的なものであり、文書化されておらず、おそらく近い将来変更される予定です。 Ivyの前にzone.jsなしでアプリケーションを実行することはすでに可能であったと思います。Ivyは変更の検出を半手動で処理できますか？それらの実験的なAPIはどこにありますか？ドキュメントはありますか？Ivyは引き続きzone.jsを使用していますか？ 私の目標は、変更の検出を手動でトリガーして、変更の検出を最小限に抑えることです。それを行うための最良のオプションは何ですか。具体的には、Ivyを使用する場合の最良のオプションは何ですか。

8 angular  angular2-changedetection  zone  angular-ivy 

タグに「Unfreeze」というテキストのボタンがあります。ボタンをクリックすると「フリーズ」に切り替わります。ここにnyコードがあります： <a class="btn btn-primary full-width" (click)="clickFreeze($event)"> <i class="fa fa-plus-circle"></i>Unfreeze</a> private clickFreeze(event) { console.log("event.srcElement.childNodes[1].textContent", event.srcElement.childNodes[1].textContent); if(event.srcElement.childNodes[1].textContent =='Unfreeze'){ event.srcElement.innerText="Freeze and Save"; } else if(event.srcElement.innerText =='Freeze and Save'){ event.srcElement.innerText="Unfreeze"; } } 何らかの理由で機能しません。 event.srcElement.childNodes[1].textContentコンソールにすると「Unfreeze」に等しくなりますが、ifループに入りません。

8 javascript  html  angular 

エミュレーターまたはデバイスでIonic 4アプリを実行しているときに、構成フラグとlivereloadフラグの両方を使用すると問題が発生するようです。ここのドキュメントに従って環境をセットアップしました：https : //ionicframework.com/docs/cli/commands/cordova-run そしてここ： https://ionicframework.com/docs/appflow/quickstart/environment このcliコマンドは、環境を正しく設定します。 ionic cordova emulate android --configuration=qa そして、これはlivereloadで正しく実行されます： ionic cordova emulate android --livereload しかし、フラグを組み合わせようとすると、次のようになります。 ionic cordova emulate android --livereload --configuration=qa エラーが発生しました：データパス ""に追加のプロパティ（browserTarget）を含めないでください。 それが役立つ場合、これは私のイオン情報です、どんな洞察もいただければ幸いです： Ionic: Ionic CLI : 5.4.2 Ionic Framework : @ionic/angular 4.11.0 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0 …

8 angular  ionic4