标签: angular6

我刚刚升级到Angular 6，但是现在我们的Jenkins构建失败了。

它正在运行以下命令：

ng test -c karma.conf.cli.js

但是错误是：

在项目“ projectname”中找不到配置“ karma.conf.cli.js”

但是，相关文件存在于项目的根目录中。该命令在Angular 5上运行良好。谢谢

仅供参考，我可以通过在生成服务器上运行相同的命令来重现该错误。我们还刚刚将Node.js升级到v8.11.2（最新的LTS）

我试图从HTTP请求中捕获错误，并基于错误代码向用户显示错误消息。为此，我使用rxjs中的catchError运算符。

但是我收到这个错误，指出类型Observable <Response>上不存在属性'catchError'

以下是我的package.json

"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"bootstrap": "^3.3.7",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"

以下是我正在实现的用于处理http请求的服务中使用的导入。

import { catchError } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Http } from '../../../node_modules/@angular/http';
import { Observable } from 'rxjs';
import { AppError } from './../common/app-error';
import { NotFoundError } from '../common/not-found-error';

这是我从服务器上删除帖子并为预期和意外错误返回自定义错误的功能。

deletePost(id:number){
return this.http.delete(this._url+"/"+id).catchError(
  (error:Response)=>{
    if(error.status===404){
      return Observable.throw(new NotFoundError());
    } …

我正在尝试在服务中设置数据,然后在服务中填充数据后导航,我有一个时间问题,页面在服务能够填充之前导航.

我在服务中有以下代码

addToken(token) {
  this.cookieService.set( 'token', token );
}

单击按钮时的以下代码: -

this.token.addToken(res);
this.router.navigate(['/admin']);

触发路由器后,/ admin页面会触发带有以下标题的端点: -

authHttpHeaders = new HttpHeaders({
    'Authorization': 'Bearer ' + this.token.getToken(),
    'Content-Type' : 'application/json',
    'Cache-Control': 'no-cache'
});

getToken()函数只接收来自cookie的令牌: -

getToken() {
  return this.cookieService.get('token');
}

如何在触发路由器导航之前确保addToken()已完成.

我知道我可以通过setTimeout实现它,但我真的不喜欢这样做.

在导航路由器被触发之前,我宁愿有某种形式的可观察或看到令牌不等于null或空.

在此先感谢您的帮助.

我使用angular cli [version - 6.1.3]创建了一个项目,并尝试在组件中导入JSON文件 -

import * as serverJson from '../../config/appdetails.json';

我想在typings.d.ts中包含以下内容 -

declare module "*.json" {
    const value: any;
    export default value;
}

但是,项目结构中没有typings.d.ts.

在这种情况下,以角度6导入JSON文件的最佳方法是什么？

我试图在Angular应用程序中对LinkedIN API进行简单的API调用。我的API密钥以及所有这些都是完美的。由于某些原因，当我的应用程序调用此函数时，出现以下错误：“未找到模块：错误：无法解析'rxjs / add / operator / switchMap”

我什至添加了这一行：

import 'rxjs/add/operator/switchMap';

到此组件的顶部。

这是我的component.ts总计：

import { Component } from '@angular/core';
import { LinkedInService } from 'angular-linkedin-sdk';
import 'rxjs/add/operator/switchMap';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'LItest';
  public apiKey;
  private basicProfileFields = ['id', 'first-name', 'last-name', 'maiden-name', 'formatted-name', 'phonetic-first-name', 'phonetic-last-name', 'formatted-phonetic-name', 'headline', 'location', 'industry', 'picture-url', 'positions'];
  public lastResponse;


  public constructor(private _linkedInService: LinkedInService) {
  }

  public rawApiCall(){
    const url = '/people/~?format=json';
    this._linkedInService.raw(url)
      .asObservable()
        .subscribe({
          next: (data) => …

我有以下角度6中的表，该表是从数据库动态获取的。

<table *ngIf="attendanceModel.length > 0; else attendanceModel_else" class="table table-responsive" id="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Designation</th>
        <th>Morning Session</th>
        <th>Evening Session</th>
        <th>Total Hours</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let attendance of attendanceModel | groupBy:'employee_id'">
        <tr>
          <td colspan="6" class="text-center text-muted"> &laquo; Name: {{ attendance.key }} &raquo; </td>
        </tr>
        <tr *ngFor="let attendance of attendance.value">
            <td>{{attendance.employee_id.profile.first_name}} {{attendance.employee_id.profile.last_name}}</td>
            <td>{{attendance.employee_id.designation}}</td>
            <td>{{attendance.morning_session}}</td>
            <td>{{attendance.evening_session}}</td>
            <td>{{attendance.total_hours | number:'1.0-1' }}</td>
            <td *ngIf="attendance.status == 'Verified'; else inactive_else">
              <a class="btn btn-link text-success p-0" (click)="notVerify(attendance._id)">{{attendance.status}}</a>
            </td>
            <ng-template #inactive_else>
              <td *ngIf="attendance.status == 'Not Verified'">
                <a class="btn …

我正在使用Angular 6并NgbModal喜欢

openViewDescriptionModal(id) {
  const viewModal = this.modalService.open(ProductComponent, {size: 'lg'});
}

但这会打开宽度为50％的模态，而两侧都留有25％的空间。

我想将模态宽度重新设计为最大窗口宽度的90％。

但是仅有sm和lg允许的大小NgbModal。

如何增加模态的宽度，或者可能如何使用自定义类来增加模态的宽度？

我尝试将值设置xl为，size但是它不起作用。我还尝试自定义模式类的CSS，但这也不起作用。

描述

我在为“ background”属性提及的url（）中收到相对路径错误。

当我使用绝对路径时，似乎工作正常。

错误信息

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_config.scss:12:24: Can't resolve '../assets/img/DSC_0291.JPG' in '/home/nithinchandranp/workspace/nithin-portfolio/src'

   @if $show-home-image{
       &#bg-img{
         background: url(../assets/img/DSC_0291.JPG);
                    ^
          background-attachment: fixed;
          //background-size: cover;

Run Code Online (Sandbox Code Playgroud)

_config.scss

$primary-color:grey;
$show-home-image:true;
//$home-image: url('/src/assets/img/DSC_0291.JPG');
$background-opacity: 0.8;
$overlay-color:black;
$secondary-color:#eece1a;


@mixin background {
    @if $show-home-image{
        &#bg-img{
            background: url(../assets/img/DSC_0291.JPG);  
            background-attachment: fixed;
            //background-size: cover; 


        &:after {
            content: '';
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: rgba($overlay-color,$background-opacity);

        }
        }
    } …

有什么方法可以根据要求设置状态代码，例如404、401、500？

我正在使用Angular6。有很多教程显示了解决方案，但是这些教程太旧了，根本无法使用。全部提供了关于不同server.ts文件的显示解决方案，该解决方案与Angular网站上显示的新文件无关。我能够渲染所有页面的服务器端。当URL中包含一些意外内容时，我将通过跳过位置更改选项将路由更改为404页面。

在调用404组件时，我要设置statuscode = 404。

服务器

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { …

我正在尝试根据id属性设置角度模型值.如果"id"具有从服务获取数据的值,则设置默认值

ngOnInit() {
    // tslint:disable-next-line:radix
    let id = parseInt(this.route.snapshot.paramMap.get('id'));
    this.departmentId = id;

    if (id === NaN) {
       // tslint:disable-next-line:max-line-length
       this.departmentModel = new Department(1, 0, '', 'admin', new Date(2018, 11, 11), 'localhost', 'admin', new Date(2018, 11, 11), 'localhost');
    } else {
       this.departmentService.getDepartment(this.departmentId).subscribe(data => this.departmentModel = data);        
    }
}

但它始终属于其他部分,即使"id"具有值.我该如何解决这个问题.任何帮助都会受到高度关注.