Angular集成Semantic UI

安装gulp

mango@mango:~/Documents/Angular12$ sudo npm install -g gulp

创建项目

mango@mango:~/Documents/Angular12$ ng new semanticui-angular-project

安装semantic-ui

mango@mango:~/Documents/Angular12/semanticui-angular-project$ npm install semantic-ui --save

安装的时候报错，发现是node12和gulp4不兼容

> semantic-ui@2.4.2 install /home/mango/Documents/Angular12/semanticui-angular-project/node_modules/semantic-ui
> gulp installfs.js:35
} = primordials;^ReferenceError: primordials is not defined

安装node版本管理模块

mango@mango:~/Documents/Angular12/semanticui-angular-project$ sudo npm install n -g
[sudo] mango 的密码： 
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
+ n@7.2.2
added 1 package from 2 contributors in 2.577s

降级安装nodejs 11.15

mango@mango:~/Documents/Angular12/semanticui-angular-project$ sudo n 11.15.0installing : node-v11.15.0mkdir : /usr/local/n/versions/node/11.15.0fetch : https://nodejs.org/dist/v11.15.0/node-v11.15.0-linux-x64.tar.xzinstalled : v11.15.0 (with npm 6.7.0)Note: the node command changed location and the old location may be remembered in your current shell.old : /usr/bin/nodenew : /usr/local/bin/node
To reset the command location hash either start a new shell, or execute PATH="$PATH"

重新安装semantic-ui

mango@mango:~/Documents/Angular12/semanticui-angular-project$ npm install semantic-ui --save
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.> semantic-ui@2.4.2 install /home/mango/Documents/Angular12/semanticui-angular-project/node_modules/semantic-ui
> gulp install/home/mango/Documents/Angular12/semanticui-angular-project/node_modules/accord/lib/index.js:29throw new Error(name + " version " + version + " is not currently supported");^Error: less version 4.1.1 is not currently supported

查看package-lock.json可以看到angular默认的less版本是4.1.1

mango@mango:~/Documents/Angular12/semanticui-angular-project$ npm install less@3.13.1

由于angular和semantic-ui对node、gulp、less都有版本要求，并且存在冲突，所以直接使用全新的本地环境，在项目同一个目录新建一个semantic-ui，并安装semantic-ui

mango@mango:~/Documents/Angular12$ mkdir semantic-ui
mango@mango:~/Documents/Angular12$ cd semantic-ui
mango@mango:~/Documents/Angular12/semantic-ui$ npm install semantic-ui --save
> semantic-ui@2.4.2 install /home/mango/node_modules/semantic-ui
> gulp install[23:03:18] Using gulpfile ~/node_modules/semantic-ui/gulpfile.js
[23:03:18] Starting 'install'...[23:03:18] Starting 'run setup'...
? Set-up Semantic UI Automatic (Use default locations and all components)
? We detected you are using NPM Nice! Is this your project folder? /home/mango No, let me specify
? Please enter the absolute path to your project root /home/mango/Documents/Angular12/semanticui-angular-project
? Where should we put Semantic UI inside your project? semantic/
[23:05:13] Finished 'run setup' after 1.92 min
[23:05:13] Starting 'create install files'...

进入semantic目录，并进行build

mango@mango:~/Documents/Angular12/semantic-ui$ cd semantic/
mango@mango:~/Documents/Angular12/semantic-ui/semantic$ gulp build

将build的css文件和js文件加入到angular.json文件

          "options": {"outputPath": "dist/semanticui-angular-project","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","inlineStyleLanguage": "less","assets": ["src/favicon.ico","src/assets"],"styles": ["src/styles.less",// "../semantic-ui/semantic/dist/semantic.min.css"],"scripts": [// "../semantic-ui/semantic/dist/semantic.min.js"]}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！