标签: angular9

升级到 Angular 9 后，我面临错误：未捕获的 ReferenceError：未定义 $localize 错误：您的应用程序或其依赖项之一似乎正在使用 i18n。Angular 9 引入了一个$localize()需要加载的全局函数。请ng add @angular/localize从 Angular CLI运行。（对于非 CLI 项目，添加import '@angular/localize/init';到您的polyfills.ts文件中。对于服务器端渲染应用程序，将导入添加到您的main.server.ts文件中。）

我的应用程序是 SSR（服务器端渲染），即使按照指导，我也无法处理此消息。

• 我使用 Express 提供我的文件
• 我已经把： import '@angular/localize/init'; 在 polyfill.ts 中
• 我还运行了 ng add @angular/localize
• 我只有一个用于 Express 的 server.js 文件，而且我还导入了“@angular/localize/init”；在里面。

这是我的 angular.json 文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "tableng": {
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/translate/messages.fr.xlf",
            "baseHref": "/fr/"
          }
        }
      },
      "root": "",
      "sourceRoot": "src", …

我们最近将我们的 angular 应用程序升级到了最新版本的 Angular (Angular v9)。我们所有的依赖项也都升级了，“ng update”表示我们所有的依赖项都是“有序的”。

当我们在启用 Ivy 的情况下构建应用程序时，编译过程失败并出现大量错误，这是我们以前从未遇到过的：

 "angularCompilerOptions": {
    "enableIvy": true
  }

有些错误很奇怪，说你不能绑定 'ngClass' 或 'ngModel'，因为它不是 'div' 的已知属性。它似乎缺少一些主要模块。

例如：

src/app/register/register.component.html:34:48 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.

<div class="form-group has-feedback" [ngClass]="{ 'has-error': f.submitted && !fname.valid }">
                                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/modals/modal-recommendations/modal-recommendations.component.html:12:25 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.
<div class="modal-body" [ngClass]="{'text-center': recommendationNotVisible()}">
12 <div class="modal-body" [ngClass]="{'text-center': recommendationNotVisible()}">

src/app/dashboard/dashboard.component.html:53:17 - error NG8002: Can't bind to …

我有一个像这样的组件

import { Component } from '@angular/core';

interface ItemBaseType {
   foo: boolean;
}

interface ItemType extends ItemBaseType {
   bar: boolean;
}

@Component({
  selector: 'ac-foo',
  template: `<div *ngIf="item.bar">Hello</div>`,
})
export class FooComponent {
   public item: ItemType;
}

我在 Angular 9 应用程序上启用了fullTemplateTypeCheck 和 strictTemplates，它在运行时引发异常ng serve：

类型“ItemBaseType”上不存在属性“bar”。

但bar存在于ItemType.

出了什么问题？

我使用的是 Mac，目前安装了 Angular 8 版本。

我想升级到 Angular 9，所以我这样做了：

npm uninstall -g angular-cli
npm cache clean or sudo npm cache verify
npm install -g @angular/cli@latest

我没有犯错误，但是当我这样做时

ng--版本

这是回归版本8。

如何更新到版本 9？

正如此问题所述，如果您尝试使用指令访问 ngControl.control：

export class DisabledDirective {
  @Input()
  set opDisabled(condition: boolean) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor(private ngControl: NgControl) {}
}

第一次渲染时会出现错误：

core.js:5828 ERROR TypeError: Cannot read property 'disable' of undefined

我正在使用 "@angular/localize": "^9.0.2" 并且我有一条带有动态标题的路线，应该翻译：

