On ng serve recompiling shows a repeated component declaration in same 2 modules: Type AppComponent is part of the declarations of 2 modules: AppModule and AppModule!

[leticiacasg]

🐞 Bug report

Command (mark with an x)

• new
• build
• [x ] serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

In angular version 8.2.14 was working. The bug appears when I upgrade to Angular 10.1.1.

Description

After running first ng serve command the application works fine as it used to do. When the application it is modified at any point, and CLI recompile it, the application crash and it shows the following error in browser console:

Error: Type AppComponent is part of the declarations of 2 modules: AppModule and AppModule! Please consider moving AppComponent to a higher module that imports AppModule and AppModule. You can also create a new NgModule that exports and includes AppComponent then import that NgModule in AppModule and AppModule.

I have read that this error should appear in case the component is declared in two modules, but in the case it is saying that a component is being declared at the same module. This error is showed with all components at every module that is modified, this is just one of them.

🔬 Minimal Reproduction

I am unable to set a repository with the problem due to the complexity of it, but I insert here configuration files because I think they can be a clue to find the problem.

As it is mentioned before, the steps to reproduce it is just to run ng serve, and then force it to recompile at any point.

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": ["src/test.ts", "src/**/*.spec.ts", "src/**/*.mock.ts", "**/*.stories.ts", "src/**/*.worker.ts"]    
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowJs": true,
    "target": "es2020",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "baseUrl": "./",
    "types": ["@types/jest","@types/jquery"],
    "paths": {
      "@app/*": ["src/app/*"],
      "@env/*": ["src/environments/*"],
      "@consts": ["src/app/shared/utils/constants.ts"],
      "@utils": ["src/app/shared/utils/utils.ts"],
      "@core/*": ["src/app/core/*"],
      "@shared/*": ["src/app/shared/*"],
    }
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": true
  }
}

AppModule

@NgModule({
  imports: [
    BrowserAnimationsModule,
    QuicklinkModule,
    ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }),
    HttpClientModule,
    TranslateModule.forRoot(),
    CoreModule,
    SharedModule,
    LoginModule,
    AppRoutingModule,
    RecaptchaV3Module,
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true
      }
    }),
    !environment.production
      ? StoreDevtoolsModule.instrument({
        maxAge: 25,
        logOnly: environment.production
      })
      : []
  ],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

🔥 Exception or Error

Error: Type AppComponent is part of the declarations of 2 modules: AppModule and AppModule! Please consider moving AppComponent to a higher module that imports AppModule and AppModule. You can also create a new NgModule that exports and includes AppComponent then import that NgModule in AppModule and AppModule.
    at verifySemanticsOfNgModuleDef (core.js:25894)
    at Function.get (core.js:25829)
    at getInjectorDef (core.js:396)
    at R3Injector.processInjectorType (core.js:11130)
    at core.js:11002
    at core.js:1135
    at Array.forEach ()
    at deepForEach (core.js:1135)
    at new R3Injector (core.js:11002)
    at createInjectorWithoutInjectorInstances (core.js:10976)

🌍 Your Environment

Angular CLI: 10.1.1
Node: 14.8.0
OS: win32 x64

Angular: 10.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server
... platform-webworker, platform-webworker-dynamic, router
... service-worker
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1001.1
@angular-devkit/build-angular      0.1001.1
@angular-devkit/build-optimizer    0.1001.1
@angular-devkit/build-webpack      0.1001.1
@angular-devkit/core               10.1.1
@angular-devkit/schematics         8.3.29
@angular/cdk                       10.2.1
@angular/flex-layout               10.0.0-beta.32
@angular/material                  10.2.1
@angular/material-moment-adapter   10.2.1
@ngtools/webpack                   10.1.1
@schematics/angular                10.1.1
@schematics/update                 0.1001.1
rxjs                               6.6.3
typescript                         4.0.2
webpack                            4.44.1

Anything else relevant?
No

[alan-agius4]

Are you using HMR?

[leticiacasg]

Yes, it is the behaviour I described. The application is compiled autommatically after the save any file, then it crash.

[alan-agius4]

See #17324 (comment)

Duplicate of angular/angular#35265

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}