Angular 导入在一个模块中运行良好，但在另一个模块中不起作用

Question

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

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

Link for the project repo on Github

当我将外部库 (ng2-semantic-ui) 导入到 app.browser.module 时，应用无法识别 ng2-semantic- ui 指令，但是当我将它导入“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 的模块层次结构。您正在尝试 build 一座建筑物，并在二楼添加一个房间(您的关于组件)，然后在三楼添加一个窗口(语义 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 通用服务器端渲染的有趣页面 here .

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

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

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

总而言之，问题要么来自您使用的样板结构，要么来自构建时的某些依赖冲突。另外，我找到了 Google documentation通用应用程序不完整和过时。