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

ヨーロッパ形式を使用して日付を表示したいのですdd/MM/yyyyが、DatePipe shortDate形式を使用すると、米国の日付スタイルのみを使用して表示されますMM/dd/yyyy。 デフォルトのロケールはen_USであると想定しています。ドキュメントにないかもしれませんが、Angular2アプリのデフォルトのロケール設定を変更するにはどうすればよいですか？または、カスタム形式をDatePipeに渡す方法はありますか？

138 javascript  angular  date-pipe 

ng testテストスイート全体ではなく単一のファイルに対して実行する方法はありますか？理想的には、ファイルを編集しているときにできるだけ早くフィードバックループを取得したいのですkarmaが、保存ごとにスイート全体を実行します。これは、十分に大きなテストスイートを構築すると少し遅くなります。 これは、angular-cliで1つのテスト仕様のみを実行する方法とは異なります。その質問は、個々の仕様の実行に関するものです。これは、個々のファイルを実行することです。ソリューションには同じJasmine仕様機能が含まれていますが、質問の性質は少し異なります。

138 angular  jasmine  angular-cli  karma-runner 

私はChrome 70を使用していますが、Chromeはメソッドを追加します.flatMap, .flatten, .flat。したがって、私のコードは期待どおりに実行されます。残念ながら、Typescriptはそれを好みません。 // data.flatMap lint error export const transformData = (data: any[]) => data.flatMap(abc => [ parentObj(abc), ...generateTasks(abc) ]); 私が得た警告は TS2339: Property 'flatMap' does not exist on type 'any[]'. ちなみに私が使用していますAngular 6使用している、Typescript ~2.9.2と私はすでに含まimport 'core-js/es7/array';にpolyfills.ts。 私の推測では、これらのメソッドにはタイピングnpm run -dev @types/array.prototype.flatmapがないため、解決しようとしましたが解決しませんでした。

138 angular  typescript 

Angular 2 rc4からrc6にアップグレードしたところ、問題が発生しました。 コンソールに次のエラーが表示されます。 Unhandled Promise rejection: Template parse errors: 'cl-header' is not a known element: 1. If 'cl-header' is an Angular component, then verify that it is part of this module. 2. If 'cl-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress …

137 angular  karma-jasmine 

をAuthGuard使用するの実装がいくつか見つかりましたtake(1)。私のプロジェクトでは、を使用しましたfirst()。 どちらも同じように機能しますか？ import 'rxjs/add/operator/map'; import 'rxjs/add/operator/first'; import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular/core'; import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AngularFire } from 'angularfire2'; @Injectable() export class AuthGuard implements CanActivate { constructor(private angularFire: AngularFire, private router: Router) { } canActivate(route: ActivatedRouteSnapshot, …

137 angular  rxjs  angular2-observables 

Angularでオブジェクトをコピーしてその参照を失うにはどうすればよいですか？ AngularJSでは、を使用できますangular.copy(object)が、Angularでそれを使用するとエラーが発生します。 例外：ReferenceError：angular定義されていません

136 angular 

Typescriptを使用してAngular 2でWebサイトを開発していますが、thread.sleep(ms)機能を実装する方法があるかどうか疑問に思っていました。 私のユースケースは、数秒後にフォームを送信した後にユーザーをリダイレクトすることです。これは、htmlまたはjavascriptで非常に簡単ですが、Typescriptでそれを行う方法がわかりません。 どうもありがとう、

136 angular  typescript 

Angular CLIでサービスを生成する場合、Injectableデコレーターのデフォルトの「root」を使用して、「provided in」プロパティーで追加のメタデータを追加します。 @Injectable({ providedIn: 'root', }) 正確には提供されますか？これにより、サービスがアプリケーション全体で「グローバル」タイプのシングルトンサービスのように利用可能になると想定していますが、AppModuleのプロバイダー配列でそのようなサービスを宣言する方がきれいではありませんか？ 更新： 他の誰にとっても、特に機能モジュールのみにサービスを提供したい場合は、次の段落でそれについて別の良い説明が提供されました。 @Injectable()新しいprovidedIn 属性を使用して、デコレーター内でプロバイダーを直接登録するための新しい推奨される方法があります。'root'アプリケーションの値または任意のモジュールとして受け入れます。を使用'root'するinjectableと、アプリケーションでシングルトンとして登録され、ルートモジュールのプロバイダーに追加する必要はありません。あなたが使用している場合は同様に、 providedIn: UsersModule、injectableのプロバイダとして登録されているUsersModuleにそれを追加することなく、providersモジュールの「 - 。 https://blog.ninja-squad.com/2018/05/04/what-is-new-angular -6 / 更新2： さらに調査した後、 providedIn: 'root' provideルートモジュール以外のモジュールでサービスを利用したい場合providersは、機能モジュールのデコレーターで配列を使用することをお勧めします。そうしないと、循環依存関係に悩まされることになります。ここで行われる興味深い議論-https://github.com/angular/angular-cli/issues/10170

136 angular  angular6 

私はangular 2で作業していますが、次のようなものが見つかりました <input #searchBox (keyup)="search(searchBox.value)" そしてそれは動作します。 しかし、#searchBoxの意味がわかりません。どちらのドキュメントにも明確な情報は見つかりませんでした。 誰か私にそれがどのように機能するか説明できますか？

135 javascript  html  angular  typescript 

ドキュメントを読みました。使用したい場合はscss、次のコマンドを実行する必要があります。 ng set defaults.styleExt scss しかし、それを実行してそのファイルを作成しても、コンソールにこのエラーが表示されます。 styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)

135 css  angular  sass  angular6  angular-cli 

私は初期化されたシンプルなアプリを持っています angular-cli。 3つのルートに関連するいくつかのページを表示します。3つのコンポーネントがあります。このページのIの使用のいずれかにlodashいくつかのデータを取得するために、角2 HTTPモジュール（RxJS使用してObservableSを、mapとsubscribe）。単純なを使用してこれらの要素を表示します*ngFor。 しかし、私のアプリは本当にシンプルであるにもかかわらず、私は（私の意見では）巨大なバンドルパッケージとマップを取得しています。私はgzipのバージョンについては話しませんが、gzipする前のサイズです。この質問は、一般的な推奨事項の問い合わせです。 一部のテスト結果： ビルド ハッシュ：8efac7d6208adb8641c1時間：10129msチャンク{0} main.bundle.js、main.bundle.map（main）18.7 kB {3} [初期] [レンダリング] チャンク{1} styles.bundle.css、styles.bundle.map、styles.bundle.map（styles）155 kB {4} [初期] [レンダリング] チャンク{2} scripts.bundle.js、scripts.bundle.map（scripts）128 kB {4} [初期] [レンダリング] チャンク{3} vendor.bundle.js、vendor.bundle.map（vendor）3.96 MB [初期] [レンダリング] チャンク{4} inline.bundle.js、inline.bundle.map（inline）0バイト[エントリ] [レンダリング] 待つ：そのような単純なアプリ用の10Mbベンダーバンドルパッケージ？ ng build --prod ハッシュ：09a5f095e33b2980e7cc時間：23455ミリ秒のチャンク{0} main.6273b0f04a07a1c2ad6c.bundle.js、main.6273b0f04a07a1c2ad6c.bundle.map（main）18.3 kB {3} [初期] [レンダリング] チャンク{1} styles.bfdaa4d8a4eb2d0cb019.bundle.css、styles.bfdaa4d8a4eb2d0cb019.bundle.map、styles.bfdaa4d8a4eb2d0cb019.bundle.map（styles）154 kB {4} [初期] チャンク{2} scripts.c5b720a078e5464ec211.bundle.js、scripts.c5b720a078e5464ec211.bundle.map（scripts）128 …

135 angular  webpack  angular-cli 

ディレクティブを含むHTMLを手動でコンパイルしたい。$compileAngular 2の同等のものは何ですか？ たとえば、Angular 1では、HTMLのフラグメントを動的にコンパイルしてDOMに追加できます。 var e = angular.element('<div directive></div>'); element.append(e); $compile(e)($scope);

134 angular  typescript  angular2-compiler  version-compatibility 

AppModule内で作成したコンポーネントを他のモジュールで使用しようとしています。ただし、次のエラーが発生します。 「キャッチされていません（約束されています）：エラー：テンプレート解析エラー： 'contacts-box'は既知の要素ではありません： 「contacts-box」がAngularコンポーネントである場合、それがこのモジュールの一部であることを確認してください。 「contacts-box」がWebコンポーネントの場合は、このコンポーネントの「@ NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを抑制します。 私のプロジェクト構造は非常に単純です： ページをページディレクトリに保存します。各ページは異なるモジュール（customers-moduleなど）に保持され、各モジュールには複数のコンポーネント（customers-list-component、customers-add-componentなど）があります。これらのコンポーネント内で（つまり、customers-add-component内などで）ContactBoxComponentを使用したいと思います。 ご覧のとおり、widgetsディレクトリ内に連絡先ボックスコンポーネントを作成したので、基本的にはAppModule内にあります。ContactBoxComponentインポートをapp.module.tsに追加し、AppModuleの宣言リストに追加しました。それは機能しなかったので、問題をグーグルで調べて、ContactBoxComponentをエクスポートリストにも追加しました。助けにはならなかった。また、ContactBoxComponentをCustomersAddComponentに配置し、次に別のモジュール（異なるモジュールから）に配置しようとしましたが、複数の宣言があるというエラーが発生しました。 何が欠けていますか？

134 angular  typescript  angular-components  angular-module 

