标签: angular7

在本地运行我不使用 angular-cli 创建的 node.js-angular7-webpack4.21 应用程序时，我在浏览器中收到以下错误：

Error: Can't resolve all parameters for Location: (?).

我对这个问题进行了广泛的研究。首先，我没有任何组件、服务或其他命名的“位置”，所以我不知道编译器很难解析哪个实体的参数。其次，我的整个应用程序中只有 4 个服务，没有一个指向彼此，因此这不是循环依赖问题。我也没有忘记将 '@Injectable()' 装饰器正确放置在任一服务文件中。真的，经过三重和八重检查后，这不是问题。

此外，我已经用一个空的 angular6 项目重现了这个问题，该项目由 0 个服务和只有 1 个组件组成，模板中的 div 中只有单词，在这种情况下，我只收到关于“ApplicationModule”而不是“Location”的相同错误。所以即使我没有 webpack 错误，我也认为问题出在我的 webpack 配置中，因此我将把 webpack.config.js 和 tsconfig.js 文件放在下面，希望有人能找到关于它们的一些非常愚蠢的东西。

这是我的 tsconfig.json：

{
  "compilerOptions": {
  "target": "es5",
  "lib": ["dom", "es2017", "es5", "es6", "es7"],
  "outDir": "dist",
  "module": "commonjs",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": true,
  "noImplicitAny": false,
  "typeRoots": ["types"],
  "types": ["node"]
},
  "exclude": ["node_modules"]
}

这是我的 webpack.config.js：

var webpack = require('webpack');
var helpers …

我的 angular 6.1 应用程序正在构建和运行良好。

我升级到 angular 7。

现在在构建中，我收到了多个这样的错误。

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build- 
angular/src/angular-cli-files/plugins/raw-css- 
loader.js!./node_modules/postcss-loader/lib??embedded!./node_modules/sass- 
loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: 
C:\Users\Markku\Documents\GitHub\crds-people\node_modules\crds- 
styles\assets\stylesheets\vendors\_timepicker.scss:18:24: Can't resolve 
'//crossroads-media.s3.amazonaws.com/images/chevron-up-blue.png' in 
'C:\Users\Markku\Documents\GitHub\crds-people\src'

16 |     }
17 |     &.glyphicon-chevron-up {
> 18 |       background-image: url(//linktomys3.amazonaws.com/images/chevron-up-blue.png);
     |                        ^
  19 |     }
  20 |   }

哪些更改会影响我的图形路径？

我以前使用的是 Angular 版本 6，现在我已经升级到 7。但是当我尝试在 CLI 中使用ng new [app-name]它创建一个新项目时，不会询问我是否要在我的项目或样式中包含路由。

PS：我有最新版本的 Angular，即 7.0.2。

我需要的初始位置cdk-virtual-scroll-viewport不是列表的第一个元素/项目。

现在我找到了scrollToIndex和scrollTo方法，但我只能在 中使用它时才能让它们工作ngAfterViewChecked，这感觉不对。

1. 有人可以确认使用这些方法ngAfterViewChecked是正确的做事方式吗？
2. 如果没有，请展示替代方法/技术？

  @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }

  ngAfterViewChecked() {
    this.cdkVirtualScrollViewport.scrollToIndex(2000);
  }

  <ul class="list">
    <cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
      <ng-container *cdkVirtualFor="let n of numbers">
        <li style="height:88px">{{ n }}</li>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </ul>

我正在开发数据驱动的应用程序，目前我面临将类型传递到材质角度对话框的问题。我想创建可重用的对话框表单，并且需要更改新对话框实例的类型。

有没有办法将类型传递到材质对话框或组件中？或者也许有可能从作为数据传递的字符串在对话框本身中创建类型？

我想在这样的（或类似的）对话框组件中使用类型：

export class DialogDynamicItemManagerDialog<T> {

    public dialogName: string;
    public items: Array<T>;
    public selectedItem: T;
    ...
}

我试图传递这样的类型：

 OpenDynamicDialog(): void {
    this.dialog.open(DialogDynamicItemManagerDialog<MyType>, {
      data: {
        title: 'Manage items',
        items: this.items
      },
    });
}

但显然它不起作用。

我也试过这个：

 OpenDynamicDialog(): void {
    const dialogRef = this.dialog.open(DialogDynamicItemManagerDialog, {
      data: {
        title: 'Manage items',
        items: this.items,
        itemType: itemType
      },
    });
}

但后来我还没有找到一种方法将字符串更改为对话框中的类型。

我无法在我的 angular 7 应用程序中显示存储在我的 firebase 存储中的图像。如何在不使用服务和从组件中存储的根目录中简单检索图像然后在 html 中循环的情况下执行此操作。

我已经尝试了不同的方法来获取下载 URL，但它们不起作用。其他方法需要使用我不想在这种情况下使用的服务。

成分

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from '@angular/fire/storage';
import { Observable } from 'rxjs'

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

export class ImageviewerComponent implements OnInit {
  images: Observable<any[]>;

  constructor(private storage: AngularFireStorage) {
    storage.ref("/").getDownloadURL().subscribe(downloadURL => {
      this.images = downloadURL;

    });
   }
}

HTML

        <div class="gal-list-view">
          <div style="margin: 20px">
              <div class="responsive" style="margin: 20px">
                  <div class="gallery" *ngFor="let image of images | async">
                    <a target="_blank"> …

我正在 angular7 中建立到我的系统的 http 连接。但是，它在模块中出错。当我创建 get 请求时会出现此消息：

Type 'Promise<any>' is missing the following properties from type 'User': id, user, email

模块：

export class User { 
  id: number
  user: string
  email: string
}

要求：

users: User;

    this.userService.getUsers().subscribe(
          response => {
            if (!response) {
              console.log(Error)
            } else {
              this.users = response
            }
          })

Http获取：

getUsers() {
        return this.service.get(this.endpoint)
        .map((response) => {
            return response;
        });
    }

服务：

standardHeaders() {
        const headers = new HttpHeaders();
        headers.append('Content-Type', 'application/json');
        if (this.authToken) {
            headers.append('X-Authorization', this.authToken);
        }
        return …

我有一个巨大的 Angular 应用程序，其中有几个组件导出为@angular/elements.

这些组件（尽管它们仍然使用共享服务和组件）用于网站的不同部分，该部分不是单页应用程序的一部分，而是由服务器提供的独立页面。

导出的角度元素 在新页面中运行良好，但我认为加载整个 SPA 包（si 5MB+）只是为了渲染两个组件是不可接受的。如何为每个角度元素生成不同的 javascript 文件？

我想像这样渲染我的组件：

<my-first-component />
<script src="./my-first-component.js"></script>

<my-second-component>
<script src="./my-second-component.js"></script>

但是如果页面生成单个包，组件（或者更好的是自定义元素）将不会相互独立！很明显，在这种情况下，串联不起作用。

我怎么解决这个问题？

谢谢

我们有一个嵌套 JSON 对象，用于对象导出 CSV 的平面级别的 json 正在工作，但对于嵌套对象，它不起作用（站点对象）。

对于这个实现，我们使用了 PrimeNg 库：

以下是json响应：

 "data": [
        {
            "towerId": "gfsjfdy32ur",
            "towerName": "qjdhkud",
            "exAxisTower": false,
            "tbuShareable": null,
            "technologyPartnerRNP": "TP_RNP_EID",
            "technologyPartnerTNP": "TP_TNP_EID",
            "ssrLongitude": "323",
            "ssrLatitude": "323",
            "region": "REG_J",
            "province": "PROV_SU",
            "district": "PROV_SU_D1",
            "scheme": null,
            "towerType": "TYPE_CL",
            "towerKind": null,
            "category": "CAT_SM",
            "proposedHeight": 323,
            "useShelter": "SHELT_Y",
            "azimuth": "dewdew",
            "towerProviderNumber": null,
            "towerProviderName": null,
            "farEnd1": null,
            "farEnd2": null,
            "farEnd3": null,
            "towerStatus": "Plan on Progress",
            "projectStatus": "SSR Completed",
            "sites": [
                {
                    "id": "6a056c60-5774-40ad-bd00-2523cbfdb8a4",
                    "created": "2019-12-09T10:52:18.293+0000",
                    "createdId": "ff06c5a4-135c-40b7-83f3-3648ec035efc",
                    "modified": "2019-12-09T10:52:18.293+0000", …

我在我的“@angular/cli”：“~7.0.7”项目中使用“jspdf”：“^1.5.3”包，

我使用 pdf 库创建了简单的文件，如下所示，现在要求将http://www.africau.edu/images/default/sample.pdf pdf附加到我创建的 jsPDF 文件并下载它。

//app.component.ts file
   <a (click)="download();">ClickHere</a>

//app.component.ts file
import * as jsPDF from 'jspdf'

download() {
  var doc = new jsPDF('p', 'pt', 'letter');    
  var pageHeight = doc.internal.pageSize.height;
  var y = 800;
  var x = 800;
  doc.text(100, 100, 'com1');

  if (y >= pageHeight) {
    doc.addPage();
    doc.text(100, 100, 'com1');
    y = 0;
  }
  if (x >= pageHeight) {
    doc.addPage();
    doc.text(100, 100, 'com1');
    x = 0;
  }

  const merge = require('easy-pdf-merge');
  merge(doc, 'http://www.africau.edu/images/default/sample.pdf', function (err) {
  if …