RxJS 5.5 effectue un changement important et introduit lettable operators pour remplacer fondamentalement tous les opérateurs (appelés opérateurs de "patch") que nous utilisions auparavant.Importation d'opérateurs RxJS lisible
Cet article contient une note:
Lettable operators can now be imported from rxjs/operators, but doing so without changing your build process will often result in a larger application bundle. This is because by default rxjs/operators will resolve to the CommonJS output of rxjs.
Cette déclaration est facile à la preuve sur la pratique avec la toute nouvelle application générée AngularCLI.
Lorsque nous avons une application qui n'importe pas quelque chose de RxJS:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public title = 'app';
constructor(private readonly http: HttpClient) {
}
public ngOnInit(): void {
this.http.get('https://api.github.com/users')
.subscribe(response => {
console.log(response);
});
}
}
On peut voir les éléments suivants:
ng build --prod
chunk {0} polyfills.e1f97a0070e18e96a6be.bundle.js (polyfills) 61.4 kB {4} [initial] [rendered]
chunk {1} main.b2b5d212102ca9d103e8.bundle.js (main) 4.92 kB {3} [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes {4} [initial] [rendered]
chunk {3} vendor.4b7be3dbe842aec3f0ab.bundle.js (vendor) 236 kB [initial] [rendered]
chunk {4} inline.387c7023e5627ac04221.bundle.js (inline) 1.45 kB [entry] [rendered]
Lorsque nous importons un opérateur RxJS la « vieille » et utiliser:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import "rxjs/add/operator/map";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public title = 'app';
constructor(private readonly http: HttpClient) {
}
public ngOnInit(): void {
this.http.get('https://api.github.com/users')
.map((u: any) => 1)
.subscribe(response => {
console.log(response);
});
}
}
on peut voir aucun gain de la taille des faisceaux:
chunk {0} polyfills.e1f97a0070e18e96a6be.bundle.js (polyfills) 61.4 kB {4} [initial] [rendered]
chunk {1} main.229ad10195bbb426b3e8.bundle.js (main) 4.96 kB {3} [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes {4} [initial] [rendered]
chunk {3} vendor.933334fc50e7008778fe.bundle.js (vendor) 236 kB [initial] [rendered]
chunk {4} inline.6a52179d8b19cd3cc179.bundle.js (inline) 1.45 kB [entry] [rendered]
Lorsque nous essayons d'importer et d'utiliser l'opérateur louable plutôt comme recommandé, mais sans modifier le processus de construction:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { map } from "rxjs/operators";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public title = 'app';
constructor(private readonly http: HttpClient) {
}
public ngOnInit(): void {
this.http.get('https://api.github.com/users').pipe(
map((u: any) => 1))
.subscribe(response => {
console.log(response);
});
}
}
On voit que le faisceau de fournisseur est de 108 ko plus qui nous dit que RxJS hasn » t-Shaked été arbre:
chunk {0} polyfills.e1f97a0070e18e96a6be.bundle.js (polyfills) 61.4 kB {4} [initial] [rendered]
chunk {1} main.450c741a106157402dcd.bundle.js (main) 4.97 kB {3} [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes {4} [initial] [rendered]
chunk {3} vendor.3f53f0e2283f4c44ec38.bundle.js (vendor) 344 kB [initial] [rendered]
chunk {4} inline.2d973ef5a10aa806b082.bundle.js (inline) 1.45 kB [entry] [rendered]
Lorsque je tente d'importer l'opérateur comme recommandé dans louable la section No Control over Build Process de l'article:
import { map } from "rxjs/operators/map";
Je reçois une erreur de construction:
./src/app/app.component.ts
Module not found: Error: Can't resolve 'rxjs/operators/map' in 'c:\Projects\Angular\src\app'
@ ./src/app/app.component.ts 14:0-41
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
- Ce que je fais mal?
- Comment pouvons-nous importer de nouveaux opérateurs RxJS Letting dans une application CLI Angular afin que RxJS soit encore arboré?
MISE À JOUR: versions de l'emballage (en gros sont toutes dernières "voulaient" versions d'une application AngularCLI pour le moment):
rxjs: 5.5.0
@angular/cli: 1.4.9
node: 8.6.0
os: win32 x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4
Il pourrait être tout à fait surprenant, voir https://github.com/webpack/webpack/issues/2867 – kemsky
@kemsky: Merci pour l'info! La raison pour laquelle ce n'est pas un arbre-shaked est expliqué dans l'article que j'ai fourni. La question est essentiellement comment contourner le problème avec le système de construction AngularCLI actuel? –
Pourriez-vous publier la sortie 'ng version'? Je n'ai trouvé aucune erreur de construction avec @ angular/cli: 1.2.0, @angular/___: 4.4.6, [email protected] –