标签: angular13

TypeScript 2.4 添加了对动态 import() 表达式的支持，这允许我们按需异步加载和执行 ECMAScript 模块。

尝试动态导入本地化但面临导出问题

Module not found: Error: Package path ./locales is not exported from package ....\node_modules\@angular\common (see exports field in .....\node_modules\@angular\common\package.json)

我有下面的代码

let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
      import(`@angular/common/locales/${angularLocale}.js`)
                .then(module => {
                    registerLocaleData(module.default);
                    NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
                        resolve(true);
                        abp.ui.clearBusy();
                    });
                }, reject);

非常不确定如何导出它，它在 Angular 12 上运行良好。

我们使用编译器中的这个函数compileModuleAndAllComponentsAsync来创建动态/运行时模块。

该编译器在 Angular v13 中已弃用。

是否有人有类似的（动态/运行时模块）用例并已成功替换CompilerAPI？

我收到这个错误

属性绑定 ngIf 未被嵌入模板上的任何指令使用。确保属性名称拼写正确并且所有指令都列在“@NgModule.declarations”中

即使你在我跑步时也能正常工作ng serve。

当我将 Angular 更新为v13.

我已经尝试重新启动Vscode并重新安装Angular Language Service并安装以前版本的Angular Language Service ...它们都不起作用..

我的app.module.ts：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  exports: [CommonModule, BrowserModule],
})
export class AppModule {}

我有多模块化 Angular 13 应用程序，其中模块是使用延迟加载来加载的。问题是生成的 Angular 文件（如 main.[hash].js、pollyfils.[hash].js 和 runtime.[hash].js）不位于站点根目录。结构如下所示：

/index.html
  /mysitefolder/main.f29052602897eb02.js
  /mysitefolder/styles.755cfc65dad8627d.css
  /mysitefolder/polyfills.eca354b64e370005.js
  /mysitefolder/runtime.54752149a889ba60.js
  /mysitefolder/815.d3bd01384abd247c.js

Angular.json 文件具有以下设置：

"outputPath": "../public/mysitefolder"

当应用程序运行时，它尝试815.d3bd01384abd247c.js从应用程序根目录加载块文件，而不是从它的实际位置加载，显然块加载失败。如何解决这个问题？是否有任何设置告诉 Angular 从特定位置加载延迟加载模块的块/mysitefolder/？

在 v12 中，您可以使用以下代码动态加载/导入组件，通过访问它NgModule，ComponentFactory然后使用ViewContainerRef.

const injector: Injector = /* injected */
const cfg: ComponentFactoryResolver = /* injected */
const module = await import('path/to/component/file');
const componentDef = module['MyComponent'];
const cf: ComponentFactory = cfg.resolveComponentFactory(componentDef);
const compModule: NgModuleRef = (cf as any).ngModule;

const container: ViewContainerRef = /*retrieved using @ViewChild*/
container.createComponent(cf, null, injector, compModule)

从 v13 开始，ComponentFactory( docs ) 和ComponentFactoryResolver( docs ) 现在被标记为已弃用，并且添加了一个新签名ViewContainerRef.createComponent，该签名接受 acomponentType: Type<C>作为第一个参数。

