首页 / 技术问答 / Angular问答列表 / 问答详情

Angular 导入浏览器模块时出错已导入commonModule的insted，animationBrower也显示错误，当p打开时

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

import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { Dropdown, DropdownItem, DropdownModule } from 'primeng/dropdown';  interface City {   name: string;   code: string; }   @Component({   selector: 'app-dropdown',   standalone: true,   imports: [FormsModule,DropdownModule,BrowserAnimationsModule],   templateUrl: './dropdown.component.html',   styleUrl: './dropdown.component.css',   providers: []    }) export class DropdownComponent implements OnInit{   cities: City[] | undefined;    selectedCity: City | undefined;   ngOnInit() {     debugger;     this.cities = [         { name: 'New York', code: 'NY' },         { name: 'Rome', code: 'RM' },         { name: 'London', code: 'LDN' },         { name: 'Istanbul', code: 'IST' },         { name: 'Paris', code: 'PRS' }     ];   }  }  

core.mjs:6531 ERROR Error: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.     at new _BrowserModule (platform-browser.mjs:1258:13)     at Object.BrowserModule_Factory [as useFactory] (platform-browser.mjs:1282:14)     at Object.factory (core.mjs:3322:38)     at core.mjs:3219:47     at runInInjectorProfilerContext (core.mjs:866:9)     at R3Injector.hydrate (core.mjs:3218:21)     at R3Injector.get (core.mjs:3082:33)     at injectInjectorOnly (core.mjs:1100:40)     at ɵɵinject (core.mjs:1106:42)     at useValue (core.mjs:2854:73)

ERROR RuntimeError: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
    at new _BrowserModule (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29844:13)
    at Object.BrowserModule_Factory [as useFactory] (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29868:10) 
    at Object.factory (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3965:32)
    at eval (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3886:35)
    at runInInjectorProfilerContext (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2525:5)
    at R3Injector.hydrate (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3885:11)
    at R3Injector.get (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3778:23)
    at injectInjectorOnly (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2634:36)
    at ɵɵinject (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2640:59)
    at useValue (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3610:67) {
  code: 5100
}

No output file changes.

Application bundle generation complete. [0.878 seconds]

ERROR RuntimeError: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
    at new _BrowserModule (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29844:13)
    at Object.BrowserModule_Factory [as useFactory] (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29868:10) 
    at Object.factory (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3965:32)
    at eval (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3886:35)
    at runInInjectorProfilerContext (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2525:5)
    at R3Injector.hydrate (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3885:11)
    at R3Injector.get (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3778:23)
    at injectInjectorOnly (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2634:36)
    at ɵɵinject (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2640:59)
    at useValue (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3610:67) {
  code: 5100
}
ERROR RuntimeError: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
    at new _BrowserModule (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29844:13)
    at Object.BrowserModule_Factory [as useFactory] (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:29868:10) 
    at Object.factory (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3965:32)
    at eval (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3886:35)
    at runInInjectorProfilerContext (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2525:5)
    at R3Injector.hydrate (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3885:11)
    at R3Injector.get (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3778:23)
    at injectInjectorOnly (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2634:36)
    at ɵɵinject (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:2640:59)
    at useValue (eval at instantiateModule (file:///E:/Angular%20off/login-page/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54755:28), <anonymous>:3610:67) {
  code: 5100
}

我们想用邮箱显示数据，

推荐答案

我发现了BrowserAnimationModule的用法，当我们使用独立的(使用bootstrapApplication)时，我们需要使用下面的provideAnimations示例导入动画！

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withFetch()),
    provideAnimations(), // <- Changed here
  ],
};

在此之后，我删除了源代码中所有出现的BrowserAnimationsModule.

之后，错误消失了！

Stackblitz Demo

Angular相关问答推荐

Angularmaterial 中的处理mat—radio—button表单值访问器

运行容器后，Docker容器立即退出

基于另一个控制值显示值的Angular 数组

从Angular 14更新到15个多边形.ts问题

确保我的角库S服务构建提供独立的友好提供功能

JsPDF Autotable 将图像添加到列中出现错误：属性getElementsByTagName不存在

相同的 Angular 代码在生产环境中停止工作

Renderer2.appendChild 没有按预期工作？

我想将一个对象传递给一个子组件.我做了一切，但没有任何效果. (Angular )

res.json() 不是函数

Angular2 CLI 错误@angular/compiler-cli包未正确安装

Angular2 Pipes：输出原始 HTML

由于时区，Angular 4 日期管道显示错误的日期 - 如何解决这个问题？

Angular 4：InvalidPipeArgument：管道AsyncPipe的[object Object]

如何在 Angular 6 中使用 mouseover 和 mouseout

将外部 CSS 加载到组件中

错误：angular2 中没有 HttpHandler 的提供者

'Observable' 类型上不存在属性 'filter'

Angular2：子组件访问父类变量/函数

如何使用formControlName和处理嵌套的formGroup？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630