2018年5月24日更新：元の投稿から+3バージョンのAngularになりましたが、まだ実行可能な最終的なソリューションはありません。Lars Meijdam（@LarsMeijdam）は、一見の価値のある興味深いアプローチを考え出しました。（プロプライエタリな問題のため、彼は最初にサンプルを投稿したGitHubリポジトリを一時的に削除する必要がありました。ただし、コピーが必要な場合は、直接彼にメッセージを送ることができます。詳細については、以下のコメントを参照してください。） Angular 6の最近のアーキテクチャの変更により、ソリューションに近づくことができます。さらに、Angular Elements（https://angular.io/guide/elements）はいくつかのコンポーネント機能を提供します。 すばらしいAngularチームの誰かがこれに遭遇した場合、この機能に非常に興味を持っている他の多くの人々がいるように見えることに注意してください。バックログを検討する価値があるかもしれません。 私はでプラガブル（プラグイン）フレームワークを実装したいと思いAngular 2、Angular 4、Angular 5、またはAngular 6アプリケーション。 （このプラグイン可能なフレームワークを開発するための私の特定のユースケースは、ミニチュアコンテンツ管理システムを開発する必要があるということです。ここで詳しく説明されていないいくつかの理由によりAngular 2/4/5/6、そのシステムのほとんどのニーズにほぼ完全に適合します。） プラグイン可能なフレームワーク（またはプラグインアーキテクチャ）とは、具体的には、サードパーティの開発者が、プライマリアプリケーションのソースコードに直接アクセスしたり、その知識を持たなくても、プラグイン可能なコンポーネントを使用してプライマリアプリケーションの機能を作成または拡張できるシステムを意味しますまたは内部の仕組み。 （「アプリケーションのソースコードや内部の仕組みに直接アクセスしたり、その知識を持たない」という表現は、中心的な目的です。） プラグイン可能なフレームワークの例には、WordPressまたはなどの一般的なコンテンツ管理システムが含まれますDrupal。 （Drupalと同様に）理想的な状況は、これらのプラグイン可能なコンポーネント（またはプラグイン）をフォルダーに簡単に配置し、アプリケーションにそれらを自動検出または検出させ、魔法のように「機能」させることです。これをある種のホットプラグ可能な方法で、つまりアプリの実行中に行うのが最適です。 私は現在、次の5つの質問に対する回答を（あなたの助けを借りて）決定しようとしています。 実用性：Angular 2/4/5/6アプリケーションのプラグインフレームワークは実用的ですか？（これまで、を使用して真にプラグイン可能なフレームワークを作成する実用的な方法はありませんでしたAngular2/4/5/6。） 予想される課題：Angular 2/4/5/6アプリケーションのプラグインフレームワークの実装で遭遇する可能性のある課題は何ですか？ 実装戦略：Angular 2/4/5/6アプリケーションのプラグインフレームワークを実装するために使用できる特定の技術または戦略は何ですか？ ベストプラクティス：Angular 2/4/5/6アプリケーションのプラグインシステムを実装するためのベストプラクティスは何ですか？ 代替技術： プラグインフレームワークがアプリケーションで実用的でない場合、どのような比較的同等の技術（例）が、最新の非常に反応性の高いWebアプリケーションに適しているでしょうか？Angular 2/4/5/6React 一般に、次のAngular 2/4/5/6理由により、の使用は非常に望ましいです。 当然のことながら、非常に高速です。 帯域幅をほとんど消費しません（初期ロード後） フットプリントが比較的小さい（後AOTとtree shaking）-そしてそのフットプリントは縮小し続けています それは非常に機能的であり、Angularチームとコミュニティはそのエコシステムの急速な成長を続けています それは、次のような最高の、最新のWeb技術の多くとよく果たしているTypeScriptとObservables Angular 5はサービスワーカーをサポートするようになりました（https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7） によってGoogleサポートされているため、将来的にはサポートおよび拡張される可能性があります Angular 2/4/5/6現在のプロジェクトで使用したいです。を使用できる場合は、おそらく（サーバー側のレンダリングに）Angular 2/4/5/6も使用します。Angular-CLIAngular Universal 上記の質問に関するこれまでの私の考えは次のとおりです。フィードバックと啓発を確認して提供してください。 Angular 2/4/5/6アプリはパッケージを消費しますが、これは必ずしもアプリケーション内でプラグインを許可することと同じではありません。他のシステム（例Drupal：）のプラグインは、システムによって自動的に「ピックアップ」される共通モジュールディレクトリにプラグインフォルダーをドロップすることで基本的に追加できます。ではAngular 2/4/5/6、（プラグインとして）パッケージは通常を介してインストールされnpm、に追加されてから、package.json手動でアプリにインポートされapp.moduleます。これはDrupal、フォルダーをドロップしてシステムにパッケージを自動的に検出させる方法よりもはるかに複雑です。プラグインのインストールが複雑になるほど、人々がプラグインを使用する可能性は低くなります。のための方法があった場合、それははるかに良いでしょうAngular 2/4/5/6プラグインを自動的に検出してインストールします。開発者以外がAngular 2/4/5/6アプリケーションをインストールし、アプリケーションのアーキテクチャをすべて理解する必要なく、選択したプラグインをインストールできる方法を見つけることに非常に興味があります。 …

133 angular  plugins  angular-cli  angular-universal 

これはより「ベストプラクティス」の質問です。3人のプレーヤーがあります：a Component、a Service、a Model。Component呼び出しているServiceデータベースから取得するデータを。Service使用しています： this.people = http.get('api/people.json').map(res => res.json()); を返すObservable。 Componentちょうどを購読することができObservable： peopleService.people .subscribe(people => this.people = people); } ただし、私が本当に欲しいのは、がデータベースから取得したデータから作成されServiceたArray of Modelオブジェクトを返すことですService。がComponentこの配列をsubscribeメソッドで作成するだけでよいことに気付きましたが、サービスがそれを実行してで使用できるようにすると、よりクリーンになると思いますComponent。 どのようにしてその配列を含むService新しいを作成しObservable、それを返すことができますか？

132 angular  observable