Angular 未在 app.module.ts 中导入模块仍然会在该模块的组件声明中给出错误

Question

我有一个应用程序，我想提取它的两个版本。

首先是包含整个应用程序的构建。

第二个是仅包含我的一个模块的应用程序。它也有一个单独的路由模块。

我使用文件替换来分离构建，以在 angular.json 中定义一种新的构建方式。

替换为这些：

"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"
  }
]

现在当我运行 ng run my-app:auth-standalone:production 它给我这样的错误：

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.

如果我不导入 AppModule 中的任何模块或父模块，它将抛出此类错误。

我尝试在所有模块中添加 NO_ERRORS_SCHEMA 和 CUSTOM_ELEMENTS_SCHEMA，但仍然出现错误。

Answer 1

您需要在您定义的两个入口点模块中正确 load/import 您的模块。错误表明，app-bot-view-transfer-to-user 未在相应的 auth-standalone 模块中注册。我假设您只在 app.module.

中声明了组件

由于替换，您需要确保在 app-auth-standalone.module 中为 app-bot-view-transfer-to-user 注册相应的模块。

如果你有，例如以下结构：

app.module.ts:

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

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

您还需要在其他入口点模块中复制该结构。

app-auth-standalone.module.ts:

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

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

更好的方法是创建一个简单的共享模块，其中包含共享 components/services 等：

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 {  }

所以唯一剩下的就是清除您的 AppModule 和 AppAuthStandaloneModule 以导入 SharedModule - 该组件现在应该可以两种方式使用：

import SharedModule from './shared.module';

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


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

如果这仍然不起作用，我需要有关设置的更多信息，例如代码片段。

Angular 未在 app.module.ts 中导入模块仍然会在该模块的组件声明中给出错误

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

angular-module

angular-cli

angular