我最近从Angular 5更新到Angular 6.

我收到了这个警告combineLatest is deprecated: resultSelector no longer supported, pipe to map instead.Rxjs是版本6.1.0,tslint是5.10.0,Angular CLI是6.0.0和Typescript 2.7.2.我这样使用它:

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl),
  (auth, url) => ({auth, url}),
);

我也尝试过这样:

empty().pipe(
combineLatest(...),
  ...
)

但是这给了我:combineLatest is deprecated: Deprecated in favor of static combineLatest而且对于静态版本也不推荐使用empty.

背景

我有一个看起来像这样的模板(我使用的是一个使用它作为重复项的基础的组件,它是p-pickList,但问题并不是特定于该组件,仅作为示例)

对于背景,假设我有一个类型Foo,我的组件有一个foos: Foo[],我将它提供给属性<p-pickList>下的组件,[source]并为它做内部*ngFor,我所要做的就是提供一个模板

 <ng-template let-foo pTemplate="item">
   ...
   {{ foo.anythingGoesHereWithNoWarningAndNoAutocomplete }}

但是,类型信息foo似乎丢失了.

我是类型安全的忠实粉丝,我喜欢Intellij(或任何其他编辑器)可以在模板内部向我显示警告我做了类似指定无效属性的事情 foo

如果我有一个常规*ngFor,它会推断出类型foo

<div *ngFor="let foo of foos">
  {{ foo.autoCompleteWorksInMostIDEsAsWellAsWarningIfInvalidProp }}

问题:

1. 是否有任何语法可以让我提示类型let-foo？(希望大多数IDE都能识别).

2. 如果我不想依赖IDE,有没有办法让ng编译器类型检查foo(由let-foo声明)？

tl; dr是否有一种语法可以让我输入注释模板输入变量？例如这样的东西组成语法？

let-foo="$implicit as Foo"还是let-foo-type="Foo"？

解决方法

一个愚蠢的想法是在我的组件中有一个身份功能,例如

identity(foo: Foo): Foo {
  return foo;
}

但是做

{{ identity(foo).fooProp }}

不是一个很大的进步

{{ (foo as Foo).fooProp }}

我正在尝试将我的应用程序从Angular v5迁移到v6,并且在尝试providedIn在我的提供程序中指定时遇到以下打字稿错误

参数类型{providedIn:"root"}不能赋予参数类型{providedIn:Type | "根"| null}&InjectableProvider

 @Injectable({
    providedIn: 'root',
 })
 export class MyService {
 }

我复制并粘贴了Angular文档https://angular.io/guide/dependency-injection中的代码

任何的想法？

UPDATE

我创建了一个空白项目ng new ...并添加了一个提供程序ng g service my-new-service,在WebStorm中打开了项目,一切正常,我没有遇到任何关于该虚拟项目的错误

UPDATE

我联系了WebStorm支持,结果发现这是WebStorm的一个已知错误https://youtrack.jetbrains.com/issue/WEB-32634

UPDATE

Webstorm 2018.1.4(尚未发布)应解决此问题,请参阅https://youtrack.jetbrains.com/issue/WEB-32634

UPDATE

Webstorm团队将修复程序移至2018.1.5

UPDATE

2018年6月17日星期日,Webstorm修复程序已经发布

显然,声明默认样式表扩展的方式从Angular 6开始改变了.该styleExt物业angular.json不再被承认.

对于新的项目,这可以通过在命令行选项来设置--style=scss的new命令.

但是,如何在我从Angular <5迁移的项目或者在项目创建期间忘记执行此操作时更改此项目？

这个问题与Angular第5版到第6版的重大变化有关.

我正在Angular6的帮助下构建应用程序并面临路由问题.当我点击特定标签时,所有路线都正常工作,但每当我刷新当前页面时,都会抛出404错误.我已经看到很多关于Stack溢出这个问题的帖子,但未能克服这个问题.

