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.
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 replacments 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 { }
So 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 need more information about the setup, e.g. code snippets.