标签: angular5

在HttpInterceptor内部捕获到401错误时，是否可以导航到特定路由？

我试图做的是：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
?    return next.handle(req)
        .do((event: HttpEvent<any>) => {}, (error: any) => {
             if (error instanceof HttpErrorResponse) {
                 if (error.status === 401) {
                     this.router.navigate(['/signin']);
                 }
             }
         });
?}

但是什么也没发生。

我只有在使用的情况下才能重定向到登录页面

window.location.href = '/signin';

代替

this.router.navigate(['/signin']);

我的项目需要以下模块:

TranslateModule LocalizeRouterModule TransferHttpCacheModule

不知何故,这种模块组合正在创建循环依赖.

TranslateModule与TransferHttpCacheModule - 使用LocalizeRouterModule工作TranslateModule - 工作

但是当我导入所有三个时,它会导致依赖循环.

无法实例化循环依赖!ApplicationRef("[ERROR - >]"):在./AppBrowserModule@-1:-1中的NgModule AppBrowserModule中

检查plnkr以重现问题:https://plnkr.co/edit/qlUQ866JzTa3JtFgSAIO？p = preview

@NgModule({
imports: [
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    TransferHttpCacheModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpTranslationLoaderFactory,
        deps: [HttpClient]
      }
    }),
    LocalizeRouterModule.forRoot([], {
      parser: {
        provide: LocalizeParser,
        useFactory: HttpLoaderFactory,
        deps: [TranslateService, Location, LocalizeRouterSettings]
      }
    }),
    RouterModule.forRoot([])
],
declarations: [
    AppComponent
],
providers: [

],
bootstrap: [AppComponent]
}) export class AppModule { }

我正在尝试使用Angular Service Worker,除了dataGroups不适合我之外,一切正常.

