标签: angular

尝试在角度cli中创建库时,我收到以下错误

Schematic "library" not found in collection "@schematics/angular".
Error: Schematic "library" not found in collection
"@schematics/angular".
    at SchematicEngine.createSchematic (/home/rafaelvicio/node-v8.9.3-linux-x64/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/src/engine/engine.js:143:23)
    at CollectionImpl.createSchematic (/home/rafaelvicio/node-v8.9.3-linux-x64/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/src/engine/collection.js:12:29)
    at Object.getSchematic (/home/rafaelvicio/node-v8.9.3-linux-x64/lib/node_modules/@angular/cli/utilities/schematics.js:47:23)
    at Class.run (/home/rafaelvicio/node-v8.9.3-linux-x64/lib/node_modules/@angular/cli/tasks/schematic-get-options.js:12:40)
    at Class.beforeRun (/home/rafaelvicio/node-v8.9.3-linux-x64/lib/node_modules/@angular/cli/commands/generate.js:101:31)
    at Promise.resolve.then (/home/rafaelvicio/node-v8.9.3-linux-x64/lib/node_modules/@angular/cli/ember-cli/lib/cli/cli.js:138:24)
    at <anonymous>

命令 ng --version

显示了这个

Angular CLI: 1.7.4
Node: 8.9.3
OS: linux x64
Angular: 


node -v
v8.9.3

npm -v
5.5.1

我有一个file.ts文件，它不包含组件/服务/等，而只是一种数据类型。

当我尝试编译程序时，出现以下错误：模块构建失败：错误：TypeScript编译中缺少我的path \ File.ts。请通过“文件”或“包含”属性确保它在您的tsconfig中。

然后，我将tsconfig.app.json文件更改为包含include标记：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "include": [
        "**/*.ts"
    ],
  "exclude": [
    "**/*.spec.ts"
  ]
}

如提示信息所示，但出现此错误：

错误TS18003：在配置文件“ tsconfig.json”中找不到输入。指定的“包含”路径为“ [[src / ** / *。ts“]]，“排除”路径为“ [” ** / *。spec.ts“]”。

我究竟做错了什么？

我试图在运行时将角度代码的*ngIf指令分配给模板.无法找到办法.view/templateref是一个选项吗？或者有一个不同的方式和一个更容易的方式.有可能首先吗？

更新:

代码有点混乱和混乱,所以避免它.但是这里是DOM代码的外观,以及为什么我需要动态添加内置结构指令.

<div>
  <input type="text" [value]="userProvidedValue">
  <textarea [value]="someDynamicDOMCodefromWYSIWYG">
    <!-- user provided provided code or dynamic code -->
  </textarea>
</div>
<div>
  <select *ngIf="fetchArraywithHttpFromuserProvidedValue">
    <option *ngFor="let val of fetchArraywithHttpFrom-userProvidedValue" value=""></option>
  </select>
</div>
<div>
  <ng-template>
    <!-- Some User provided code or dynamic code which might need to use *ngIf OR *ngFor -->
    <!-- The *ngIf OR *ngFor will be added dynamically based on a manipulator function which is decided from the value of fetchArraywithHttpFromuserProvidedValue -->
  </ng-template>
</div>

更新

我正在根据userProvidedValue值执行获取请求,并且获取请求的结果决定了fetchArraywithHttpFromuserProvidedValue …

尝试显示可编辑输入网格时遇到性能问题.它开始变得非常慢,大约200行和10列.(使用Angular 4.4)

<tr *ngFor="let row of rows">
  <td *ngFor="let column of columns">
    <ng-container [ngSwitch]="column.columnType">
      <ng-template [ngSwitchCase]="0">
        <input [(ngModel)]="row[column.index].value" ...>
      </ng-template>
      <ng-template [ngSwitchCase]="1">
        <select ...>
      </ng-template>
      <ng-template [ngSwitchCase]="2">
        <span ...>
      </ng-template>
      <ng-template [ngSwitchCase]="...">
        <div ...>
      </ng-template>
      <ng-template [ngSwitchCase]="15">
        <a href ...>
      </ng-template>
    </ng-container>
  </td>
</tr>

在switch语句中还有很多时间(根据Chrome分析器 - debugUpdateDirectives).关于如何减少这个的任何想法？

我刚刚升级node 8到node 10并且我的所有量角器测试用例都失败了.

挖掘它时,我发现源地图支持导致问题.任何人都解决了它或有一个解决方法.

? encountered a declaration exception
  - TypeError: frame.getFileName is not a function
      at isInsideNodeModules (internal/util.js:360:28)
      at showFlaggedDeprecation (buffer.js:149:8)
      at new Buffer (buffer.js:174:3)
      at Array.<anonymous> (/Users/k26686/aniruddh/develop/after-india-trip/shepherd/node_modules/source-map-support/source-map-support.js:149:21)
      at /Users/k26686/aniruddh/develop/after-india-trip/shepherd/node_modules/source-map-support/source-map-support.js:53:24
      at mapSourcePosition (/Users/k26686/aniruddh/develop/after-india-trip/shepherd/node_modules/source-map-support/source-map-support.js:171:21)
      at wrapCallSite (/Users/k26686/aniruddh/develop/after-india-trip/shepherd/node_modules/source-map-support/source-map-support.js:343:20)
      at /Users/k26686/aniruddh/develop/after-india-trip/shepherd/node_modules/source-map-support/source-map-support.js:378:26
      at Array.map (<anonymous>)
      at Function.prepareStackTrace (/Users/k26686/aniruddh/develop/after-india-trip/shepherd/node_modules/source-map-support/source-map-support.js:377:24)

