Angular not importing a module in app.module.ts still gives error in component declarations of that module

Question

I have an app that I want to extract two builds of it.

First is a build that contains the whole app.

Second one is an app that contains only one of my modules. And it has a separate routing module as well.

I separated the builds using file replacement to define a new way of build in angular.json.

Replacements are these:

"fileReplacements": [
  {
    "replace": "projects/my-app/src/environments/environment.ts",
    "with": "projects/my-app/src/environments/environment.prod.ts"
  },
  {
    "replace": "projects/my-app/src/app/app.module.ts",
    "with": "projects/my-app/src/app/app-auth-standalone.module.ts"
  },
  {
    "replace": "projects/my-app/src/app/app-routing.module.ts",
    "with": "projects/my-app/src/app/app-auth-standalone-routing.module.ts"
  },
  {
    "replace": "projects/my-app/src/app/app.component.ts",
    "with": "projects/my-app/src/app/app-auth-standalone.component.ts"
  }
]

Now when I run the ng run my-app:auth-standalone:production it gives me this kinds of errors:

Error: <some-path>/message-bot.component.html:24:34 - error NG8002: Can't bind to 'control' since it isn't a known property of 'app-bot-view-tr
ansfer-to-user'.
1. If 'app-bot-view-transfer-to-user' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'app-bot-view-transfer-to-user' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

If I don't import any of the modules or parent modules in the AppModule it will throw this kind of errors.

I tried adding NO_ERRORS_SCHEMA and CUSTOM_ELEMENTS_SCHEMA in all modules but the errors still occur.

Answer 1

You need to correctly load/import your module in both of your defined entry point modules. The error says, that app-bot-view-transfer-to-user is not registered in the corresponding auth-standalone module. I assume that you have declared the component only inside your app.module.

Because of the replacements, you need to make sure that you register the corresponding module for app-bot-view-transfer-to-user in app-auth-standalone.module, too.

If you have e.g. the following structure:

app.module.ts:

import AppBotViewTransferToUserComponent from './app-bot-view-transfer-to-user.component';

@NgModule({
  declarations: [AppBotViewTransferToUserComponent],
})
export class AppModule { }

You need to replicate that structure inside your other entrypoint module as well.

app-auth-standalone.module.ts:

import AppBotViewTransferToUserComponent from './app-bot-view-transfer-to-user.component';

@NgModule({
  declarations: [AppBotViewTransferToUserComponent],
})
export class AppAuthStandaloneModule { ... }

A better way would be to create a simple shared module which holds the shared components/services etc:

shared.module.ts:

import AppBotViewTransferToUserComponent from './app-bot-view-transfer-to-user.component';

@NgModule({
  declarations: [AppBotViewTransferToUserComponent],
  exports: [AppBotViewTransferToUserComponent] // export the component to make it available in other modules where the Shared module is imported
})
export class SharedModule {  }

The only thing left is to clear both your AppModule and your AppAuthStandaloneModule to import SharedModule - the component should now be usable in both ways:

import SharedModule from './shared.module';

@NgModule({
  imports: [SharedModule],
})
export class AppModule { ... }


@NgModule({
  imports: [SharedModule],
})
export class AppAuthStandaloneModule { ... }

If this still does not work, I will need more information about the setup, e.g. code snippets.