标签: angular7

我需要编写一个自动化测试用例（茉莉花测试），它将在不同分辨率的 chrome 中运行，用于移动和网络视图 例如，当它在 jasmine 中运行时，它应该自动将窗口大小调整为 W: 375 H: 678 不幸的是，我无法找到解决方案来做到这一点

it('It should set sizes according to mobile', async(() => {

     //below code is not working
     //browser.manage().window().setSize(375, 678);
     let innerHeight = window.innerHeight;
     neither it won't work following code
     window.resizeTo(375, 678);

  }));

我刚刚将我的 Web 应用程序项目从 angular 4 更新到了 angular 7，我在页面加载时遇到了动画触发器问题（ngOnInIt 方法）。我需要支持在 angular 4 和 angular 7 中流行的动画效果

我已将触发器添加到我的 app.module.ts 但我仍然无法解决错误

角 4

import {animateFactory } from 'ack-angular-fx'

.ts 文件

@Component({
   selector: 'abc',
   templateUrl: './abc.component.html',
   styleUrls: ['./abc.component.css'],
   animations: [animateFactory(480, 200, 'ease-in', 100, 'animate')]
})

.html 文件

<div [@animate]="'zoomIn'">
</div>

角 7

.ts

import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce, zoomIn } from 'ngx-animate';

@component({
  animations: [
        trigger('bounce', [transition('* => *', useAnimation(zoomIn))])
    ],
})

.html

<div [@animate]="'zoomIn'"></div>

我得到的实际错误消息是

Error: The …

我正在尝试部署一个 Angular 7 应用程序，该应用程序使用 ngx-translate 和 /dist/assets 文件夹中的翻译语言文件。我在 build.gradle 中指定了正确的 base href。部署后，我看到所有内容都加载了，除了返回错误代码 404（未找到）的语言文件。

我试过以几种不同的方式更改 angular.json 文件。我尝试更改 TranslateHttpLoader。似乎没有任何工作。我可以在 /dist 文件夹中看到包含所有语言文件的 i18n 文件夹。然而，它没有被引用。

在 app.module.ts

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

在 angular.json 中

"assets": [
  "src/favicon.ico",
  "src/assets"
],

但我最终在浏览器中收到此错误：

/assets/i18n/en.json 404 未找到

任何帮助，将不胜感激！

有两个切换按钮（编辑和提交），哪个按钮应该像点击时切换显示/隐藏样式一样工作

<button (click)="showEditBtn = false;" *ngIf="showEditBtn;"> Edit</button>
<button (click)="showEditBtn =  true;" *ngIf="!showEditBtn;">Submit</button> 

我需要 showEditBtn变量应该是true默认值而不触及脚本文件

是否可以为模板中的变量赋值，如下例所示？

<div> {{  let showEditBtn = true  }}  </div>

堆叠闪电战示例

我正在将使用 NgRx 的 Angular 应用程序从版本 6.1.3 升级到 7.2.15。运行后ng-update我的版本升级如下：

角度 - 6.1.3 -> 7.2.15

NgRx - 6.1.0 -> 7.4.0

RxJS - 6.2.2 -> 6.5.2

rxjs-compat（第三方组件需要） - 6.2.2 -> 6.5.2

在升级编译失败并返回以下错误的变体后，尝试构建或提供应用程序时，对于所有使用选择器的地方：

  Types of parameters 'source$' and 'source' are incompatible.
    Type 'Observable<MyFeatureState>' is not assignable to type
src/app/my-feature/detail/detail.component.ts(84,45): error TS2345: Argument of type '(source$: Observable<State>) => Observable<DetailMetadata[]>' is not assignable to parameter of type 'OperatorFunction<MyFeatureState, DetailMetadata[]>'.

我没有使用任何非常复杂的选择器。大多数只是直接从功能商店获取值，并且应用程序在升级之前就可以运行。作为其中一个组件的（简化）示例，错误指向：

  Types of parameters 'source$' and 'source' are incompatible.
    Type 'Observable<MyFeatureState>' is not assignable to …

鉴于 MainComponent.html 的以下代码：

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users">
    <!-- Active Tab. This tab is shown first -->
    <app-users></app-users>
  </mat-tab>
  <mat-tab label="Managers">
    <app-managers></app-managers>
  </mat-tab>
</mat-tab-group>

调用此视图时，有两个组件同时加载并运行。即调用 ManagersComponent（非活动选项卡）的 ngOnInit。

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-managers',
    templateUrl: './managers.component.html',
    styleUrls: ['./managers.component.scss']
})
export class ManagersComponent implements OnInit, OnDestroy {

    constructor() { }

    ngOnInit() {
      //This is called when the MainComponent is loaded. 
    }

    ngOnDestroy() {

    }
}

有没有办法加载和销毁组件，以便仅加载活动选项卡，而非活动选项卡在单击之前不会加载，并在离开时销毁？

即在上面的代码片段中，在选择活动选项卡之前，不会为 ManagersComponent 加载 ngOnInit，当离开时，将调用 ngOnDestroy

我有一个 angular 7 应用程序。

当我使用 --prod 构建项目时，我收到了预算警告。

angular.json

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/tbc-capital-web",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/env.js",
          "src/web.config"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [],
        "es5BrowserSupport": true
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": true,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb", …

我需要在 angular 版本 7 中更改日历的语言。我没有找到太多关于此的文档。最主要的是更改日历上出现的日期的语言。

!-- 开始片段: js hide: false 控制台: true babel: false -->

import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';

@Component({
  selector: 'app-calendario',
  templateUrl: './calendario.component.html',
  styleUrls: ['./calendario.component.css']
})
export class CalendarioComponent implements OnInit {
  //calendario
  calendarOptions: Options;
  displayEvent: any;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;

  constructor() { }

  ngOnInit() {

    this.calendarOptions = {
      editable: true,
      eventLimit: false,
      header: {
        left: '',
        center: 'title',
        right: 'month'
      },

      events: [] …

我试图通过点击一个图标导航到一个新页面，下面是代码

  this.prj = e.data.project_number;
  this.router.navigateByUrl('/dashboard/ProjectShipment/634');

而不是这个硬编码的查询参数，000634我必须将 a 传递this.prj给它。我的路径如下

const appRoutes: Routes = [
  {
  path: 'dB',
  data: { title: 'Dashboard' },
  children: [
      {
          path: 'ProjectShipment/:reportProject',
          component: ProjectShipmentComponent,
          data: { title: 'Project Shipment' },
      }

我正在尝试将我的应用程序从 7 迁移到 9，这里 Angular 9 中的新 IVY 编译器与库angular-webstorage-service不兼容， 抛出以下错误。

node_modules/angular-webstorage-service/src/storage-service.module.d.ts:9:22 中的错误 - 错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类。

这可能意味着声明 StorageServiceModule 的库（angular-webstorage-service）没有被 s 正确处理，也没有被 ngcc 正确处理，或者与 Angular Ivy 不兼容。如果是，请检查较新的版本是否更新。还要考虑检查库是否可用，如果是，则更新。还可以考虑与库的作者核对以查看该库是否与 Ivy 兼容。

关于 Angular 9 兼容性的任何想法