标签: angular7

我正在使用 systemjs 创建一个 angular 7 项目来动态加载模块。

当我尝试使用它时，出现以下错误：

 ERROR ReferenceError: SystemJS is not defined

我的 package.json 包含 systemjs: 2.1.1

我在 angular.json 中将 systemjs 路径添加到了部分脚本

"./node_modules/systemjs/dist/system.js"

我声明 SystemJs 在我的服务中使用它：

declare const SystemJS;

我正在尝试这样使用，在这个函数中：

loadModuleSystemJS(moduleInfo: ModuleData): Promise<any> {
    const url = this.source + moduleInfo.location;
    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));
    SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter));
    SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(BrowserAnimations));

    // now, import the new module
    return SystemJS.import(`${url}`).then((module) => {
      return this.compiler.compileModuleAndAllComponentsAsync(module[`${moduleInfo.moduleName}`]).then(compiled => {
        return module;
      });
    });
  }

也许我错过了什么，

你能帮助我吗 ？

背景故事：昨天我需要将我的应用程序从 Angular 5.2.9 更新到 6，所以我想“为什么不在我这样做的时候升级到 7”。所以当然这花了一整天的时间，并且需要对很多文件进行大量更改（主要是因为 Rxjs），但无论如何，到一天结束时，我能够做到ng serve并且编译时没有错误！

但是当我开始localhost:4200运行该应用程序时，它在“正在加载...”时停止，并在 DevTools 控制台中显示以下消息：

core.js:14016 Uncaught (in promise) Error: In this configuration Angular requires Zone.js
    at new NgZone (core.js:14016)
    at getNgZone (core.js:14701)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory (core.js:14599)
    at core.js:14643

我试图确保我所有的包裹都是最新的。npm install给出了一些关于 fsevents 的错误，但是zone是最新的。

所以我现在不知所措。我不知道错误消息真正想告诉我什么，或者它是否合法。我做了ng new并检查了生成的文件，那里没有“zone.js setup”代码，所以我没有错过类似的东西。我觉得我离更新工作如此之近，但当然，如果应用程序无法运行，那就不好了！谷歌搜索此错误消息并没有发现任何有用的信息（无论如何对我来说）。

<input  {{field.validatorDirective}} 
        class="form-control" 
        [ngClass]="{ 'border-danger': hasErrors }" 
        (keyup)="callback()" 
        [formControlName]="field.key" 
        [id]="field.key"
        [type]="field.type" 
        [placeholder]="field.placeholder" 
        [value]="field.value">

field 具有所需的所有内容，但我想动态添加要使用的指令名称。

它目前被添加string为field.validatorDirective

这有错误

TextComponent.html:2 错误 DOM 异常：无法在“元素”上执行“setAttribute”：“{{field.validatorDirective}}”不是有效的属性名称。

我的指令有选择器 usernameValidator

我正在使用 Angular 7 中的新控件，但似乎无法让它识别出我向正在显示的数组中添加了一个新项目。

这是我的 html：

<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
    <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
        <div class="state">{{state.name}}</div>
        <div class="capital">{{state.capital}}</div>
    </div>
</cdk-virtual-scroll-viewport>

这是组件的设置：

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {

  states = [
    { name: 'Alabama', capital: 'Montgomery' },
    { name: 'Alaska', capital: 'Juneau' },
  ];
  statesObservable = new BehaviorSubject(this.states);

  sortBy(prop: 'name' | 'capital') {

    // this works -- creates …

我正在为我的 Angular 7 应用程序运行 Webpack Bundle Analyzer，它产生如下输出：

根据此处的故障排除部分使用 webpack.optimize.ModuleConcatenationPlugin 时，这是一个已知的警告。他们对 Angular CLI < 6 提出了建议。我也在这里找到了建议注释掉 ModuleConcatenationPlugin 的建议，但是，它没有确定应该在哪里注释掉。

您知道如何修复为 Angular CLI 7.1.0 连接的模块吗？谢谢你的时间。

我想测试 .get 的 get 和 set 方法my user.store.ts。我有一个get()用于获取users和addUsers()用于将用户添加到BehaviourSubject. 我怎样才能做到这一点？

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { User } from 'ngx-login-client';

@Injectable({
  providedIn: 'root'
})

export class UserStore {

  private _users: BehaviorSubject<User[]> = new BehaviorSubject([]);

  get users() {
    return this._users.asObservable();
  }

  addUsers(users: User[]) {
    this._users.next(users);
  }
}

我希望输出是在addUsers()调用时添加的值，并且get在调用时可以添加用户。我get users()是 Angular 测试的新手。

得到类似的错误：

Expected Observable({ _isScalar: false, source: BehaviorSubject({ …

我正在尝试从 ngx-translate 迁移到 Angular i18n 方法，并希望在迁移前确定几点。

1. 是否可以在没有任何模板的情况下在服务和组件内部进行翻译？在 ngx-translate 中，可以使用翻译管道。
2. angular 是否为 V7 引入了任何方法或计划在 v8 中引入用于转换内部组件和服务级别的方法？
3. 这目前是否只能使用变通方法并且没有角度的方法来做到这一点？如果是，我应该使用 angular i18n 方法还是更好地继续使用ng-tranlate包？

提前致谢！

我在我的Angular7项目中使用材料设计。垫子按钮上有一个点击事件。

  itemclick(event: Event) {
 //to know the id of clicked element,ie button
 let elementId: string = (event.target as Element).id;
 console.log(elementId);
 }

<button mat-button color="primary" id="test1" (click)="itemclick($event)" style="outline: none">Property1</button>