Question

我有一个angular4＆amp;具有df = df.withColumn('c2',explode(df['c2'])) df.alias('df1') \ .join(df.alias('df2'),((col('df1.c1') == col('df2.c2')) & (col('df2.c1') == col('df1.c2')))) \ .select(col('df1.c1'),col('df1.c2'))和app.module的通用应用程序。

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

Link for the project repo on Github

当我将外部库（app.browser.module）导入ng2-semantic-ui时，该应用确实无法识别app.browser.module指令，但当我将其导入'app.module'时，它确实如此。

这是我的模块结构：

app.module.ts

ng2-semantic-ui

app.browser.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 { }

当我在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

P.S。我在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。

Answer 1

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

这就是封装在sui-sidebar中的工作原理。指令，组件和管道未在“全球”范围内发布。

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

1）找到已声明HomeComponent的{{1}} @NgModule。

2）查看HomeComponent AppModule数组。你看到declarations组件了吗？如果你这样做，否则将起作用

3）查看AppModule数组。您是否看到任何导出sui-sidebar的模块。如果你那么它会工作，否则不幸的是你会得到像

这样的错误

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

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

另见

Angular 2 Use component from another module

Answer 2

您的问题来自Angular的模块层次结构。你正在尝试建立一个建筑物，在二楼你添加一个房间（你的组件），然后你在三楼添加一个窗口（语义ui），你想要它添加在二楼的房间。在您的情况下，您将about.component声明为app.module，并尝试在about.components上使用稍后导入app.browser.module时导入app.module的一些语义组件。< / p>

要解决此问题，您必须将组件声明移至 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 here的有趣页面。

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

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

我为你删除了带有工作添加代码here

的样板文件

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

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

app.module.ts

app.browser.module.ts

错误

2 个答案:

修改