bigless27 / angular-webpack-starter Goto Github PK

Use this template below for bugs.

In trying to follow along with the video tutorial and provided files for download, users will run into numerous problems. 2 of the 3 problems mentioned here have remedies as provided. With limited understanding of Angular environment setup, the 3rd problem becomes a 'halt'.

Expected Behavior

One can expect to copy command-line examples as provided by instructor with successful output, mirroring the instructors video.

Current Behavior

First issue:
TS2304: Cannot find name ‘require’ ERROR in [at-loader] in ./src/app/app.component.ts and ./src/polyfills.ts

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

Third issue:
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

Possible Solution

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

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

Issue three:
Beyond the scope of a user trying to learn from a video tutorial.

Steps to Reproduce

1. Setup in a Windows environment
2. Begin learning Angular from the 'Heroes' tutorial found at https://angular.io/tutorial
3. Have relatively recent versions of dependencies
4. This is all that I know about Angular at the moment.

Context (Environment)

I am trying to understand the Uglify section of the tutorial which bundles the .js files to compare size in production section of tutorial.

Angular beginner issues.

Detailed Description

It also may be helpful to explain what helper.js file is and what the .gitignore file is for

Possible Implementation

Comments under the video, or a video overlay with current instructions/fixes would be helpful

First of all thank you for the tutorial on Youtube. I found it really helpful.

npm run build-aot-prod give Error File: /Angular-webpack-starter-master/**.spec.ts' not found.

Expected Behavior

build successfully using aot

Current Behavior

npm run build-aot-prod give

Error File: /Angular-webpack-starter-master/**.spec.ts' not found.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:aot: `ngc -p tsconfig-aot.json`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:aot script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kaushalya/.npm/_logs/2018-02-03T05_23_24_168Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-aot-prod: `npm run build:aot && npm run webpack-prod`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build-aot-prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kaushalya/.npm/_logs/2018-02-03T05_23_24_245Z-debug.log

Possible Solution

Works when
in tsconfig-aot.js change
"files": ["src/app/app.module.ts", "src/main.aot.ts", "**.spec.ts"],
to
"files": ["src/app/app.module.ts", "src/main.aot.ts"]
But since I think **.spec.ts is for testing removing it is not an solution.

Steps to Reproduce

1. clone the repository
2. npm install
3. npm run build-aot-prod

Context (Environment)

Linux Mint 18.3

Please Help