这就是我的意思ngsw-config.json:

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/shipments/**"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]

在我的网络选项卡中,我看到服务工作者总是进行服务器调用然后回退到缓存.见附图.

dataGroups - 性能

请注意,我正在调用的API位于不同的服务器上,localhost vs some-server:8000,我尝试了不同的使用不同的URL: "/shipments/**" "/shipments" "http:some-server:8000/shipments/**"....等但没有一个工作.

我的环境:
- @angular 5.1.1
- Service-Worker 5.1.2
- Angular-Cli 1.6.0

谢谢

如何处理角度服务工作者中的推送通知单击.SWPush没有任何方法.

我已经尝试引用一个侦听"notificationclick"事件处理程序的js,但是在点击通知按钮时它从未被触发过.

任何指针都会有所帮助!

• 我从角度2升级到角度5.
• 升级后,我在ts文件中看到以下错误.
• 在angular5中我需要删除@ angular/core和@ angular/router
• 升级后提供package.json也
• 在下面提供我的错误和代码段.
• 你能告诉我如何解决它吗？

错误

[ts]无法找到模块'@ angular/core'.
[ts]无法找到模块'@ angular/router'.

码

import {Component, ElementRef, Input,Output,EventEmitter,Inject, OnInit,ViewChild} from '@angular/core';
import {KendoGridComponent} from '../grid/grid.component'
import { Router} from '@angular/router';

的package.json

{
  "name": "SPORTS",
  "version": "1.0.0",
  "description": "SPORTS player - v0.2.37.1",
  "engines": {
    "node": "7.10.1"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^5.2.2",
    "@angular/common": "^5.2.2",
    "@angular/compiler": "^5.2.2",
    "@angular/compiler-cli": "^5.2.2",
    "@angular/core": "^5.2.2",
    "@angular/forms": "^5.2.2",
    "@angular/http": "^5.2.2",
    "@angular/platform-browser": "^5.2.2",
    "@angular/platform-browser-dynamic": "^5.2.2",
    "@angular/platform-server": "^5.2.2",
    "@angular/router": "^5.2.2",
    "@angular/upgrade": "2.0.0",
    "@ng-idle/core": "2.0.0-beta.2",
    "@ng-idle/keepalive": "2.0.0-beta.2",
    "@types/jquery": "^3.2.10", …

我想随着时间间隔的增加触发retrywhen（），

   socketResponse.retryWhen(attempts => {
    return attempts.zip(Observable.range(1, 4)).mergeMap(([error, i]) => {
        console.log(`[socket] Wait ${i} seconds, then retry!`);
        if (i === 4) {
            console.log(`[socket] maxReconnectAttempts ${i} reached!`);
        }
        return Observable.timer(i * 1000);
    });
});

上面的代码工作正常。当前执行输出：

连接错误时（第一次）

• [socket]等待1秒钟，然后重试！//等待1秒
• [socket]等待2秒钟，然后重试！//等待2秒

连接成功

//成功连接。

连接错误时（第二次）

• [socket] 等待3秒钟，然后重试！//等待3秒
• [socket] 等待4秒钟，然后重试！//等待4秒

现在，我想重置套接字连接成功时的等待时间。

期望的输出：

连接错误时（第一次）

• [socket]等待1秒钟，然后重试！//等待1秒
• [socket]等待2秒钟，然后重试！//等待2秒

连接成功

//成功连接。

连接错误时（第二次）

• [socket] 等待1秒钟，然后重试！//等待1秒

• [socket] 等待2秒钟，然后重试！//等待2秒

但我不知道如何重设retrywhen（）时间间隔。

我使用CLI创建了一个新的Angular 5.2项目(例如ng new MyApp)

更改到文件夹并运行应用程序工作正常.(例如ng服务)

我对生成的代码进行了以下更改(见下文).只有HTML和CSS代码更改,非常小,我发布的是整个更改.

当我保存代码时,它会重新编译,并抛出警告:

ErrorEmittedError :(发出的值而不是Error的实例)autoprefixer:D:\ MyApp\src\app\app.component.css:51:7:找不到网格区域:标题,导航,内容,侧边栏,广告,页脚

该错误似乎与CSS的媒体查询部分有关.如果我删除该部分,则错误消失.

我不记得在Angular 4.x中发生过这种情况吗？有什么想法发生了什么？

app.component.html

<div class="wrapper">
  <header class="main-head">The header</header>
  <nav class="main-nav">
      <ul>
          <li><a href="">Nav 1</a></li>
          <li><a href="">Nav 2</a></li>
          <li><a href="">Nav 3</a></li>
      </ul>
  </nav>
  <article class="content">
      <h1>Main article area</h1>
      <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on …

如何传递onNext()名为"Category1"的控件的表单输入值？更改表单时,将传递该值,但是当用户未更改该值时则不会.我需要永远传递的价值.我该怎么做呢？

<div class="app-form container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="button-left float-left">
                <button (click)="onPrevious('tab-empinfo')">Previous</button>
            </div>
        </div>
        <div class="col-6">
            <div class="button-right float-right">
                <button 
                (click)="onNext('tab-selection', {
                         form: 'category', 
                         data: {category: formCategory.value['Category1']}})">
                Next
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h4>Category</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <form #formCategory="ngForm">
                <div class="form-group" *ngFor="let input of categorySelection; let i = index">
                    <choice *ngIf="input.type == 'choice'" name="Category{{ i + 1 }}" ngModel
                            [multiple]="input.multiple" [question]="input.question" [answers]="input.answers"></choice>
                </div>
            </form>
        </div>
    </div>
</div>
<pre>
    {{ formCategory.value | …

我希望检测何时更改了路线并替换了新的view（html）。

尝试过以下代码，但不知道如何继续进行。

this._routerSub = this.router.events
  .filter(event => event instanceof NavigationEnd)
  //.do(event => console.log(event)) // 
  .subscribe((value) => { });

还尝试了下面的代码，但出现错误

无法将事件类型的参数分配给类型'（value：Event）=> void'的参数。

   import { Router, NavigationEnd, Event  } from '@angular/router';

   this._routerSub = this.router.events  
      .subscribe(event : Event) => {
      if (event instanceof NavigationEnd) {
        console.log(event.url);
      }
    });

下面的Vega是我的app.component.ts和app.component.ts代码。是不是应该在激活时调用onActivate。由于路由器插座将在实例化新组件时发出激活事件。

app.component.html

<router-outlet (activate)="onActivate($event)" ></router-outlet>

app.component.ts

   onActivate(e) {
        debugger;
        console.log(1);
      }

我正在使用Angular 5应用，正在将其托管在Apache2.4 http服务器上，并使用代理模块对其进行重定向 http://localhost:7777/test/

我的第一个问题是调用从浏览器服务时，它是使用http://localhost:7777/作为基本URL，从我的测试服务中删除斜杠尽快解决，/service1/upload给service1/upload。所以我从http://localhost:7777/service1/upload到了http://localhost:7777/test/service1/upload。

现在我image.png在Assets /文件夹中还有一个其他未解决的问题，它一直试图从中获取它，http://localhost:7777/assets/image.png而不是http://localhost:7777/test/assets/image.png

我测试了第二个URL，它按要求返回了我的图像。如何使Angular 5相对地找到我的资产路径？以我为例http://localhost:7777/test/assets/image.png

这是我访问HTML图像的方法：

..
<img  src='assets/stop_pic.PNG' > 
..

我的基本href在我的index.html中：

<base href="">

我的angular-cli.json conf：

...    
apps": [
        {
          "root": "src",
          "outDir": "../src/main/resources/static",
          "assets": [
            "assets"
          ],
          "index": "index.html",
          "main": "main.ts",
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "app",
          "styles": [
            "styles.css"
          ],
          "scripts": [],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
    ...