标签: angular5

如何更新Angular 5？这是我的package.json:

"dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": …

我需要将我的项目从Angular 4更新为Angular 5+,

我需要将以下所有依赖项更改为Angular 5+.

我还将Angular CLI更新为1.5.0.

我试图创建新项目但似乎只创建了Angular 4项目.

新的NG5_Project

"dependencies": {
  "@angular/animations": "^4.2.4",
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "core-js": "^2.4.1",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

我究竟做错了什么.

CLI配置:

我正在使用Angular with Material

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>

我正在尝试添加一个图标到按钮,但我无法弄清楚如何做到这一点,并找不到这方面的文档.

https://material.angular.io/components/button/api

看文件,有这样的:

该按钮具有以下html:

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
    <img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
    <span _ngcontent-c1="">Material</span>
  </span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>

这是正确的方法吗？

运行单元测试时,我不断收到以下错误

Error: StaticInjectorError(DynamicTestModule)[ApiService -> HttpClient]: 
      StaticInjectorError(Platform: core)[ApiService -> HttpClient]: 
        NullInjectorError: No provider for HttpClient!

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ApiService {

  constructor(private http: HttpClient) { }
  url = './assets/data.json';

  get() {
    return this.http.get(this.url);
  }
}

api.service.spec.ts

import { TestBed, inject } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { ApiService } from './api.service';

describe('ApiService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
      ],
      providers: …

我已阅读以下博客和文档

• 角度博客
• Alligator IO Docs
• 官方文件

并没有关于如何从4.x迁移到5的明确信息.

尝试以下命令

• npm安装

  npm install @angular/{animations,common,compiler,compiler-cli,
              core,forms,http,platform-browser,platform-browser-dynamic,
              platform-server,router}@5.0.0
  

  Run Code Online (Sandbox Code Playgroud)

• 纱线安装

  yarn add @angular/{animations,common,compiler,compiler-cli,
           core,forms,http,platform-browser,platform-browser-dynamic,
           platform-server,router}@5.0.0
  

  Run Code Online (Sandbox Code Playgroud)

• 尝试了更新指南

   npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' 
          @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' 
          @angular/core@'^5.0.0' @angular/forms@'^5.0.0'
          @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' 
          @angular/platform-browser-dynamic@'^5.0.0' 
          @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' 
          typescript@2.4.2 rxjs@'^5.5.2'
  
   npm install typescript@2.4.2 --save-exact
  

  Run Code Online (Sandbox Code Playgroud)

没有什么比我好.请帮忙

我正在尝试按照本指南将我的Angular应用程序从v5更新到v6 .

我成功运行了所有这些命令:

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

问题是我在运行此命令时出错:

ng update @angular/core
                  Package "@angular/flex-layout" has an incompatible peer dependency to "rxjs" (requires "^5.5.0", would install "6.2.0").
                  Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.6.2")
Incompatible peer dependencies found. See above.

我不知道如何处理这个问题并且我不想自己尝试以避免破坏应用程序.

有人可以建议做什么？

我目前的依赖关系如下:

{
 ....
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.10",
    "@angular/compiler": "^5.2.10",
    "@angular/core": "^5.2.10",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.10",
    "@angular/http": "^5.2.10", …

我有文件上传控件,它保存所选文件,如下所示,

<div class="Block">
  <label id="lbl">File </label>
  <input #fileInput type='file'/>
</div>

我有一个提交按钮,如下所示,

<button type="button" class="btn btn-primary" 
     (click)="uploadDocument()">Upload File</button>

当我选择一个文件并单击上传按钮时,我需要文件中的内容,而不是将其发送到服务器并从那里读取.

注意:文件类型为 csv

我用第6列创建了网格列表,我希望网格标题在小屏幕设备上占据100%的宽度.现在它也在小屏幕上创建了6列

预期:一个网格标题仅占移动设备的100%空间

我有来自后端的数据流,我看到它在控制台中打印现在我正在尝试将事件推送到dataSource其抛出错误dataSource未定义.有人可以帮助如何动态添加数据到物化表？

stream.component.html

<mat-table #table [dataSource]="dataSource"></mat-table>

stream.component.ts

import {
    Component,
    OnInit
} from '@angular/core';
import {
    StreamService
} from '../stream.service';
import {
    MatTableDataSource
} from '@angular/material';
import * as io from 'socket.io-client';

@Component({
    selector: 'app-stream',
    templateUrl: './stream.component.html',
    styleUrls: ['./stream.component.css']
})
export class StreamComponent implements OnInit {
    displayedColumns = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
    dataSource: MatTableDataSource < Element[] > ;
    socket = io();

    constructor(private streamService: StreamService) {};

    ngOnInit() {
        this.streamService.getAllStream().subscribe(stream => {
            this.dataSource = new MatTableDataSource(stream);
        }); …

我有一个使用Angular 5的小型Web应用程序,突然间我在浏览器控制台中收到这个奇怪的错误消息:

ncaught Error: Template parse errors:
No provider for ControlContainer ("
</p>
<form class="container" (ngSubmit)="update()">
  [ERROR ->]<app-form-group-component 
[formGroup]="additionalInformation"></app-form-group-component>
      <button "): ng:///AppModule/KickoffComponent.html@4:2

之前没有发生这种情况,我不知道有任何改变.我不知道那条消息试图告诉我什么.

这是form-group的组件模板,似乎无论如何都是无效的:

<div *ngFor='let e of formGroup' class="form-group">
<label for="{{e.key}}">{{e.label}}</label>
<input type="{{e.type}}" name="{{e.key}}" 
[(ngModel)]="e.value" class="form-control" 
[ngClass]='{"is-valid": e.valid === true && e.required === true}'
        />
    </div>

这是我使用form-group的模板:

<form class="container" (ngSubmit)="update()">
 <app-form-group-component [formGroup]="additionalInformation"></app-form-group-component>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
<app-notification [notification]="notification"></app-notification>

我盯着它看了几个小时,但我找不到任何错误.

我应该提一下,我不使用Angular的FormGroup,而是使用我自己的解决方案(因为我认为他们的工程过度,并不符合我的特定需求).会不会有某种名字碰撞？当然,在app.module中,我导入了用于双向绑定的FormsModule,并拦截了表单的提交.通知组件至少在没有投诉的情况下工作.

我会非常感谢任何帮助.

编辑: 我被要求分享我的TS代码.

失败的组件:

import { Component, Input } from '@angular/core';
import { FormGroup } from '../../models/form-group';

@Component({ …