小编For*_*stG的帖子

更新到Angular 6.0.1后,我收到以下错误ng serve:

Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
Error: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
    at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40)

ng update说一切都井然有序.删除node_modules文件夹和全新npm install安装也没有帮助.

我的项目基于[ng2-admin(Angular4版本)].(https://github.com/akveo/ngx-admin)这是我的package.json dependecies:

 "dependencies": {
    "@angular/animations": "^6.0.1",
    "@angular/common": "^6.0.1",
    "@angular/compiler": "^6.0.1",
    "@angular/core": "^6.0.1",
    "@angular/forms": "^6.0.1",
    "@angular/http": "^6.0.1",
    "@angular/platform-browser": "^6.0.1",
    "@angular/platform-browser-dynamic": "^6.0.1",
    "@angular/platform-server": "^6.0.1",
    "@angular/router": "^6.0.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
    "@ngx-translate/core": "^10.0.1",
    "@ngx-translate/http-loader": "^3.0.1",
    "amcharts3": "github:amcharts/amcharts3",
    "ammap3": "github:amcharts/ammap3",
    "angular-table": "^1.0.4",
    "angular2-csv": "^0.2.5",
    "angular2-datatable": "0.6.0",
    "animate.css": "3.5.2",
    "bootstrap": "4.0.0-alpha.6", …

使用 Angular 8，在构建应用程序时，我们遇到以下错误：

app/modules/admin-module/pages/editor/editor.component.ts:6:27 - error TS2306: 
File ...node_modules/@angular/material/index.d.ts' is not a module.

我有以下命令来强制重新创建所有容器：

docker-compose up --force-recreate --build 

但是，我仍然看到以下几行*：

Step 6/10 : RUN cp environment-prod-docker.js environment.js
 ---> Using cache
 ---> e9a2354577ef
Step 7/10 : RUN cat environment.js
 ---> Using cache
 ---> ccbc732030ea
Step 8/10 : RUN npm ci --only=production
 ---> Using cache
 ---> 6baeabd30cf7

我怎样才能禁用该缓存？（例如，它不会重建我的应用程序。）

我已经发现，在给定容器上使用此特定命令可以重新构建它：

 docker-compose build --no-cache

但由于特定原因，我需要使用单行 build'n'start 命令，那么有没有什么方法可以用 来生成它docker-compose up？

我正在使用 docker-compose.yml 版本“3.4”。

*：Dockerfile是这样的：

...
RUN cp environment-prod-docker.js environment.js
RUN cat environment.js
RUN npm ci --only=production
...

我正在升级到Angular 6

在升级指南之后,我遇到以下问题:

> ng update @angular/core                
Invalid range: ">=2.1.0"

......这就是我的全部.没有其他警告或任何其他说明.在我的项目中,"> = 2.1.0"字符串也不匹配.

ng -v 结果:

Angular CLI: 6.0.0
Node: 9.4.0
OS: linux x64
Angular: 4.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@angular/cli                      6.0.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.3.2
webpack                           4.6.0

更新:事情不起作用:

• 手动更新所有内容到最新版本
• 手动更新rxjs
• 将typescript更新为2.7.2然后更新为2.8.3
• 尝试去 ng update --all
• npm install …

我的设置：

• Windows 10
• 适用于 Windows 的 NVM 1.1.7
• 节点 12.14.1 和 npm 6.13.4
• Angular 8.2.14 和 @angular/cli 8.3.22

只是尝试运行默认的角度模板：

> npm install -g @angular/cli # this installed the angular version mentioned above
> ng new test # Chose default options for the project
> cd test
> npm ci # lots of error messages

最后一个命令会导致输出中出现很多错误（但不会使命令失败）：

> fsevents@1.2.11 install C:\test\node_modules\@angular\compiler-cli\node_modules\fsevents
> node-gyp rebuild


C:\test\node_modules\@angular\compiler-cli\node_modules\fsevents>if not defined npm_config_node_gyp (node "C:\Users\foo\AppData\Roaming\nvm\v12.14.1\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Users\foo\AppData\Roaming\nvm\v12.14.1\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! find Python
gyp …

如果您有 Angular Material MatAutoInput，并且监听选项选择事件并监听模糊事件，您可以看到，如果您在选择列表中选择一个项目，输入模糊事件也会被调用。

这是很有问题的，因为我需要监听输入字段中的模糊事件进行验证，并观察选择。如果用户单击某个元素，模糊会导致调用该字段上的评估逻辑，这可能会弄乱事情。

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           (blur)="onBlur()"
           [formControl]="myControl"
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected()">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

@Component({
  selector: 'autocomplete-simple-example',
  templateUrl: 'autocomplete-simple-example.html',
  styleUrls: ['autocomplete-simple-example.css'],
})
export class AutocompleteSimpleExample {
  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];

  optionSelected(){
    console.log("option selected event, value: ", this.myControl.value);

  }

  onBlur(){
    console.log("Blur event, value:",  this.myControl.value);
  }
}

现场演示：https://stackblitz.com/edit/angular-pp3ztn ?file=src%2Fapp%2Fautocomplete-simple-example.ts

有什么办法可以解决这个问题吗？或者我可以绝对确定事件发生的顺序吗？如果由于任何原因事件会以不同的顺序发生（首先是选择，然后是模糊），它可能会在我更深层的输入逻辑中搞乱事情。

我的解决方案是尝试禁用在单击字段时检查模糊事件，并且仅在选择选项或选项列表本身上的模糊事件时启用模糊检测......这看起来很老套。另外，发现了一个相同的线程： https: //github.com/angular/material/issues/3976，遗憾的是它没有给出任何真正的解决方案。

我有一个带有 FlutterFire 的功能齐全的 Flutter 应用程序，其中 android 包工作得很好，但 Web 客户端在启动时给出了一个奇怪的错误。我也无法使用 flutterfire 调用任何 firebase 函数。（简单的 firebase 查询就可以了）

启动时或尝试调用时的错误消息FirebaseFunctions.instance.httpsCallabe(\'...：

:1337/dart_sdk.js:7025 Uncaught (in promise) Error: [firebase_messaging/failed-service-worker-registration] Messaging: \nWe are unable to register the default service worker. \nFailed to register a ServiceWorker for scope (\'http://localhost:1337/firebase-cloud-messaging-push-scope\') with script (\'http://localhost:1337/firebase-messaging-sw.js\'): The script has an unsupported MIME type (\'text/html\'). .\n    at Object.throw_ [as throw] (:1337/dart_sdk.js:5334)\n    at firebase_messaging_web.FirebaseMessagingWeb.new.getToken (:1337/packages/firebase_messaging_web/firebase_messaging_web.dart.lib.js:112)\n    at getToken.throw (<anonymous>)\n    at :1337/dart_sdk.js:39038\n    at _RootZone.runBinary (:1337/dart_sdk.js:38894)\n    at _FutureListener.thenAwait.handleError (:1337/dart_sdk.js:33887)\n    at handleError (:1337/dart_sdk.js:34451)\n    at Function._propagateToListeners …

我有这个代码:

this.form = fb.group({
        username: ['', Validators.compose([Validators.required])],
        fullName: ['', Validators.compose([Validators.required])],
        password: ['', Validators.compose([Validators.required])],
        confirmPassword: ['', Validators.required],
    }, {validator: matchingPasswords('password', 'confirmPassword')});

matchingPasswords:

export function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
return (group: FormGroup) => {
    let password = group.controls[passwordKey];
    let passwordConfirmation = group.controls[passwordConfirmationKey];
    if (password.value !== passwordConfirmation.value) {
        return passwordConfirmation.setErrors({mismatchedPasswords: true})
    }
}

}

HTML:

<div class="form-group">
        <input [formControl]="confirmPassword" class="form-control checking-field" type="password">
        <span class="help-block text-danger" *ngIf="form.get('password').touched && form.get('password').hasError('required')">
</div>
<div class="form-group">
        <input class="custom-control-input checkbox-main" type="checkbox" [(ngModel)]="policyButtonValue" [ngModelOptions]="{standalone: true}" ngDefaultControl>
        <span class="custom-control-indicator"></span>
</div> …

当我将鼠标悬停在不同组件中的元素之一上时，我试图动态更改 google 标记的颜色。我仍在学习 Angular，我尝试使用 Observables 但没有任何成功。

我有main.view 存储所有卡片的组件（我称之为事件）。这是main-view.component.ts代码的一部分：

constructor( private eventService: EventsDataService) {
    }
      ngOnInit() {
        this.getEvents();
      }

我正在注入从服务器获取卡片数据的服务，并使用getEvents方法使用 Observable 将其转换为 JSON 数据。然后我在html模板中使用 2 个 *ngFor 指令来迭代这些数据并填充卡片和标记。这是代码：

main-view.component.html

 <app-event-card *ngFor="let event of events; let i = index"></app-event-card>
  </section>
  <aside class="mapContainer"  [class.fixed]="fixed">
      <agm-map [class.fixed]="fixed"  [latitude]= "latitude"  [longitude]="longitude" >
        <agm-marker *ngFor="let event of events; let i = index"
        [latitude]= "event.location.coordinates[0]"
        [longitude]="event.location.coordinates[1]"
        label="{{event.price +'AUD'}}">
      </agm-marker>
      </agm-map>
  </aside>

现在，当我将鼠标悬停在与标记相对应的一张卡片上时，我想更改标记的颜色或任何属性，但我不知道如何连接这两个组件的数据。

我将不胜感激有关此问题的任何帮助或提示。

谢谢

我有两个任务，需要相互运行：

ng build <library-name> && ng serve

我想在 上监视文件更改<libary-name>，因此我添加了以下内容：

ng build <library-name> --watch && ng serve

这显然不起作用，因为手表永远不会完成，所以 ng serve 永远不会被调用。

ng build <library-name> --watch & ng serve

这个解决方案也不好，因为 ng serve 在 ng build 完成之前就开始了。

有什么办法可以从第一个 ng 构建中捕获Compilation complete消息，然后让文件观察器运行？有什么办法可以像这样启动观察者：

ng build <library-name> && --watch-the-libary-please & ng serve

?