3

我有一个 angular4 和 Universal 应用程序，带有 aapp.module和 a app.browser.module/app.server.module。

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

Github 上项目 repo 的链接

当我将外部库 ( 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 {}

SuiModule当我在应用程序中导入app.module时识别它的指令，但是当我把它拿出来时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. ("

当我将PSBrowserAnimationsModule导入到应用程序中时，它们会在应用程序中被识别app.browser.module。

4

2 回答 2

3

它不起作用，因为您试图在已声明的sui-sidebar模板中使用组件，并且该模块在其范围内没有组件HomeComponentAppModulesui-sidebar

这就是封装在@NgModules. 指令、组件和管道不在“全局”范围内发布。

如果您想在其中使用sui-sidebar组件HomeComponent

1) 查找已声明的@NgModule位置( )。HomeComponentAppModule

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

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

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

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

也可以看看

于 2017-07-25T15:27:56.727 回答
3

您的问题来自 Angular 的模块层次结构。您正在尝试建造一座建筑物，并在二楼添加一个房间（您的 about 组件），然后在三楼添加一个窗口（语义 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 Universal Server Side Rendering 的有趣页面。

在文章中，我发现了一个样板的链接，我发现它的结构比您正在使用的和最新的更好。你可以在这里找到它。我建议您使用这个，因为它的结构更好并且可以工作。

Last I added your semantic-ui code to about page of this boilerplate, imported the module into their about.module, compiled the universal app and run it, everything works fine.

I dropped for you the boilerplate with the working added code here

To conclude, the problem was coming either from the boilerplate structure you were using or some dependency conflict when building. Also, I find the Google documentation on universal apps not complete and outdated.

于 2017-07-25T15:32:00.327 回答