标签: angular7

我最近将我的 Angular 4 应用程序升级到了 Angular 6，现在想升级到 Angular 7。根据下面的文章，运行以下命令的时间不应超过 10 分钟来升级。

ng 更新 @angular/cli @angular/core

https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

运行此命令后，我在命令提示符下看不到任何事情发生。没有错误。有人能告诉我为什么会这样吗

我必须在我的 Angular 7 项目中显示/下载一个 .pdf 文件，但我在使用 window.URL.createObjectURL 时遇到了一些问题。这是我做的：

this.userService.getFile(report.id).subscribe(
  res => {
    console.log(res)
    const filename = res.headers.get('content-disposition').split(';')[1].split('=')[1].replace(/\"/g, '')
    const blob = new Blob([res.body], { type: res.body.type })
    const url = window.URL.createObjectURL(blob)
    const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement

    a.href = url
    a.download = filename
    window.document.body.appendChild(a)
    a.click()
    window.document.body.removeChild(a)
    URL.revokeObjectURL(url)
  },
  err => {
    console.log(err)
  }

其中 getFile() 是一个简单的 http 请求

getFile(fileId: string): Observable<any> {
   return this.http.get(environment.API_URL + '/file/' + fileId, {observe: 'response', responseType: 'blob'})
}

我的 IDE 还在 window.URL 上触发了“实例成员不可访问”。createObjectURL …

我最近更新到Angular 7。

我正在处理延迟加载模块，但是#chunk.js当我单击延迟加载模块中的组件时，我在网络选项卡中看不到任何地方。

联系我们延迟加载组件，但#chunk.js网络选项卡中没有。

这是我如何懒惰地加载我的模块。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ContactUsComponent } from 'src/app/modules/contactus/contactus.component';
import { ErrorComponent } from 'src/app/modules/error/error.component';
import { ContactUsRoutingModule } from 'src/app/modules/contactus/contactus-routing.module';
import { LandingComponent } from 'src/app/modules/landing/landing.component';
import { AboutUsComponent } from 'src/app/modules/aboutus/aboutus.component';

const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'landing', component: LandingComponent },
  { path: 'aboutus', component: AboutUsComponent }, …

我正在尝试在Angular 7中集成Dialogflow。出现此错误。

  ** Angular Live Development Server is listening on localhost:4200, 
open your browser on http://localhost:4200/ **

Date: 2018-11-22T13:47:11.748Z
Hash: 4075ca64830b90f82558
Time: 4597ms
chunk {main} main.js, main.js.map (main) 1.85 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 92.4 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 318 kB [initial] [rendered]

ERROR in node_modules/api-ai-javascript/declarations.d.ts(39,5): error TS2687: All declarations of 'stream' must have identical …

我在使文件下载在我的应用程序中工作时遇到了一些麻烦。要下载文件，我正在使用API​​进行新的调用，以将数据输入到应用程序中。我已经使用Postman测试了此API，并且由于可以通过调用下载文件，因此它似乎可以正常工作。

不幸的是，在将其实现到Angular应用程序时遇到了一些问题。当我调用下面的函数时，由于无法打开，因此我得到的是“损坏”文件。我已经检查了与我的问题有关的其他问题/解决方案，但是在尝试了大多数问题/解决方案后，我没有得到进一步的解决。

我服务中的电话：

DownloadFile (companyId: string, fileId: string, extension: string, fileName: string): Observable<Blob> {
   const options = { responseType: 'blob' as 'json' }
   return this.http.get<Blob>(this.baseApiUrl + this.baseTag + "?companyId=" + companyId + "&fileId=" + fileId + "&extension=" + extension + "&fileName=" + fileName, options)
 }

使用服务调用：

this.data.DownloadFile(this.company.id, selectedItem.id, this.getFileNameWithoutExtension(selectedItem.fileName), this.getExtensionFromFileName(selectedItem.fileName))
    .subscribe(resultBlob => 
      {
        //Success
        console.log('start download:', resultBlob);
        var blob = new Blob([resultBlob], { type: "application/pdf" } );
        saveAs(blob, selectedItem.fileName);
      },
    error => {
      //Error
      console.log(error);
    });

我没有看到这段代码有什么问题。

我创建了一个小服务，可以在其中存储路线更改。

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

@Injectable()
export class RouteState {

  private previousUrl: string;
  private currentUrl: string;

  constructor(private router: Router) {
    this.currentUrl = this.router.url;
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {        
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
      };
    });
  }

  public getPreviousUrl() {
    return this.previousUrl;
  }    
}

但是每次路由更改时，vars currentUrl和previousUrl都是未定义的。难道我做错了什么？

