upgrading project to Angular 8 - rxjs

I've followed the instruction from https://update.angular.io/#7.2:8.0l3 and deleted the rxjs-compat from my project. From now I have this error during ng serve:
../node_modules/rxjs/Rx.d.ts:1:15 - error TS2307: Cannot find module 'rxjs-compat'.
export * from 'rxjs-compat';
also I have
Property 'catch' does not exist on type 'Observable<HttpEvent<any>>'.
.catch((err: HttpErrorResponse) => {
What should I do to fix this? I have "primeng": "9.1.2",
"rxjs": "6.6.0" in my package.json

Hello mario the reason is quite simple, there is no more catch operator in rxjs the new one is called catchError if you go in the rxjs changelog here
and scroll to 5.5.0 beta you will see the introduction of the new pipebale operators where the catchError is introduced as the successor of catch, where catch was later on removed/deprecated (version 6-7). The case is the same for the do and tap operator.
The thing that I will suggest is to go here at rxjs docs and read the full migration guide, it is very helpful.

Related

Jasmine tests always failing in RxJS 7 when using toBeObservable()

I've updated my dependencies and am now confronted with this error message:
DEPRECATION: The matcher factory for "toBeObservable" accepts custom equality testers, but this parameter will no longer be passed in a future release. See <https://jasmine.github.io/tutorials/upgrading_to_Jasmine_4.0#matchers-cet> for details.
Error: Expected $[0].notification to be a kind of Object, but was Notification({ kind: 'N', value: true, error: undefined, hasValue: true }).
at <Jasmine>
at toBeObservableComparer (node_modules/jasmine-marbles/es6/index.js:80:1)
at <Jasmine>
The test is very simple:
const expected = cold('a', {a: true});
expect(new BehaviorSubject(true)).toBeObservable(expected);
It might have to do something with the deprecation notice, but I'm just using toBeObservable() from latest version of the jasmine-marbles package and can't see a custom parameter. Also I don't understand why Notification isn't a kind of Object.
Versions:
rxjs: 7.5.2
jasmine-core: 4.0.0
jasmine-marbles: 0.8.4
karma-jasmine: 4.0.1
The script works on rxjs 6.6.7.
I think the new documentation shows the new expectObservable:
expectObservable(new BehaviorSubject(true).asObservable()).toBe(expected);
Check out the documentation here: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/testing/marble-testing.md#marble-syntax
jasmine-marbles version => 0.9.0 supports RxJS 7.x
https://www.npmjs.com/package/jasmine-marbles

Docusaurus v2 and GraphQL Playground integration

I'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?
Is it good idea to integrate Playground and Docusaurus at all?
Thanks for your ideas...
A few Docusaurus sites have embedded playgrounds:
Hermes
Uniforms
In your case you will have to write a plugin to extend the webpack config with file-loader.
Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react
You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this
I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.
In the end I found the answer is in Docusaurus, not in building a custom compiler:
I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '#graphiql/create-fetcher' to my component
Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '#docusaurus/BrowserOnly';
const Explorer = () => {
const { siteConfig } = useDocusaurusContext();
return (
<BrowserOnly fallback={Loading...}>
{() => {
const GraphEx = GraphExplorer
return
}}
);
}
This now works and builds successfully

Why am I missing types on Apollo-angular mutation?

I am trying to understand the Apollo client in an Angular client. The following code gives me no typings:
fireMutation() {
this.apollo.mutate<{foo: string}>({
mutation: gql`some mutation {}`,
variables: {}
}).subscribe(v => {
// No typings on v.
return;
});
}
I found this issue on Github, but it's apparently not related to the issue I'm facing.
I have created a Stackblitz here, to make it easy for you to confirm.
Based on this Github comment, I found the solution.
The fix was to install graphql types: npm i #types/graphql --save-dev.
I updated the stackblitz, and it now works 🔥
Many thanks to ekron.

uirouter/angular-hybrid AoT build bootstrapModuleFactory promise injector fails to get UIRouter

I've got a sample uirouter/angular-hybrid app, successfully built with #ngtools/webpack AngularCompiler plugin and running. I've updated the main.aot.ts boot function to use bootstrapModuleFactory and can get the injector from the platformRef available in the promise success handler. But injector.get(UIRouter) fails with "Cannot read property 'config' of null."
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then((platformRef) => {
const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;
function startUIRouter() {
urlService.listen();
urlService.sync();
}
platformRef.injector.get<NgZone>(NgZone).run(startUIRouter);
});
I confirmed that the injector.get(NgZone) will succeed and injector.get(UIRouter) will fail. I tried moving the call to injector.get(UIRouter) inside the NgZone run func without success.
I also tried moving the upgrade.bootstrap call into the promise success function above to ensure it had booted first, without fixing the problem.
A simple angularjs component is rendering fine, so the boot process seems to be succeeding, except for not being able to call the listen() and sync() functions on the UIRouter.urlService.
I also confirmed the development config and non-aot production config, for this same sample app, do not have this problem and seem to be working fine.
Using versions:
uirouter/angular-hybrid v6.0.2
angular packages at v7.1.4, but also failed with 6.0.0 (which is the angular version in the package.json in the docs for uirouter/angular-hybrid v6.0.2)
Thanks for any ideas.
The problem was that the config object I was passing to UIRouterUpgradeModule.forRoot was being imported from a file that was using a default export of the object, and the object had a reference to a config function that was not being exported. This combination hid the problem during the build, and resulted in the symptom at runtime of not having the UIRouter object available to the injector.
Replacing the default export with a named export triggered the AOT compiler to complain about the non-exported function reference. Additionally exporting the function then allowed a successful build, a happy injector, and a successful runtime boot.

How to prevent app from crashing on uncaughtErrorEvent

Is there a way to prevent the app from crashing when JS uncaught errors occur?
Already tried to wrap app.start(...) inside try/catch, but it sure doesn't work:)
There is indeed, you can register an uncaughtErrorEvent listener.
Refer to the official documentation - https://docs.nativescript.org/core-concepts/application-lifecycle#use-application-events
You can drop the following in your app.js before bootstrapping the application
var application = require("application");
application.on(application.uncaughtErrorEvent, function (args) {
if (args.android) {
// For Android applications, args.android is an NativeScriptError.
console.log("NativeScriptError: " + args.android);
} else if (args.ios) {
// For iOS applications, args.ios is NativeScriptError.
console.log("NativeScriptError: " + args.ios);
}
});
There's no way to prevent the app from crashing. You can catch the error in the uncaughtError application event but the app will crash afterwards regardless.
Attempting to navigate to an error page won't work.
According to the comments on this GitHub issue:
Ability to specify custom error pages on uncaughtErrors · Issue #1718 · NativeScript/NativeScript
there is a way to customize the error page shown, but only on Android. Apparently there isn't anything similar available for iOS.
This is an older question but there is a documented way to prevent this using Nativescript older than 4.2 (you should be on 6+ now)
Disable rethrowing of uncaught js exceptions to native
Basically, catch the JS errors but do not crash the native app.
Note the disclaimer there as well. The script will be unstable at this point. Yes, it did not crash, but wherever it dies did not continue, so you might be worse off for stability. Putting the app in a bad state or just quitting/recrashing might be safer.

Resources