abstract createComponent<C>(componentType: Type<C>, options?: { …

我有一个 Angular 12 项目的测试，效果很好。我已将项目升级到 Angular 13，但现在它们不起作用。

这是我的测试文件：

import { Component } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { GlobalTestingUtilities } from './global-testing-utilities';

@Component({
  template: `
    <div id="test-div-with-click-event-id"
     class="test-div-with-click-event-class"
     (click)="onTestDivClick()">
    </div>
  `
})
class ButtonClickTestComponent {
   public onTestDivClick(): void {}
}

describe('GlobalUtilities', () => {
  let component: ButtonClickTestComponent;
  let fixture: ComponentFixture<ButtonClickTestComponent>;
  let testTranslateService: TranslateService;
  const globalTestingUtilitesInstance = new GlobalTestingUtilities();

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [
        ButtonClickTestComponent
      ], …

我试图从父组件调用子组件的视图子组件，但在控制台中未定义。

查看图像还可以看到相同的堆栈火焰

https://stackblitz.com/edit/angular-ivy-k4m2hp?file=src%2Fapp%2Fhello.component.ts

import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { TestChildComponent } from './test-child/test-child.component';

@Component({
  selector: 'hello',
  template: `<h1>this is Hello component {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
  @Input() name: string;
@ViewChild('TestChildComponent') testChildComponent: TestChildComponent
  ngOnInit() {
    console.log('calling ngOninit in hello component');
    console.log('going to call test child instance this.TestChildComponent.ngOninit')
   console.log(this.testChildComponent);
  }
}

请帮忙获取子组件

this.testChildComponent

这样我就可以从父级调用子级的 ngOnInit 。

this.testChildComponent.ngOnInit()

使用 Angular 13 在 Jest 中运行测试时出现以下错误：

 Unexpected value 'NgxsRootModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

      41 |
      42 |   beforeEach(() => {
    > 43 |     fixture = TestBed.createComponent(MyComponent);

beforeEach这似乎与我拥有的这个块有关：

beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [
          FormComponentsModule,
          MatButtonModule,
          NoopAnimationsModule,
          ReactiveFormsModule,
          RouterTestingModule,
          MatSnackBarModule,
          MatIconModule,
          MatCardModule,
          NgxsModule.forRoot([])
        ],
        declarations: [MyComponent],
        schemas: [NO_ERRORS_SCHEMA],
        teardown: { destroyAfterEach: false }
      }).compileComponents();
    })
  );

但如果我删除该部分，它就会以同样的方式forRoot([])抱怨。NgxsModule

这在 Angular 11 和 12 上也可以正常工作。只是自从升级到 Angular 13（需要将 Jest 升级到最新版本）后才出现这个问题。

有谁知道为什么现在不喜欢使用它NgxsRootModule？

我正在使用 npm v 8.11.0。我在 package.json 文件中定义了这些依赖项

"@angular/compiler": "^13.2.6",\n"@angular/core": "^13.2.6",\n

我想让“ng lint”运行，但显然我需要运行迁移，所以我运行

$ ng add @angular-eslint/schematics\nYour global Angular CLI version (14.0.5) is greater than your local version (13.2.6). The local Angular CLI version is used.\n\nTo disable this warning use "ng config -g cli.warnings.versionMismatch false".\n\xe2\x84\xb9 Using package manager: npm\n\xe2\x9c\x94 Found compatible package version: @angular-eslint/schematics@13.5.0.\n\xe2\x9c\x94 Package information loaded.\n\nThe package @angular-eslint/schematics@13.5.0 will be installed and executed.\nWould you like to proceed? Yes\nnpm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.\nnpm …

我最近安装了 Angular 13 并尝试安装 @nestjs/ng-universal

ng 添加@nestjs/ng-universal

这适用于以前的角度版本，但我成功安装了软件包，然后出现此错误：

*An unhandled exception occurred: Package subpath './schematics/utils' is not defined by 
"exports" in C:\Users\ADMIN\kiambol\node_modules@nguniversal\express-engine\package.json
See "C:\Users\ADMIN\AppData\Local\Temp\ng-1gySjP\angular-errors.log" for further 
details.*

angular-errors.log 文件中的完整错误是：

[error] Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './schematics/utils' is not defined by "exports" in C:\Users\ADMIN\kiambol\node_modules@nguniversal\express-engine\package.json
at throwExportsNotFound (internal/modules/esm/resolve.js:299:9)
at packageExportsResolve (internal/modules/esm/resolve.js:522:3)
at resolveExports (internal/modules/cjs/loader.js:449:36)
at Function.Module._findPath (internal/modules/cjs/loader.js:489:31)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:875:27)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object. (C:\Users\ADMIN\kiambol\node_modules@nestjs\ng-universal\schematics\install\index.js:15:17)
at Module._compile (internal/modules/cjs/loader.js:1072:14)

当我查看角度项目文件时，没有任何更改，并且服务器文件未设置。我尝试创建不同的角度项目只是为了看看我的角度项目是否没有正确选择，然后再次添加ng add @nestjs/ng-universal ，仍然得到相同的结果。

为了测试一下，我尝试使用ng …