小编Vik*_*kas的帖子

我在Ionic v3中扩展了默认的web pack配置,用于强制缓存破坏程序.我能够指纹生成的javascript工件,但无法在assets文件夹下指纹图像和JSON文件.我从中获取帮助 Bundled files and cache busting.

摘录 webpack config.js

module.exports = {
  // ...
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
  },
  plugins: [
    new WebpackChunkHash({algorithm: 'md5'}) // 'md5' is default value
  ]
}

以上是指纹识别javascript包的方法,它工作正常我想在资产文件夹中添加哈希/指纹图像和JSON文件我也使用相同的方法处理图像,但它不起作用.我扩展了webpack config.js并添加了一个新的图像规则.默认情况下,webpack直接将图像和资源复制到输出文件夹.

复制Config.js

module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },

这里的图像和其他资产都是直接复制的.我在扩展的webpack.config.js中添加了一条新规则,但构建过程忽略了它.如何解决这个问题？

摘录 webpack config.js

 {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        options: {

            name:'[name].[hash].[ext]',//adding hash for …

我正在使用节点版本8.9.4,npm版本5.6.0我不知道为什么发生这种情况 ng build --dev正在生成vendor.bundle.js ng build --prod而不生成vendor.bundle.js这里是截图

输出与ng build - prod [
[使用ng-build输出--​​dev]

这是我的package.json

`{
  "name": "app1",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "0.0.28",
    "@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",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": …

环境

我的角应用程序中有一个很大的组件树,有多个路径出口,可以显示每个级别上的特定组件.最深层次是管理某些信息的模式.

问题

如果你可以看到它(父组件),我可以阻止通过鼠标从我的子组件到父组件事件的交互,但是当我使用键盘时,我能够导航到父组件并在我的所有父组件中选择选项零件

这个问题

我该如何防止这种行为？

这是我的文件userdata.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Observable} from 'rxjs';
import { map } from "rxjs/operators";
import { catchError } from 'rxjs/operators';
import { Data } from './userdata';

@Injectable()
export class UserDataService {

  url : "http://localhost:4200/assets/data/userdata.json";
  constructor(private http:Http) { }  

  getDataWithObservable() : Observable<any>{
      return this.http.get(this.url)
            .pipe(
              map(this.extractData),
              catchError(this.handleErrorObservable)
            );
  }

    private extractData(res: Response) 
    {
        let body = res.json();      
        return body;
    }

    private handleErrorObservable (error: Response | any) 
    {   
        return Observable.throw(error.message || error); …

当我尝试使用此命令安装angular cli时

npm install -g @angular/cli

我得到了下面提到的错误

npm WARN可选SKIPPING OPTIONAL DEPENDENCY:fsevents@^1.0.0(node_modules\@angular\cli \node_modules\chokidar \node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY:不支持的fsevents@1.2.4平台:want {"os ":""darwin","arch":"any"}(当前:{"os":"win32","arch":"x64"})npm WARN可选跳过选项依赖:fsevents@^1.1.2(node_modules\@angular\cli \node_modules\watchpack \node_modules\chokidar \node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY:不支持的fsevents@1.2.4平台:want {"os":"darwin","arch":"任何"}(当前:{"os":"win32","arch":"x64"})npm WARN可选SKIPPING OPTIONAL DEPENDENCY:fsevents@^1.1.2(node_modules\@angular\cli \node_modules\webpack-dev -server \node_modules\chokidar \node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY:不支持的fsevents@1.2.4平台:want {"os":"darwin","arch":"any"}(当前:{ "os":"win32","arch":"x64"})npm WARN ajv-keywords@3.2.0需要一个同行 jv@^6.0.0但没有安装.npm WARN可选SKIPPING OPTIONAL DEPENDENCY:node-sass@4.9.0(node_modules\@angular\cli \node_modules \node-sass):npm WARN可选SKIPPING OPTIONAL DEPENDENCY:node-sass@4.9.0 postinstall:`node scripts/build .js npm WARN可选SKIPPING OPTIONAL DEPENDENCY:退出状态1

任何想法是什么问题？

我的节点版本是6.9.2,npm版本是3.10.9

我想将我的json-array转换为我创建的界面,并希望在浏览器中显示它.我认为我的界面可能有问题,但我无法弄明白...... 我需要更改什么来让我的代码运行？

接口:

 export interface Video {
  id: number;
  name: string;
  description: string;
  createdAt: string;
}

app.ts

import {JSONP_PROVIDERS, Jsonp} from '@angular/http';
import {Observable} from '../../../node_modules/rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';
import {Video} from './networking/api';

    private videoData: Observable<Video[]>;
    ngOnInit() {
                this.displayNewstVideo(10);
            }

            private displayNewstVideo(count: number) {
                this.videoData = this.jsonp
                .get('localhost:8080/video/newst/' + count + '?jsonp=JSONP_CALLBACK')
                .map(res => (res.json() as Video[]));
                alert(this.videoData.count);
            }

app.html

<div class="container">
  <div class="video" style="font-family:sans-serif" *ngFor="#entry of videoData | async;  #i = index">
      <br *ngIf="i > 0" />
      <span …

我正在尝试构建我的Angular 5应用程序,我收到错误:

无法在/home/brightwater/Differ/src/app/thread-lists/thread-lists.component.ts中确定类ThreadListTabsComponent的模块!将ThreadListTabsComponent添加到NgModule以修复它.

这很令人困惑,因为我在模块中导入有问题的组件:

thread-lists.module.ts:

import { OtherModules } from './modules-everywhere';
import { NgModule }      from '@angular/core'

import { SomeOtherComponents }  from './other-components.component';
import { ThreadListTabsComponent } from './thread-list-tabs.component';

@NgModule({
  imports: 
  [ 
    OtherModules
  ],
  declarations: [
    OtherComponents,
    ThreadListTabsComponent
  ],
  exports: [
    OtherComponents,
    ThreadListTabsComponent
  ],
  providers: [ ThreadListsService ]
})


export class ThreadListsModule { }

这是组件:

线程列表tabs.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Router }   from '@angular/router';
import { ThreadListsService }   from …

我是角度新手6我已经从链接下载了现成的角度模板

导航到根文件夹并执行npm install尝试运行应用程序ng serve但它显示错误

找不到本地工作区文件('angular.json').

的package.json

{
  "name": "angular-6-registration-login-example",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/cornflourblue/angular-6-registration-login-example.git"
  },
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.5",
    "rxjs": "^6.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@types/node": "^10.0.4",
    "angular2-template-loader": "^0.6.2",
    "html-webpack-plugin": "^3.2.0",
    "raw-loader": "^0.5.1",
    "ts-loader": "^4.3.0",
    "typescript": "^2.8.3",
    "webpack": "4.8.1",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": …

我有一个文本输入,我正在听取更改.

零件

name = new FormControl('',Validators.required);

ngOnInit() {
  this.data = 'oldvalue';
  this.checkName();
}

checkName() {
  this.name.valueChanges.subscribe(val=>{
     console.log(val);
     this.data= "newvalue"; // updating Value
  });
}

HTML

<input name="name" formControlName="name">

到目前为止我的尝试:

component.spec.ts

it('should test data field ', () => {
    const fixture = TestBed.createComponent(UserComponent);
    const app=fixture.debugElement.componentInstance;
    const el = fixture.nativeElement.querySelector('input');
    el.value ='something';
    dispatchEvent(new Event(el));
    fixture.detectChanges();
    fixture.whenStable().then(()=>{expect(app.data).toBe('newvalue');
});

问题: 即使填充了输入字段,也不会执行subscribe回调中的代码.

它总是显示:

预期'oldvalue'为'newvalue'.

我也尝试了setValue()方法,但它没有用.它永远不会进入订阅回调

app.name.setValue('vikas');
fixture.detectChanges();
fixture.whenStable().then(()=>{expect(app.data).toBe('newvalue');

我在Angular 2测试和Angular2组件中引用了更新输入html字段 :测试表单输入值更改但没有运气:(

我错过了什么？

我正在使用Angular材质表,我想在表格中设置边框,使用CSS我能够设置边框:正常情况 [
但是当特定单元格的内容增加时,相邻单元格的边界不会增长,并且该表格看起来非常糟糕,具有额外内容
这是CSS:

`.example-container {
  display: flex;
  flex-direction: column;
  max-height: 500px;
  min-width: 300px;
}

.mat-table {
  overflow: auto;
  max-height: 500px;
}
.mat-column-name{
  border-left: 1px solid grey;
  min-height: 48px;

}
.mat-column-weight{
  border-left: 1px solid grey;

   min-height: 48px;

.mat-column-symbol{
 border-left: 1px solid grey;
   min-height: 48px;
}`

HTML`

<!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->

<!-- Position Column -->
<ng-container matColumnDef="position">
  <mat-header-cell …