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

Question

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

App.Module具有所有应用配置和引导程序。app.browser.module调用浏览器中使用的模块，以避免破坏通用版本。

Github 上的项目存储库链接

当我将外部库(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. ("

附言 当我在应用程序中导入BrowserAnimationsModule时，它们会在应用程序中被识别app.browser.module.

Answer 1

你的问题来自Angular的模块层次结构。您正在尝试的是建造一座建筑物，然后在二楼添加一个房间(您的关于组件(，然后在三楼添加一个窗口(语义 ui(，并希望将其添加到二楼的房间中。在你的例子中，你声明了 about.component 到你的 app.module，你尝试在你的 about.components 上使用一些语义组件，当你导入 app.module 时，你稍后会在你的 app.browser.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 通用服务器端渲染的有趣页面。

在本文中，我发现指向样板的链接比您正在使用的样板链接结构更好且是最新的。你可以在这里找到它。我建议您使用这个，因为它结构更好并且有效。

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

我在这里为您删除了带有工作添加代码的样板

总而言之，问题来自您使用的样板结构或构建时的一些依赖冲突。另外，我发现有关通用应用程序的Google文档不完整且过时。

Answer 2

它不起作用，因为您正在尝试在AppModule中声明HomeComponent模板中使用sui-sidebar组件，并且此模块在其范围内没有sui-sidebar组件

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

如果要在HomeComponent中使用sui-sidebar组件，则

1( 查找已声明HomeComponent@NgModule(AppModule(。

2(查看declarationsAppModule数组。你在那里看到sui-sidebar组件吗？如果你这样做，否则会起作用

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

模板解析错误中的错误："sui-sidebar"不是已知元素：

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

参见

• 角度 2 使用其他模块中的组件