在github github isslue链接中还有一个问题,但任何人都有快速解决方案？

我运行以下命令来创建stats.json:

ng build --prod --stats-json

在此之后我执行下面的代码:

webpack-bundle-analyzer dist/stats.json

一旦我执行它,我在终端中收到以下错误:

'webpack-bundle-analyzer'不被识别为内部或外部命令,可操作程序或批处理文件.

我已经安装了webpack-bundle-analyzer.

在Package.json文件中它可用

"webpack-bundle-analyzer":"^ 2.11.1"

请帮我解决.

注意:Stats.json在dist文件夹中可用

我正在使用Angular5和angular service worker.

我cached有些数据和一些资产,一切都按预期工作正常,甚至部署了代码.

现在,如果我更新一些代码并再次部署,则service worker不会更新.

所以,我已经通过Angular服务工作者链接和我已经实现了SwUpdate service.

这是我的代码:

我创建了一个服务并在App Component中调用它

import { Injectable, NgZone } from '@angular/core';
import { interval } from 'rxjs/observable/interval';
import { SwUpdate } from '@angular/service-worker';
import { Observable } from 'rxjs/Rx';


@Injectable()
export class ServiceWorkerService {

  constructor(updates: SwUpdate, ngZone: NgZone) {
    console.log('Servicee worker update called');
    updates.available.subscribe(event => {
      console.log('current version is', event.current);
      console.log('available version is', event.available);
      updates.activateUpdate().then(() => document.location.reload());
    });
    updates.activated.subscribe(event => { …

我正在尝试使用表单中的开关来切换相同表单中两个下拉菜单之一的外观.我相信这意味着我想使用MatSlide切换发出的MatSlideToggleChange类.遗憾的是,该文档未提供如何将MatSlideToggleChange类与MatSlide一起使用的示例.

有没有人以这种方式使用MatSlide？

我试图$interval从AngularJS中找到等效的Angular 5.

$interval将重复一个函数调用或一个指定次数的块,中间有一个延迟.这是我想要做的,用AngularJS编写:

$interval(function() {
      myFunction(param1, param2)
      i++;
    }, delay, count);

对i进行抽象,我将其用于不同的目的.如何在Angular 5中实现这一目标？我已经尝试过使用rxjs/Observable,但我似乎无法找到一种方法来同时包含延迟和运行多次.

谢谢.

我的任务是为使用Angular开发的聊天应用程序编写测试.下面是Angular模板代码片段,我目前正在为以下代码编写测试:

<div class="title-menu-container" fxLayoutAlign="center center">
  <button id="save-title-button" mat-icon-button *ngIf="titleInputEdit; else settings">
    <mat-icon class="secondary-text" (click)="saveTitle(titleInput.value)">check</mat-icon>
  </button>
  <ng-template #settings>
    <button mat-icon-button [matMenuTriggerFor]="menu" [disabled]="!(isGroupConversation$ | async)">
      <mat-icon class="secondary-text">settings</mat-icon>
    </button>
  </ng-template>
</div>

实际上,如果组件布尔变量'titleInputEdit'为true,则显示save-title-button,否则显示设置按钮.以下是导致问题的测试用例:

it('save title button should be present', () => {
  component.titleInputEdit = true;
  fixture.detectChanges();
  expect(fixture.nativeElement.querySelector('#save-title-button')).not.toBe(null);
}); 

我只是"模拟"组件变量,调用.detectChanges(),然后测试是否存在按钮.但是,测试失败并显示"预期的空值不为空".

通过各种console.log调用,我已经确认component.titleInputEdit正确设置为true但fixture.nativeElement不包含正确的按钮.

我注意到的一些事情:

• 如果我将'component.titleInputEdit = true'行移动到我的beforeEach中并将其删除,并从我的测试中调用detectChanges(),则测试通过.

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    component.titleInputEdit = true
    fixture.detectChanges();
    debugElement = fixture.debugElement;
  });     
  
  it('save title button should be present', () => {
      expect(fixture.nativeElement.querySelector('#save-title-button')).not.toBe(null);
  });
  

  Run Code Online (Sandbox Code Playgroud)

• 如果我从beforeEach()中删除.detectChanges()调用,并将其保留在测试用例中,则测试通过.

我对Angular比较陌生,但我发现有类似问题的人的情况.在尝试了那些帖子中推荐的一些东西后,我仍然在摸不着头脑.更奇怪的是,我已经为其他Angular组件编写了测试,这些组件几乎完全相同,没有任何问题. …