Webpack and Angular 4 without CLI

1
votes

I implement webpack in angular without cli.

directory tree:

  • aplication
  • -app
  • --directive
  • --services
  • -- models
  • --more... -assets -build - webpack conf
  • -src

webpack configure

Command NPM RUN PROD throws

    ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'E:\index.html' in 'E:\cms  s':
  Error: Can't resolve 'E:\index.html' in 'E:\cms'

  - compiler.js:76
    [cms_authors]/[html-webpack-plugin]/lib/compiler.js:76:16

  - Compiler.js:296 Compiler.<anonymous>
    [cms_authors]/[webpack]/lib/Compiler.js:296:10

  - Compiler.js:499
    [cms_authors]/[webpack]/lib/Compiler.js:499:13

  - Tapable.js:202 next
    [cms_authors]/[tapable]/lib/Tapable.js:202:11

  - CachePlugin.js:62 Compiler.<anonymous>
    [cms_authors]/[webpack]/lib/CachePlugin.js:62:5

  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:206:13

  - Compiler.js:496
    [cms_authors]/[webpack]/lib/Compiler.js:496:10

  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:195:46

  - Compilation.js:649 self.applyPluginsAsync.err
    [cms_authors]/[webpack]/lib/Compilation.js:649:19

  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:195:46

  - Compilation.js:640 self.applyPluginsAsync.err
    [cms_authors]/[webpack]/lib/Compilation.js:640:11

  - Tapable.js:202 next
    [cms_authors]/[tapable]/lib/Tapable.js:202:11

  - UglifyJsPlugin.js:230 Compilation.compilation.plugin
    [cms_authors]/[webpack]/lib/optimize/UglifyJsPlugin.js:230:5

  - Tapable.js:206 Compilation.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:206:13

  - Compilation.js:635 self.applyPluginsAsync.err
    [cms_authors]/[webpack]/lib/Compilation.js:635:10

  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:195:46

ERROR in Entry module not found: Error: Can't resolve 'E:\cms_authors\app\systemjs.config.js' in 'E:\cms'

ERROR in ./app/_services/hash.service.ts
Module not found: Error: Can't resolve 'sha256' in 'E:\cms_authors\app\_services'
 @ ./app/_services/hash.service.ts 10:0-17
 @ ./app/_services/index.ts
 @ ./app/app.module.ts
 @ ./app/main.ts

ERROR in ./app/_directives/article/preview.component.html?v=${new Date().getTime()}
Module not found: Error: Can't resolve './assets/images/phone_image.png' in 'E:\cms\app\_directives\article'
 @ ./app/_directives/article/preview.component.html?v=${new Date().getTime()} 1:2388-2430
 @ ./app/_directives/article/preview.component.ts
 @ ./app/_directives/article/index.ts
 @ ./app/app.module.ts
 @ ./app/main.ts
2
angularwebpack

2 Answers

0
votes

Apparently the html webpack plugin fails to get to the index.html. Its not clear as to where the index.html is located in your folder structure. Suggest to edit HtmlWebpackPlugin.template value to a proper location of index.html. In case if it helps, you can refer to angular with webpack (i.e. without ng-cli) here : https://github.com/rakcheru/webpack-angular5

0
votes

almost :)

- building for production...
[at-loader] Checking started in a separate process...

[at-loader] Ok, 1.317 sec.
Hash: 3be42f85ac92a975a792
Version: webpack 2.5.1
Time: 31485ms
       Asset     Size  Chunks  Chunk Names
  index.html  5.74 kB
   vendor.js  2.23 MB       0  vendor
   client.js   349 kB       1  client
   styles.js  1.37 kB       2  styles
client.js.gz  86.7 kB
vendor.js.gz   444 kB

WARNING in ./~/angular2-datatable/~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
71:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/angular2-datatable/~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
87:15-102 Critical dependency: the request of a dependency is an expression

ERROR in   Error: Child compilation failed:
  Module parse failed: M:\cms\assets\images\_logo_files\logo_small.png Unexpected character '�' (1:0)
  You may need an appropriate loader to handle this file type.
  (Source code omitted for this binary file):
  SyntaxError: Unexpected character '�' (1:0)

  - compiler.js:76
    [cms_authors]/[html-webpack-plugin]/lib/compiler.js:76:16

  - Compiler.js:296 Compiler.<anonymous>
    [cms_authors]/[webpack]/lib/Compiler.js:296:10

  - Compiler.js:499
    [cms_authors]/[webpack]/lib/Compiler.js:499:13

  - Tapable.js:202 next
    [cms_authors]/[tapable]/lib/Tapable.js:202:11

  - CachePlugin.js:62 Compiler.<anonymous>
    [cms_authors]/[webpack]/lib/CachePlugin.js:62:5

  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:206:13

  - Compiler.js:496
    [cms_authors]/[webpack]/lib/Compiler.js:496:10

  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:195:46

  - Compilation.js:649 self.applyPluginsAsync.err
    [cms_authors]/[webpack]/lib/Compilation.js:649:19

  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:195:46

  - Compilation.js:640 self.applyPluginsAsync.err
    [cms_authors]/[webpack]/lib/Compilation.js:640:11

  - Tapable.js:202 next
    [cms_authors]/[tapable]/lib/Tapable.js:202:11

  - UglifyJsPlugin.js:230 Compilation.compilation.plugin
    [cms_authors]/[webpack]/lib/optimize/UglifyJsPlugin.js:230:5

  - Tapable.js:206 Compilation.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:206:13

  - Compilation.js:635 self.applyPluginsAsync.err
    [cms_authors]/[webpack]/lib/Compilation.js:635:10

  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [cms_authors]/[tapable]/lib/Tapable.js:195:46



ERROR in ./app/_services/hash.service.ts
Module not found: Error: Can't resolve 'sha256' in 'M:\cms\app\_services'
 @ ./app/_services/hash.service.ts 10:0-17
 @ ./app/_services/index.ts
 @ ./app/app.module.js