const routes: Routes = [
  { path: 'overview', component: DashboardPageComponent, data: { title:  $localize`:@@overview:Overview`, breadcrumb: 'Overview' } },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

消息.es.xlf

<unit id="overview">
  <segment>
    <source>Overview</source>
    <target>Vista general</target>
  </segment>
</unit>

但是当我运行时ng serve --configuration=es，显示以下错误：

ERROR in src/app/dashboards/dashboard-routing.module.ts(8,7): Error during template compile of 'DashboardRoutingModule'
  Reference to a local (non-exported) symbols are not supported in decorators but 'routes' was referenced
    Consider exporting 'routes'.

此外，我阅读了文章：https://blog.ninja-squad.com/2019/12/10/angular-localize/寻找解决方法，例如：

ERROR in …

Angular 工作区允许我将多个项目添加到单一存储库中，这很棒。然而，在与多个团队合作时，我注意到，如果您只有一个 package.json 并且让每个团队使用他们正在编写的应用程序对其进行编辑，那么事情可能会变得非常混乱。

可以有这样的结构吗？

|\xe2\x94\x80\xe2\x94\x80 angular.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 e2e\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <--- I should only be responsible for everything in /src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 projects\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 my-sub-application\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <--- Is this possible? So that "my-sub-application" only pulls its dependencies from this package.json?\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 environments\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 polyfills.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 styles.scss\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.app.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 …

我的模块中有以下路由器配置：

const publicRoutes: Routes = [
  {
    path: 'public',
    component: PublicComponent,
    children: [
      {path: 'sign', component: SignComponent},
      {path: '', redirectTo: '/public/sign', pathMatch: 'full'},
      {path: '**', redirectTo: 'sign'},
    ]
  },
];

但是当我只导航到 /public 时，我没有被重定向，但是我得到了ERROR Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have '?cmp' property. 你能给我的生活带来一点光明吗？我迷路了。

我正在尝试在布尔值上使用 ngif 显示元素，如下所示：

<li *ngIf="!include == true">
    <span class="badge badge-pill badge-danger">
        <i [ngClass]="hearthClass"></i>
    </span>
</li>

我的 include var il 初始化为 false 并像这样切换状态：

this.localStorageService.getCurrentUser().then((res) => {
      this.userProfile = res;
       if(this.song.likes.includes(this.userProfile._id)){
         this.include = true
       }
      this.classHeart();
    });

谢谢大家 ！

从 Angular 8 更新到 Angular 9 导致循环依赖错误

我刚刚升级到 Angular 9，并且修复了所有编译错误。现在我收到一个与循环依赖相关的错误，但我无法追踪该错误。

Error: Cannot instantiate cyclic dependency! ApplicationRef\nat throwCyclicDependencyError (core.js:8072)\nat R3Injector.hydrate (core.js:17049)\nat R3Injector.get (core.js:16803)\nat injectInjectorOnly (core.js:940)\nat \xc9\xb5\xc9\xb5inject (core.js:950)\nat Object.NgbModalStack_Factory [as factory] (ng-bootstrap.js:6262)\nat R3Injector.hydrate (core.js:17053)\nat R3Injector.get (core.js:16803)\nat injectInjectorOnly (core.js:940)\nat Module.\xc9\xb5\xc9\xb5inject (core.js:950)\n

如果我查看 ng-bootstrap.js:6262 代码块，它看起来像是指的是 NgbModal 组件

    NgbModalStack.\xc9\xb5prov = \xc9\xb5\xc9\xb5defineInjectable({ factory: function NgbModalStack_Factory() { return new NgbModalStack(\xc9\xb5\xc9\xb5inject(ApplicationRef), \xc9\xb5\xc9\xb5inject(INJECTOR), \xc9\xb5\xc9\xb5inject(DOCUMENT), \xc9\xb5\xc9\xb5inject(ScrollBar), \xc9\xb5\xc9\xb5inject(RendererFactory2), \xc9\xb5\xc9\xb5inject(NgZone)); }, token: NgbModalStack, providedIn: "root" });\nNgbModalStack = __decorate([ __param(2, Inject(DOCUMENT))\n], NgbModalStack);\n

这可能与特定错误没有直接关系，但我看不到任何可能导致此错误的内容。\n任何人都知道可能导致此错误的原因或者它可能是 Angular Bootstrap 库中的错误吗？