Question

我试图在Asp.Net Core上使用Angular 2的语义UI。我已经开始使用JavaScript services官方Yeoman模板中的aspnetcore-spa项目模板，该模板已经配置了Asp.Net MVC Core，Webpack，Angular 2和Bootstrap。

然后，我尝试按照this GitHub中描述的步骤安装Semantic UI。

我做的步骤：

使用NPM npm install semantic-ui --save安装语义UI
- 在设置过程中，我安装了所有功能并选择了安装文件夹wwwroot/lib/semantic/
前往wwwroot/lib/semantic文件夹并运行gulp build

我开始真的不确定，在模板结构中没有vendor.ts，所以我不确定在哪里放置语义css和js的导入。

我唯一能找到的是包含Bootstrap的一些条目的webpack.config.vendor.js，所以我修改了vendor属性并添加了语义js和css的导入。

以下是我如何修改它：

entry: {
    vendor: [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/platform-server',
        'angular2-universal',
        'angular2-universal-polyfills',
        'es6-shim',
        'es6-promise',
        'event-source-polyfill',
        'jquery',
        'zone.js',
        'wwwroot/lib/semantic/dist/semantic.min.js',
        'wwwroot/lib/semantic/dist/semantic.min.css',
        'ng-semantic'
    ]
}

我删除了对bootstrap的引用，并添加了semantic.min.js，semantic.min.css和ng-semantic。

最后，我使用NPM安装了Ng-Semantic并将import { NgSemanticModule } from 'ng-semantic'添加到app.module.ts。

现在，当我尝试运行该应用程序时，出现以下错误：

System.Exception：调用Node模块失败，错误：Prerendering 由于错误而失败：ReferenceError：未定义jQuery

我得知这个错误是由系统试图预渲染一些依赖于jQuery的代码引起的，这是一个很大的禁忌，它可能是语义ui.js。但我完全不知道如何解决这个问题。

为了参考和更简单的问题排查，我已将代码的当前状态推送到GitHub，它可以在this address处获得。

提前致谢！

Answer 1

我设法让它正常工作，部分归功于其他问题：asp.net core spa template, Semantic UI

为了简单起见，我复制了问题中提出的步骤，并添加了一些注释。

首先，我的想法是使用NPM安装语义UI的CSS：
- npm install semantic-ui-css --save
然后，安装ng2-semantic-ui库。它允许使用所有Semantic UI组件而不依赖于JQuery。
- npm install ng2-semantic-ui --save
打开webpack.config.vendor.js文件，删除条目/供应商列表中的bootstrap和bootstrap.css，然后将其替换为'ng2-semantic-ui'和'semantic-ui-css/semantic.css'
使用命令
重建vendor.js
- webpack --config webpack.config.vendor.js如果你安装了全球webpack
- 或node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod如果您不
从SuiModule文件中的ng2-semantic-ui导入app.module.client.ts。
最后，在.Net方面，在Views/Home/Index.html中，将asp-prerender-module替换为asp-ng2-prerender-module和＆＃34;正在加载...＆＃34;通过以下方式：

<div class="ui active inverted dimmer"> <div class="ui text large loader">Loading</div> </div>

然后，你必须重写很多应用程序来用Semantic UI替换bootstrap css类。

在Asp.Net Core Spa模板上使用语义ui和webpack

1 个答案: