标签: angular7

我想压缩构建angular项目时创建的包文件.我ng build --environment=${environment}用来构建当前的应用程序和版本"@angular/compiler-cli": "^4.0.0"不生成.gz文件到dist文件夹.生成.gz包文件的最简单方法是什么(最好不要触摸webpack.config.js文件)？PS:我知道.gz有时创建文件的选项会被angular/cli团队删除.但我绝望地需要它,因为我的捆绑文件非常庞大.

我想使用“角度材料日期”选择器，但出现此错误。

未捕获的错误：模块'AppModule'导入了意外的指令'MatFormField'。请添加一个@NgModule批注。

app.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {MatFormField} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatFormField
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我收到致命错误:CALL_AND_RETRY_LAST分配失败 - Angular 7.1升级后JavaScript堆内存不足.以前的版本6.1工作得非常好.

我在运行ng build --prod命令时仅在Azure DevOps中收到错误.它在当地建造完美.

以下是详细日志.知道我为什么会收到这个错误吗？

2018-11-22T06:40:36.2804965Z ##[section]Starting: npm build
2018-11-22T06:40:36.2809301Z ==============================================================================
2018-11-22T06:40:36.2809365Z Task         : npm
2018-11-22T06:40:36.2809456Z Description  : Install and publish npm packages, or run an npm command. Supports npmjs.com and authenticated registries like Package Management.
2018-11-22T06:40:36.2809496Z Version      : 1.0.27
2018-11-22T06:40:36.2809531Z Author       : Microsoft Corporation
2018-11-22T06:40:36.2809612Z Help         : [More Information](https://go.microsoft.com/fwlink/?LinkID=613746)
2018-11-22T06:40:36.2809648Z ==============================================================================
2018-11-22T06:40:36.7158800Z SYSTEMVSSCONNECTION exists true
2018-11-22T06:40:36.8019327Z SYSTEMVSSCONNECTION exists true
2018-11-22T06:40:36.8872807Z [command]C:\Windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npm.cmd" --version"
2018-11-22T06:40:37.5174051Z 6.4.1
2018-11-22T06:40:38.9461529Z …

我很难确定我应该在核心模块和共享模块中“导入”和“导出”什么。例如，在我的共享模块中，我导入和导出了 CommonModule，而仅导出了 ReactiveFormsModule。在我的核心模块中，我仅导入模块并导出组件。我想知道我应该在核心和共享模块中“导入”和“导出”什么？我已经在 stackoverflow 和文档中阅读了其他示例，但我仍然感到困惑。请检查下面我的结构/代码。谢谢。

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { ToggleFullscreenDirective } from './directives/toggle-fullscreen.directive';
import { ViewComponent } from './view/view.component';
import { ErrorsComponent } from './reusable-error-page/errors.component';

@NgModule({
  exports: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent,
    CommonModule,
    ReactiveFormsModule
  ],
  imports: [
    CommonModule
  ],
  declarations: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent
  ]
})
export class SharedModule { }

核心模块

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; …

我找到了一些关于如何使用.cdk-drag-preview和.cdk-drag-placeholder类的基本示例，当没有嵌套元素时，它们似乎可以完成这项工作。

基本上，我有一个动作列表，每个动作都以复杂的mat-card格式表示。这部分实际上是作为另一个组件完成的，但为了这个例子，我会尽可能地让它变得基本。

我的例子类似于这个结构：

<style>
    .my_action { border: 2px solid red; }
</style>

<div class="drop_area" cdkDropList>
    <div *ngFor="let action of actions"
        (cdkDragStarted)="dragStart($event, action)"
        (cdkDragMoved)="dragMoved($event, action)"
        (cdkDragEnded)="dragEnded($event, action)" cdkDrag>

        <mat-card class="my_action">
            {{ action.name }}
        </mat-card>

    </div>
</div>

在角分量中

dragStart(e, action) { 
    // initialize start X coord
    this.startX = 0;

    // initialize start Y coord
    this.startY = 0;
}

