Angular集成Semantic UI

Posted 2021-05-30 无风听海

安装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 install

fs.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.0
  installing : node-v11.15.0
       mkdir : /usr/local/n/versions/node/11.15.0
       fetch : https://nodejs.org/dist/v11.15.0/node-v11.15.0-linux-x64.tar.xz
   installed : 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/node
         new : /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:29
      throw 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"
            ]
          }