vladotesanovic / ngSemantic

Angular 2 building blocks :package: based on Semantic UI
https://ng-semantic.herokuapp.com/
MIT License
973 stars 148 forks source link

angular-cli, lots of "Module not found: Error: Can't resolve" on initial integration #161

Closed denishaskin closed 7 years ago

denishaskin commented 7 years ago

I've started with a blank angular-cli project (versions below), followed the Angular CLI configuration ( Webpack ) instructions to install jquery and modify angular-cli.json. On ng serve I get the following errors:

[dhaskin@six val2 (ngSemantic %=)]$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
Hash: cb7222112064b3cc3ce7
Time: 8721ms
chunk    {0} main.bundle.js, main.bundle.map (main) 4.54 kB {3} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 559 kB {4} [initial] [rendered]
chunk    {2} scripts.bundle.js, scripts.bundle.map (scripts) 372 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.85 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css
Module not found: Error: Can't resolve './themes/default/assets/images/flags.png' in '/Users/dhaskin/clients/io/val2/val2/vendor/semantic-ui/css'
 @ ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css 6:82733-82784
 @ ./vendor/semantic-ui/css/semantic.min.css
 @ multi ./src/styles.css ./vendor/semantic-ui/css/semantic.min.css

ERROR in ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.eot' in '/Users/dhaskin/clients/io/val2/val2/vendor/semantic-ui/css'
 @ ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css 6:108946-108996 6:109014-109064
 @ ./vendor/semantic-ui/css/semantic.min.css
 @ multi ./src/styles.css ./vendor/semantic-ui/css/semantic.min.css

ERROR in ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.woff2' in '/Users/dhaskin/clients/io/val2/val2/vendor/semantic-ui/css'
 @ ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css 6:109113-109165
 @ ./vendor/semantic-ui/css/semantic.min.css
 @ multi ./src/styles.css ./vendor/semantic-ui/css/semantic.min.css

ERROR in ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.woff' in '/Users/dhaskin/clients/io/val2/val2/vendor/semantic-ui/css'
 @ ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css 6:109195-109246
 @ ./vendor/semantic-ui/css/semantic.min.css
 @ multi ./src/styles.css ./vendor/semantic-ui/css/semantic.min.css

ERROR in ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.ttf' in '/Users/dhaskin/clients/io/val2/val2/vendor/semantic-ui/css'
 @ ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css 6:109275-109325
 @ ./vendor/semantic-ui/css/semantic.min.css
 @ multi ./src/styles.css ./vendor/semantic-ui/css/semantic.min.css

ERROR in ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.svg' in '/Users/dhaskin/clients/io/val2/val2/vendor/semantic-ui/css'
 @ ./~/css-loader!./~/postcss-loader!./vendor/semantic-ui/css/semantic.min.css 6:109358-109408
 @ ./vendor/semantic-ui/css/semantic.min.css
 @ multi ./src/styles.css ./vendor/semantic-ui/css/semantic.min.css
webpack: bundle is now VALID.

My angular-cli.json (only modifications are the additions to styles and scripts as directed in the README):

{
  "project": {
    "version": "2.0",
    "name": "val2",
    "description": "Based on angular-cli 1.0.0-beta.26."
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "../vendor/semantic-ui/css/semantic.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../vendor/semantic-ui/js/semantic.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

Versions:

[dhaskin@six val2 (ngSemantic %=)]$ ng version

                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.26
node: 7.4.0
os: darwin x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

ng-semantic version is ng-semantic@1.1.13

denishaskin commented 7 years ago

Never mind, that was dumb... I didn't bring the Semantic UI theme files over to the correct location.

cp -R Semantic-UI-CSS-master/themes vendor/semantic-ui/css