Angular 导入在一个模块中效果很好，但在另一个模块中不起作用

Question

我得到了一个带有 app.module 和 app.browser.module/app.server.module 的 angular4 和通用应用程序。

App.Module 具有所有应用配置和 bootstrap。 app.browser.module 调用浏览器中使用的模块，以避免破坏通用构建。

当我将外部库 (ng2-semantic-ui) 导入 app.browser.module 时，应用程序无法识别 ng2-semantic-ui 指令，但是当我将其导入 'app.module' 时

这是我的模块结构：

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SuiModule } from 'ng2-semantic-ui';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({appId: 'app.id'}),
    SuiModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.browser.module.ts

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';   
import { SuiModule } from 'ng2-semantic-ui';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    AppModule,
    SuiModule,
  ],
  bootstrap: [AppComponent]
})
export class AppBrowserModule {}

当我在 app.module 中导入 SuiModule 时，应用程序可以识别它的指令，但是当我将它导出到 app.browser.module 时，它不会。为什么？

错误

compiler.es5.js:1690 Uncaught Error: Template parse errors:
'sui-sidebar' is not a known element:
1. If 'sui-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'sui-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

P.S。当我在 app.browser.module.

中导入它们时，BrowserAnimationsModule 在应用程序中被识别

Answer 1

它不起作用，因为您试图在 HomeComponent 的模板中使用 sui-sidebar 组件，该组件已在 AppModule 中声明，而此模块没有范围内没有 sui-sidebar 个组件

这就是封装在 @NgModules 中的工作方式。指令、组件和管道未在 "global" 范围内发布。

如果您想在 HomeComponent 中使用 sui-sidebar 组件，那么

1) 找到 @NgModule 其中 HomeComponent 已声明 (AppModule).

2) 查看 AppModule 的 declarations 数组。你在那里看到 sui-sidebar 组件了吗？如果你这样做，否则它会起作用

3) 查看imports数组。您是否看到任何正在导出的模块 sui-sidebar。如果你这样做，它就会工作，否则不幸的是你会得到像

这样的错误

ERROR in Template parse errors: 'sui-sidebar' is not a known element:

如果您的外部库与服务器渲染不兼容，那么预渲染在任何情况下都不起作用。

另见

Answer 2

您的问题来自 Angular 的模块层次结构。您正在尝试的是 build 一个 building 并在二楼添加一个房间（您的关于组件），然后在三楼添加一个 window （语义ui) 并且您希望将其添加到您二楼的房间。在您的情况下，您将 about.component 声明为您的 app.module 并尝试在您的 about.component 上使用一些语义组件，这些组件稍后在您导入时在 app.browser.module 上导入还有 app.module.

要修复它，您要么必须将组件声明移动到 app.browser.module:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

/*Code that breaks the NG APP when importing SUI on app.browser.module, but works well when imported on app.module*/
import {SuiModule} from 'ng2-semantic-ui';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    AppModule,
    SuiModule,
  ],
  declarations: [HomeComponent,
                AboutComponent],
  bootstrap: [ AppComponent ]
})
export class AppBrowserModule {}

或你在你的app.module:

上做

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

/*Code that breaks the NG APP when importing SUI on app.browser.module, but works well when imported on app.module*/
import {SuiModule} from 'ng2-semantic-ui';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule.withServerTransition({appId: 'ngcli-universal-seed-app'}),
    FormsModule,
    HttpModule,
    AppRoutingModule,
    SuiModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

您可以使用您想要的体系结构（尽管坚持@angular 建议的体系结构是一件好事）只要使用组件的页面将该组件导入到他的模块中（直接或通过另一个模块）。

编辑

在搜索此问题的解决方案时，我发现了一个关于 Angular 通用服务器端渲染的有趣页面 here。

在文章中，我发现 link 样板比您正在使用的样板结构更好，并且是最新的。你可以找到它here。我推荐你使用这个，因为它结构更好，效果更好。

最后我将你的语义-ui代码添加到这个样板的关于页面，将模块导入他们的about.module，编译通用应用程序并运行它，一切正常.

我为您提供了带有工作添加代码的样板 here

总而言之，问题要么来自您使用的样板结构，要么来自构建uilding 时的一些依赖冲突。此外，我发现通用应用程序上的 Google documentation 不完整且已过时。

Angular 导入在一个模块中效果很好，但在另一个模块中不起作用

Angular import works great in one module, but does not work in another one

components

angular-module

angular-universal

angular

ng2-semantic-ui

app.module.ts

app.browser.module.ts

错误

编辑