下面是我的app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AppComponent} from './app.component';
import {FetchApiComponent} from './fetch-api/fetch-api.component';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {UserServiceLatest} from './fetch-latest/app.service';
import {UserServiceTop} from './fetch-top/app.service';
import {YoutubePlayerModule} from 'ngx-youtube-player';
import {SidebarComponent} from './sidebar/sidebar.component';
import {FetchLatestComponent} from './fetch-latest/fetch-latest.component';
import { FetchTopComponent } from './fetch-top/fetch-top.component'
import {UserService} from './fetch-api/app.service';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from …

我正在使用RXJS 5,现在当我升级到6时,我遇到了一些问题.

以前我能够使用catch和最后但是根据更新catch用catchError替换(在管道中)现在如何使用finally？

我也有一些问题:

我是否需要更改throw-> throwError(在下面的代码Observable.throw(err);)

import { Observable, Subject, EMPTY, throwError } from "rxjs";
import { catchError } from 'rxjs/operators';

return next.handle(clonedreq).pipe(
          catchError((err: HttpErrorResponse) => {
        if ((err.status == 400) || (err.status == 401)) {
            this.interceptorRedirectService.getInterceptedSource().next(err.status);
            return Observable.empty();
        } else {
            return Observable.throw(err);
        }
       }) 
        //, finally(() => {
        //  this.globalEventsManager.showLoader.emit(false);
        //});
      );

另外如何使用publish().refCount()？

当变量在订阅中发生变化时,为什么视图没有更新？

我有这个代码:

example.component.ts

testVariable: string;

ngOnInit() {
    this.testVariable = 'foo';

    this.someService.someObservable.subscribe(
        () => console.log('success'),
        (error) => console.log('error', error),
        () => {
            this.testVariable += '-bar';

            console.log('completed', this.testVariable);
            // prints: foo-Hello-bar
        }
    );

    this.testVariable += '-Hello';
}

example.component.html

{{testVariable}}

但视图显示:foo-Hello.

为什么不显示:foo-Hello-bar？

如果我ChangeDetectorRef.detectChanges()在订阅中调用它将显示正确的值,但为什么我必须这样做？

我不应该从每个订阅中调用此方法,或者根本不应该(angular应该处理这个).有正确的方法吗？

我是否遗漏了Angular/rxjs 5到6的更新内容？

现在我有Angular版本6.0.2和rxjs 6.0.0.相同的代码在Angular 5.2和rxjs 5.5.10中正常工作,无需调用detectChanges.

我刚刚将我的项目从angular v5.x迁移到v6.x,现在当我尝试启动它时,ng serve我得到了:

Cannot find module 'webpack'
Error: Cannot find module 'webpack'
  at Function.Module....

任何帮助？

我清除了节点模块并且:

• npm cache clean --force
• npm install
• npm install --save-dev @angular/cli@latest

但这没有帮助

我试图在Angular 6中为我的测试关闭源图.我知道源图交换机已被删除,例如ng test --sourcemaps=false.我试过修改我的tsconfig文件:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
  ...
  "sourceMap": false
},

由angular.json test->配置块引用:

"test": {
  ...
  "options": {
    ...
    "tsConfig": "src/tsconfig.spec.json",

源地图仍在生成.

我有两个组件，一个父级和另一个子级。

HTML 部分

<div>
  <div class="row col-md-12">
    <div class="col-md-4">
       <!-- Some HTML Code of Parent component over here -->
    </div>
    <div class="col-md-8">
      <child-component></child-component>
    </div>
 </div>
 <button class="button" (click)="reloadOnlyChild($event)">Reload Child</button>
</div>

现在，单击此按钮后，我希望唯一的孩子重新加载或刷新。

TS部分

reloadOnlyChild(event){
  // I want to reload the child from here.
}

我在互联网上搜索，我得到的是 Vue 或 React，但不是 Angular。