我最近开始将Angular 7.2.0应用程序转换为Angular通用应用程序。该应用程序已成功渲染了服务器端，并在快速的PC和Internet连接上相当快速地传输了状态，但不幸的是，直到交出该页面后，渲染的页面仍缺少通常从API提取的任何数据。

我已将serverURL标记从服务器添加到提供的令牌中，并且在呈现服务器端时，所有http请求均使用完全限定的url进行。但是，这似乎无关紧要，因为所有http调用都在完成之前被取消！我的服务器未显示对api端点的调用，并且客户端记录了错误{}（[Error]默认情况下显示为）。

我正在使用TransferStateModule和TransferHttpCacheModule，但是到目前为止，仍然没有任何效果。似乎快速引擎渲染将不会等待异步http调用。它会影响ngOnInit组件的http调用constructor，服务的s以及任何in resolver，因此我不知道如何获取数据。

对于诸如配置数据之类的事情，我将必要的字段作为令牌注入，并在服务器端渲染中检查该令牌，但是我无法对应用程序中的所有数据执行此操作。

以下是我的服务器和应用程序模块的相关部分

app.ts（节点快速服务器）

 app.get('*.*', express.static(APP_CONFIG.client_root, {maxAge: 0}));

    // Render Angular Universal
    if (APP_CONFIG.universal) {
        // Our index.html we'll use as our template
        const templateFile = HelpersService.tryLoad(join(APP_CONFIG.client_root, './index.html'));
            const config = configService.getConfig();
            const template = templateFile.toString();
            const win = domino.createWindow(template);
            const fakeanimation = {
                value: () => {
                    return {
                        enumerable: true,
                        configurable: true
                    };
                },
            };
            global['window'] = win; …

我有一个登录页面和一个仪表板组件。我的问题是，当我从仪表板显示在登录页面下方的页面登录时，它没有重定向为新页面。如何在angular 7中实现呢？任何帮助都会有所帮助'。谢谢！！

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Shopping-cart';
  user = []
  users = []
  public Candidate = []
  public showWhen:boolean = false;

  constructor(private _router: Router){}

  authenticateLogin(user){
    let authUser = JSON.parse(localStorage.getItem('auth'))
    console.log(user);
    if(user.mail === authUser[0] && user.password === authUser[1]){
      this.showWhen = true;
      console.log("Logged in Successfully");
      this._router.navigate(['dashboard']);
    } else {
      console.error("Invalid email and password");
    }
  }

}

这是我的路由模块

app-routing.module.ts

import …

我对变量声明有些困惑.

什么意味着英雄$

Angular 4

export class HeroSearchComponent implements OnInit {
heroes: Observable<Hero[]>;
private searchTerms = new Subject<string>();

constructor(
 private heroSearchService: HeroSearchService,
 private router: Router) {}

Angular 7+

 export class HeroSearchComponent implements OnInit {
 heroes$: Observable<Hero[]>;
 private searchTerms = new Subject<string>();
 constructor(private heroService: HeroService) {}

     // Push a search term into the observable stream.
          search(term: string): void {
          console.log(term);
            this.searchTerms.next(term);
        }

• 我在角度7 ver中有混淆,其中英雄被赋予$ variable.

• 我试图从var中删除$符号然后代码不起作用.

• 任何建议都是最受欢迎的

我有一个ngx-pagination的自定义分页模板实现,它正常工作.但是,当我尝试使用带分页的过滤器管道时,分页会中断:分页控件保持与应用过滤器之前相同,并且过滤后的数据集不再分页(11个项目出现在屏幕上而不是10个) .页面底部的分页控件在过滤时仍然可见,但不会影响过滤后的数据,即不会更改页面.

组件HTML

<task-manager-record *ngFor="let record of filteredDraftRecords | draftFilter: draftFilterArg | paginate: getPaginationOptions(tabIndex); let i = index;" [record]="record"></oir-task-manager-record>
<div class="totalRecords">
    <label>Total </label>
    {{ (filteredDraftRecords | draftFilter:draftFilterArg)?.length }}
</div>
<pagination *ngIf="(filteredDraftRecords | draftFilter:draftFilterArg)?.length > getPaginationOptions(tabIndex).itemsPerPage"
          (pageChange)="onChangePage($event)"
          [options]="getPaginationOptions(tabIndex)">
</pagination>

组件ts

import { Component, OnInit } from '@angular/core';
import { RecordViewModel } from '../models/app.models';
import { MotionStatus } from '../models/enum.model';
import { PaginationOptions } from 'proceduralsystem-clientcomponents';
import { SelectItem } from '@motions/motions.model';
import { TaskManagerService } from './task-manager.service';

@Component({
  selector: 'task-manager',
  templateUrl: …