Angular 4 Project Setup with Webpack Video Tutorial

Angular 4 Project Setup with Webpack Video Tutorial
0.0 0

#1

Have tried to setup an Angular 4 environment using this Video Tutorial form Jordan Lesson:

In trying to learn along with the video and files for download, the following occurs:
First run: I get TS2304: Cannot find name ‘require’ ERROR in [at-loader] in ./src/app/app.component.ts and ./src/polyfills.ts

This I can fix by placing the following in tsconfig.json and tsconfig-aot.json compilerOptions section:
“typeRoots”: [
“node_modules/@types
]

There is also the following error while running ‘npm run webpack-prod’:
‘output.filename’ is required, either in config file or as --output-filename

This I can fix by changing the syntax of the command to: 'npm run webpack-prod --config config/webpack.prod.js

But now that I can run this command, I get the following error:

> lesson-on-coding-angular-webpack@1.0.0 webpack-prod C:\wamp64\www\angular-tute
\angFour
> cross-env NODE_ENV=production webpack "config/webpack.prod.js"

@@@@@@@@@@@@@@@@@@PROD@@@@@@@@@@@@@@@@@@@@

[at-loader] Using typescript@2.3.4 from typescript and "tsconfig.json" from C:\w
amp64\www\angular-tute\angFour\tsconfig-aot.json.


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

[at-loader] Ok, 1.764 sec.
Hash: 8591836aef37984561ee
Version: webpack 2.2.1
Time: 45083ms
  [11] ./~/@angular/core/@angular/core.es5.js 487 kB {0} [built]
  [17] ./~/@angular/platform-browser/@angular/platform-browser.es5.js 141 kB {0}
 [built]
  [24] ./~/@angular/common/@angular/common.es5.js 130 kB {0} [built]
 [128] ./~/@angular/http/@angular/http.es5.js 74.6 kB {0} [built]
 [129] ./~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.e
s5.js 5.88 kB {0} [built]
 [130] ./~/@angular/router/@angular/router.es5.js 214 kB {0} [built]
 [131] ./aot/src/app/app.module.ngfactory.ts 2.81 kB {1} [built]
 [132] ./~/core-js/es7/reflect.js 510 bytes {2} [built]
 [133] ./~/rxjs/Rx.js 9.58 kB {0} [built]
 [134] ./~/zone.js/dist/zone.js 126 kB {2} [built]
 [303] ./~/rxjs/add/operator/windowToggle.js 241 bytes {0} [built]
 [304] ./~/rxjs/add/operator/windowWhen.js 229 bytes {0} [built]
 [443] ./src/main.aot.ts 262 bytes {1} [built]
 [444] ./src/polyfills.ts 273 bytes {2} [built]
 [445] ./src/vendor.ts 311 bytes {0} [built]
    + 431 hidden modules

ERROR in chunk app [initial]
webpack.prod.js
Conflict: Multiple assets emit to the same filename webpack.prod.js

ERROR in chunk polyfills [entry]
webpack.prod.js
Conflict: Multiple assets emit to the same filename webpack.prod.js
Child html-webpack-plugin for "index.html":
       [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 325 bytes {0}
[built]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! lesson-on-coding-angular-webpack@1.0.0 webpack-prod: `cross-env NODE_EN
V=production webpack "config/webpack.prod.js"`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the lesson-on-coding-angular-webpack@1.0.0 webpack-prod scrip
t.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Eric\AppData\Roaming\npm-cache\_logs\2017-11-02T01_16_17_3
95Z-debug.log

I do not know how to fix this problem with Conflict: Multiple assets emit to the same filename. Can anyone help?

Thanks.


#2

This was fixed with recent update to the provided files on github.