dragMoved(e, action) {
    // record new position
    this.endX = e.pointerPosition.x;
    this.endY = e.pointerPosition.y;

    // logic to set startX …

我是离子框架的新手，并试图在我的应用程序中集成条纹。我做了一些研究，发现只有这个https://ionicframework.com/docs/native/stripe。它解释得不够好。我如何在 .html 文件上实现这个概念，比如为用户提供一个按钮来触发付款？

我也试过这个https://fireship.io/lessons/stripe-elements-angular/但一路上迷路了。

checkout.page.ts

import { Component, OnInit, Input, HostListener } from '@angular/core';
// import { Stripe } from '@ionic-native/stripe/ngx';
import { AuthService } from '../services/auth.service';
import { FirebaseService } from '../services/firebase.service';
import { AngularFireFunctions } from '@angular/fire/functions';
import { Router } from '@angular/router';

import { Observable, of } from 'rxjs';

declare var Stripe;

@Component({
  selector: 'app-rentals',
  templateUrl: './rentals.page.html',
  styleUrls: ['./rentals.page.scss'],
})
export class RentalsPage implements OnInit {

  user$: Observable<User>;

    constructor(
        private router: Router,
      // …

所以，我在安装 moment 插件后破坏了我的本地安装。这个Momento 插件

安装完成后，当我将命令放入ng serve运行项目时，控制台返回的是：

无法确定“@angular/cli”的版本。这可能意味着您的本地安装已损坏。请重新安装您的软件包。

我遵循了这个：找不到模块“@angular-devkit/build-angular”，但什么也没有。

所以，我试过重新安装 angular，但没有，我试过运行 npm update 但没有……我不知道如何解决这个问题，我需要工作。

另外，尝试通过 git 重新结帐，但没有。

该项目诞生于 Angular 7 和 Material。如何解决这个问题？

我正在本地环境中运行一个角度项目，其版本如下。

npm version : 6.9.0\nAngular CLI: 7.3.9\nNode: 10.16.0\nOS: win32 x64\n

我无法运行项目并收到以下错误：

    ERROR in ./src/assets/styles/style.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/assets/styles/style.scss)\n    Module build failed (from ./node_modules/sass-loader/lib/loader.js):\n    Error: Cannot find module 'node-sass'\n        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)\n        at Function.Module._load (internal/modules/cjs/loader.js:562:25)\n        at Module.require (internal/modules/cjs/loader.js:690:17)\n        at require (internal/modules/cjs/helpers.js:25:18)\n        at Object.sassLoader (..\\node_modules\\sass-loader\\lib\\loader.js:46:72)\n    ERROR in ./src/app/modules/shared/components/loader/loader.component.scss\n    Module build failed (from ./node_modules/sass-loader/lib/loader.js):\n    Error: Cannot find module 'node-sass'\n        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)\n        at Function.Module._load (internal/modules/cjs/loader.js:562:25)\n        at Module.require (internal/modules/cjs/loader.js:690:17)\n        at require (internal/modules/cjs/helpers.js:25:18)\n        at Object.sassLoader (..\\node_modules\\sass-loader\\lib\\loader.js:46:72)\n    i \xef\xbd\xa2wdm\xef\xbd\xa3: Failed to compile.\n

我也尝试过删除node_modules并重新安装

我有一个关于将 Angular 7 应用程序的集合发送File到 .NET Core 3 服务器的问题。

File我有用于向服务器发送单个数据的功能代码。File但是当我尝试发送- ie:的集合时，我遇到了问题File[]。这是控制器的操作：

[HttpPost]
public async Task<IActionResult> Upload([FromForm(Name = "files")] List<IFormFile> files)
{
      // implementation...
{

我FormData按照用于将单个文件发送到服务器的代码发送：

const formData = new FormData();
formData.append('files', this.files);

这会导致编译器出现错误（参见屏幕截图）：

FormData 无法处理File[].

如果我要更改相同的代码来处理单个文件，例如通过选择集合中的第一个元素，文件将成功发送到服务器。就像这样：

const formData = new FormData();
formData.append('files', this.files[0]);

请求的发送方式如下：

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Disposition' : 'multipart/form-data' }),
};

  postPhotos(model: FormData): Observable<any | ErrorReportViewModel> {
    return this.http.post('api/Photograph', model, httpOptions)
    .pipe(
      catchError(error => this.httpErrorHandlerService.handleHttpError(error))); …

将 angular 7 更新为 9 后，我在无法读取 null 的属性“fileName”中出现错误。我已将所有依赖项更新到最新版本。

包.json

{
    "name": "project name",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "9.0.6",
        "@angular/cdk": "^9.1.3",
        "@angular/cli": "9.0.6",
        "@angular/common": "9.0.6",
        "@angular/compiler": "9.0.6",
        "@angular/core": "9.0.6",
        "@angular/forms": "9.0.6",
        "@angular/http": "7.2.16",
        "@angular/platform-browser": "9.0.6",
        "@angular/platform-browser-dynamic": "9.0.6",
        "@angular/router": "9.0.6",
        "@ngui/datetime-picker": "^0.16.2",
        "angular-flash-message": "^3.4.0",
        "angular2-clipboard": "^2.0.14",
        "angular2-color-picker": "^1.3.1",
        "angular2-cookie": "^1.2.6",
        "angular2-flash-messages": "^3.0.1",
        "angular2-modal": "^3.0.3",
        "angular2-multiselect-dropdown": "^4.6.3",
        "chart.js": …