标签: angular8

我将使用@amcharts/amcharts4@4.3.5 的应用程序更新为 Angular 8，现在编译时遇到问题。

已将 amcharts 更新至 4.4.10 版。但问题依然存在。

ERROR in ./node_modules/@amcharts/amcharts4/.internal/core/export/Export.js 68:24
Module parse failed: Unexpected token (68:24)
You may need an appropriate loader to handle this file type.
|             switch (_a.label) {
|                 case 0: return [4 /*yield*/, Promise.all([
>                         import(/* webpackChunkName: "pdfmake" */ "pdfmake/build/pdfmake.js"),
|                         import(/* webpackChunkName: "pdfmake" */ "../../pdfmake/vfs_fonts")
|                     ])];

我的代码库不是那么旧，它是用 Angular 7 版本编写的。

当我跑

ng 更新 @angular/cli @angular/core

所发生的只是更新库引用、更改某些路由、一些 ViewChild 更改以及移动名为 browserslist 的文件。我直接浏览了升级列表并得到了这个错误，所以我再次启动并运行了这个命令，它立即给出了这个错误。

我的代码中没有 ScrollbarHelper。我用谷歌搜索并找到了三个帖子，没有一个很有帮助。更新后的 vanilla 版本 7 项目运行良好。我的下一步将是一次导入我现有的代码，以找出导致此错误发生的位。

嗨，我今晚将项目从V7升级到了V8，阅读@viewChild时遇到了很多错误，这是由于他们进行了新的更新。我在所有@viewChild中都添加了{static：true}，但随后遇到了我设置如下的这些触发器：

 @ViewChild('tTaskTeam', { read: MatAutocompleteTrigger }) autoCompleteForTaskTeamTrigger: MatAutocompleteTrigger;
  @ViewChild('tofficeUser', { read: MatAutocompleteTrigger }) officeUsersautoCompleteInputTrigger: MatAutocompleteTrigger;
  @ViewChild('recipientType', { read: MatAutocompleteTrigger })  recipientTypeTrigger: MatAutocompleteTrigger;

该viewChild只接受两个参数，我不能添加三个。因此，我读了：MatautocompleteTrigger出去，它破坏了我要执行的自动完成功能。

这是我收到的错误消息：

类型'{的参数为：typeof MatAutocompleteTrigger; }'不可分配给'{read ?: any; 静态：布尔值；}'。类型'{缺少属性'static'，读取：typeof MatAutocompleteTrigger; }”，但类型为“ {必读？：任何；静态：布尔值；}'。ts（2345）core.d.ts（8066，9）：此处声明为“静态”。

我添加了这些触发器，以在用户输入非所选选项列表中的字符时触发。因此它将清除并向用户显示一条消息，让他们再次选择。

这是完整的实现： HTML

<mat-form-field appearance="outline" class="task-info-form-field">
  <input tab-directive #tTaskTeam matInput (keyup.enter)="chooseFirstOption(autoCompleteForTaskTeam)" [matAutocomplete]="autoCompleteForTaskTeam" formControlName="tTaskTeam" matTooltip="You can search and it will try to autocomplete the name for you!" placeholder="Select Group">
  <mat-autocomplete #autoCompleteForTaskTeam='matAutocomplete' [displayWith]="displayTeamName">
    <mat-option class="matAutoCompleteSelect" *ngFor="let user of filteredOptions | async" [value]="user">
      <span>{{ user.TeamName }}</span> …

我尝试在我的 Angular 应用程序中使用 firebase：

import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';
import {environment} from '../environments/environment';
...

@NgModule({
    ...
    imports: [
        BrowserModule,
        ...
        AngularFireDatabaseModule,
        AngularFireModule.initializeApp(environment.firebaseConfig, 'my-app')
    ],
    ...
})

但是，我收到了一个错误：

类AngularfireModule不是 Angular Module

和

类AngularFireDatabaseModule不是 Angular 模块

我不知道这是否是在 Angular 8 中使用 Firebase 的正确方法，或者是否还有其他方法。

我有一个使用@ViewChild的应用程序，下面是我的代码

 @ViewChild('paginator', { read: MatPaginator, static: true}) public paginator: MatPaginator;

在前面，我正在使用， <mat-paginator [ngStyle]="{'display': orders.length > 0 ? 'flex': 'none' }" #paginator> 并且已经实现了AfterViewInit，这是我只需要检查分页器已初始化的代码：

ngAfterViewInit(): void {
    console.log('tab group', this.paginator);
}

但是this.tabGroup是未定义的，因此我无法设置它的属性。我究竟做错了什么。

谢谢

为了将 Angular 5 项目迁移到 Angular 8，我使用 Angular CLI 创建了一个空项目，并在我的新项目结构中复制了我的模块、组件和服务。该项目已构建，但在执行时，我收到了经典消息“没有服务中的 HttpClient 提供程序”：

    ERROR NullInjectorError: StaticInjectorError(AppModule)[TimeService -> HttpClient]: 
  StaticInjectorError(Platform: core)[TimeService -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at NullInjector.get (http://localhost:4200/vendor.js:50573:27)
    at resolveToken (http://localhost:4200/vendor.js:52359:24)
    at tryResolveToken (http://localhost:4200/vendor.js:52285:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:52148:20)
    at resolveToken (http://localhost:4200/vendor.js:52359:24)
    at tryResolveToken (http://localhost:4200/vendor.js:52285:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:52148:20)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:76198:29)
    at _createClass (http://localhost:4200/vendor.js:76275:32)
    at _createProviderInstance (http://localhost:4200/vendor.js:76231:26)

我觉得我的 app.module.ts 没问题：我正在导入 HttpClientModule 并且我已经把它放在 @NgModule 导入中，就在 BrowserModule 之后。

@NgModule({
    declarations: [AppComponent,DelegationsComponent],
    imports:      [BrowserModule,
                  HttpClientModule,
                  GlobalModule.forRoot(),
                  AuthenticationModule,
                   DelegationModule,
                   routing,
                   FormsModule,
                   ReactiveFormsModule,
                   BrowserAnimationsModule,
                   ButtonModule, TableModule, DialogModule, …

我在我的项目中安装了 bootstrap 3.4.1 和 jquery。没有错误。package.json 中显示了版本 我还在 angular.json 文件中添加了 bootstrap 文件路径。但是 bootstrap 主题根本不起作用。

我跟着这个视频来安装引导程序：https : //www.youtube.com/watch? v = KaTtlGSJ0QE

安装进行得很顺利，但使用http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css 的验证 在控制台中出现了一些错误。

角度.json：

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/jquery/dist/jquery.min.js"
            ]

html：

<div class="container-fluid ">
      <h1>Login</h1>
      <form  [formGroup]="loginForm" (ngSubmit)="onSubmit()">

          <div class="form-group">
            <label for="userName">User Name : </label>
            <input formControlName="userName" type="text" class="form-control" >
          </div>
          <div class="form-group">
              <label for="password">Password : </label>
              <input  formControlName="password" type="password" class="form-control" >
          </div>

            <button class="btn btn-primary" type="submit"  >Login</button>

        </form>
        {{loginForm.value | json}}
    </div>

o/p 不包含任何预期的引导程序样式。

在我的 angular 8 应用程序中，我有 3 个延迟加载模块。每个模块用于特定用户的角色。我正在使用 canActivate 接口进行身份验证和角色保护。
对于以下路线

{ path : '' , pathMatch : 'full' , redirectTo : ''}

我应该如何使用redirectTo属性，以便它根据用户角色重定向到延迟加载的路由。这是路由模块的代码。

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path : '' , pathMatch: 'full' , redirectTo : ''},  
  { path : 'admin'  , loadChildren : () => import('./modules/admin/admin.module').then(mod => mod.AdminModule) , canActivate : [AuthGuardService] , data : { role : 'admin'}} ,
  { path …

我需要使Angular项目在IE11和Edge上都能工作，但是在这两个浏览器中甚至都没有显示一个非常简单的问候世界。

这是我所做的：

npm版本：

$npm -v
6.10.2

角版本：

$ng v
Angular CLI: 8.1.3
Node: 10.15.1
OS: win32 x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

我创建一个简单的项目

ng new ie-test

我按照polyfills.ts中的说明安装所需的软件包，

npm install --save classlist.js
npm install --save web-animations-js

我在polyfills.ts中取消对导入行的注释

$npm -v
6.10.2

然后运行该应用程序。

适用于Chrome和Firefox，但不适用于IE11或Edge。

在开发人员工具中检查控制台时，我发现app-root标记完全为空！而且没有错误出现。 …

我正在尝试在 Anuglar 8 中使用“agRichSelectCellEditor”实现组合框选择，并在尝试编辑字段时在控制台中出现以下错误。

供参考：我正在关注https://plnkr.co/edit/PgRoxXgx7NL5epn2B1X9?p=preview这是一个例子。

{
    headerName: "Prefix Code",
    field: "prefixCode",
    filter: true,
    editable: true,
    cellRenderer: "prefixCodeRenderer",
    cellEditor: "agRichSelectCellEditor",
    cellEditorParams: {
      values: [1, 2, 3],
      cellRenderer: "prefixCodeRenderer"
    }
}

错误类型错误：无法读取 null 的属性“componentFromFramework”