标签: angular14

当我将 aBrowserAnimationsModule或 a添加NoopAnimationsModule到独立 AppComponent 的导入数组时，它会破坏应用程序。

@Component({
  standalone: true,
  imports: [
    CommonModule,
    NoopAnimationsModule,
    /* ... */
  ],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

这些是我添加其中任何一个时遇到的错误：

ERROR Error: Uncaught (in promise): Error: Providers from the `BrowserModule` have already been loaded.
If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.

Error: Providers from the `BrowserModule` have already been loaded.
If you need access to common directives such as NgIf and NgFor, import …

我只是在玩新的角度类型表单 api，不知道如何输入FormGroup在不声明特定“FormInterface”女巫必须与原始界面相匹配的情况下进行键入。

也许我错过了一些东西，或者根本不可能这样做。

我能够使事情正常工作（下面的示例），但我不喜欢这里的UserForm接口声明，它没有对User接口的引用，并且必须是它的镜像副本，但带有FormControl<>字段。

在这种情况下是否可以FormGroup仅使用User界面进行输入？

stackblitz上提供完整的工作示例

用户模型.ts

export interface User {
  firstName: string;
  lastName: string;
  email: string;
  age: number | null;
}

用户服务.ts

@Injectable()
export class UserService {

  add(user: User): void {
    console.log('Add user', user);
  }

}

应用程序组件.ts

interface UserForm {
  firstName: FormControl<string>;
  lastName: FormControl<string>;
  email: FormControl<string>;
  age: FormControl<number | null>;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  form: FormGroup<UserForm>;

  constructor(private …

我将我的 Angular 应用程序更新到 Angular 15。它构建正常 - 除非出现一些警告，例如：

TypeScript 编译器选项“target”和“useDefineForClassFields”分别由 Angular CLI 设置为“ES2022”和“false”。

我的tsconfig.json目标是ES6：

{
  ...
  "compilerOptions": {
      "target": "ES6",
      ...
  }
}

文档说：

在内部，Angular CLI 现在始终将 TypeScript 目标设置为 ES2022，并将 useDefineForClassFields 设置为 false，除非在 TypeScript 配置中将目标设置为 ES2022 或更高版本。

https://github.com/angular/angular-cli/blob/main/CHANGELOG.md

我的 .browserslistrc 看起来一个月都没有变化，从一开始就没有变化：

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

那么，我怎样才能摆脱这个警告呢？

Angular 14 引入了新的独立组件，不需要使用任何模块。如果库中提供了这些组件，如何使用？在标准的非独立组件中，我们首先必须导入给定的模块。Angular 如何识别我导入的组件来自这个特定的包？

我有一个使用 Angular 13 的项目，我想将其更新到 Angular 14。

当我尝试更新时：

ng update @angular/core@14 @angular/cli@14

我得到：

Package "@angular-eslint/schematics" has an incompatible peer dependency to "@angular/cli" (requires ">= 13.0.0 < 14.0.0", would install "14.0.1").

关于如何避免此错误的任何想法？

我正在使用 Angular 14 和 Webpack 版本：^5.58.1。

下面是配置：

webpack.config.js

const webpackPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
module.exports = {
  mode: 'development',
  devtool: "source-map",
  entry: {
    main: "./js/main.js",
    mainDrawer: "./js/divdrawer/main.ts",
    polyfills: "./js/divdrawer/polyfills.ts",
    entry: "./js/entry.js",
    thirdpartylibs: "./js/thirdpartylibs.js"
  },
  output: {
    path: path.join(__dirname, "build/"),
    filename: "[name]bundle.js"
  },

module: {
    rules: [
      {
        parser: {
          system: true,
        }
      }
        test : /\.(tsx|ts)$/,
        use: [
               {
                 loader: '@ngtools/webpack',
                 options: {
                     configFile: path.resolve('./js/tsconfig.json')
                    },
               },
        ]
      },
    },

plugins: [
    new webpackPlugin({
      tsconfig: './js/tsconfig.json',
    }),
    new webpack.ContextReplacementPlugin(
      /\@angular(\\|\/)core(\\|\/)esm5/, …

从 Angular 14 开始，反应式表单默认是严格类型化的（类型化表单）。这很棒。我已经实现了一个简单的登录表单，如下所示

  form = this.fb.group({\n    username: [\'\', [Validators.required]],\n    password: [\'\', [Validators.required]],\n    rememberMe: [true]\n  });\n  submit() {\n    this.authenticationService.login(this.form.value).subscribe();\n

在我的服务中

login(data: { username: string; password: string; rememberMe: boolean }): Observable<any> {\n  // Logic to login here\n}\n

formTypescript 推断出的类型

  form: FormGroup<{username: FormControl<string>, password: FormControl<string>, rememberMe: FormControl<boolean>}>\n

看起来不错。问题是因为this.form.value它有一个 type Partial<{ username: string; password: string; rememberMe: boolean; }>。这会导致打字稿抛出错误

Argument of type \'Partial<{ username: string; password: string; rememberMe: boolean; }>\' is …

我有以下表格：

const enum Fields {
  FirstName = 'firstName',
  LastName = 'lastName'
}

interface FormType {
  [Fields.FirstName]: FormControl<string | null>;
  [Fields.LastName]: FormControl<string | null>;
}

public form!: FormGroup<FormType>;

this.form = new FormGroup({
  [Fields.FirstName]: new FormControl(null, { validators: Validators.required }),
  [Fields.LastName]: new FormControl(null, { validators: Validators.required }),
});

使用 theenum是我为了避免输入错误而养成的习惯。

当我这样做时this.form.getRawValue().firstName， 的类型firstName被正确定义为string | null。但是，我更喜欢使用FormBuilder来构建我的表单，但我找不到使用 来翻译上面表单的方法FormBuilder。我试过这个：

this.form = this._fb.group<FormType>({
  [Fields.FirstName]: ['', Validators.required],
  [Fields.LastName]: ['', Validators.required],
});

我当然可以使用一个FormGroup没有任何类型的简单的，但它会达不到目的：p

然而，这甚至不能作为 的推断类型 …

键入的表单很棒，但我想知道如何最初显示带有“数字”类型作为空输入字段的表单控件。我想将我的控件保持为非空，因为它们在我的表单中是必需的，但它排除使用 null 作为初始值，这是之前的解决方案。

编辑：也许我描述了我的情况。我有几个数字类型的 FormControl。我想最初将这些输入显示为空。因此，可能的解决方案是将 FormControl 构造函数中的初始值设置为 null。但 FormControl 的类型为 <number | 空>。所有这些都是必需的。提交后，我需要将该数据发送到服务器并分配 FormControl<number | null> value 为number类型的属性，这使得我为每个属性添加显式转换，即使我知道提交后由于“必需”验证器它们不能为空。我的 FormControl< string > 转换是不必要的，我可以通过提供“”作为初始值来显示空输入。我想知道是否有一些解决方法可以用数字来做到这一点。

在运行安装在 Angular 14 中的 [deepstream.io-client-js][1] 项目时，出现以下错误。[1]：https://www.npmjs.com/package/deepstream.io-client-js

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": …