Errors while using Webpack

Question

I am trying to learn webpack by following this tutorial.

I am getting 70 errors as below when I run pm start.

$ npm start

> angular2-webpack@1.0.0 start /Users/angular-webpak

[at-loader] Using typescript@2.0.10 from typescript and "tsconfig.json" from /Users/angular-webpak/src/tsconfig.json.

[at-loader] Checking finished with 70 errors
...

ERROR in [at-loader] node_modules/@types/jasmine/index.d.ts:39:52 
    TS1005: '=' expected.
ERROR in [at-loader] node_modules/@angular/common/src/directives/ng_class.d.ts:48:34 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/common/src/pipes/async_pipe.d.ts:44:38 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/aot/compiler.d.ts:32:38 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/aot/compiler.d.ts:44:32 
    TS2304: Cannot find name 'Map'.
ERROR in [at-loader] node_modules/@angular/compiler/src/aot/compiler_host.d.ts:20:33 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/compile_metadata.d.ts:342:20 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/compiler/src/compile_metadata.d.ts:344:28 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/compiler/src/compile_metadata.d.ts:346:15 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/compiler/src/compile_metadata.d.ts:348:23 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/compiler/src/compile_metadata.d.ts:350:17 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/compiler/src/compile_metadata.d.ts:352:25 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/compiler/src/directive_normalizer.d.ts:38:72 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/directive_normalizer.d.ts:40:74 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/i18n/extractor.d.ts:14:33 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/i18n/extractor.d.ts:22:35 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/jit/compiler.d.ts:44:49 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/jit/compiler.d.ts:46:65 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/metadata_resolver.d.ts:58:104 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/output/output_ast.d.ts:433:63 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/compiler/src/resource_loader.d.ts:13:23 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/util.d.ts:33:18 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/compiler/src/util.d.ts:34:46 
    TS2304: Cannot find name 'Promise'.
<snipped several similar errors>
ERROR in [at-loader] node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts:24:15 
    TS2304: Cannot find name 'Map'.
ERROR in [at-loader] node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts:28:16 
    TS2304: Cannot find name 'Map'.
<snipped several similar errors>
ERROR in [at-loader] node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts:11:30 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts:22:30 
    TS2304: Cannot find name 'Set'.
ERROR in [at-loader] node_modules/@angular/router/src/config.d.ts:307:85 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/router/src/interfaces.d.ts:78:99 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/router/src/interfaces.d.ts:157:109 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/router/src/interfaces.d.ts:227:115 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/router/src/interfaces.d.ts:297:89 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/router/src/interfaces.d.ts:367:50 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/router/src/router.d.ts:392:70 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/router/src/router.d.ts:414:59 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@angular/router/src/utils/collection.d.ts:36:79 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/@types/jasmine/index.d.ts:39:38 
    TS2371: A parameter initializer is only allowed in a function or constructor implementation.
ERROR in [at-loader] node_modules/@types/jasmine/index.d.ts:39:46 
    TS2304: Cannot find name 'keyof'.
ERROR in [at-loader] node_modules/rxjs/Observable.d.ts:68:60 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/rxjs/Observable.d.ts:68:70 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/rxjs/observable/PromiseObservable.d.ts:40:31 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/rxjs/observable/PromiseObservable.d.ts:41:26 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/rxjs/operator/toPromise.d.ts:2:60 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/rxjs/operator/toPromise.d.ts:3:79 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] node_modules/rxjs/operator/toPromise.d.ts:3:89 
    TS2304: Cannot find name 'Promise'.
ERROR in [at-loader] src/app/app.component.ts:8:14 
    TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
ERROR in [at-loader] src/app/app.module.ts:13:14 
    TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 299 bytes [entry] [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.95 kB [entry] [rendered]
webpack: Failed to compile.

`rm -rf nodes_modules` then `npm install` then `npm start` – Shota Feb 13 '17 at 21:23 — Shota, Feb 13 '17 at 21:23

score 8 · Accepted Answer · answered Feb 16 '17 at 04:35

8

The fix is here https://github.com/angular/angular.io/pull/3233/commits/8e886fc2710acadd749139c2172519de254b849c

You must modifiy webpack.common.js

answered Feb 16 '17 at 04:35

NetRevolutions

96
1

Yes, the issue is with the location of tsconfig.json and webpack.common.js configuration as Irfan Syed and Lamer mentioned. This is correct as the standard location for tsconfig.json is the root directory. Modified web pack.common.js as per the link. It worked fine! Thank you. – user2995358 Feb 16 '17 at 21:15
I had to reverse that pull request for mine to work. Typescript did not use/find the tsconfig. After adding the configFileName option as described in the Typescript docs did it work. – gwest7 Feb 21 '17 at 05:02

score 2 · Answer 2 · edited May 23 '17 at 12:18

2

Since you're using Angular 2, the only possible solution in your case at th moment is to freeze @types/jasmine version to 2.5.41.

See: https://stackoverflow.com/a/42182400/3472184
Also, it looks like you have no ES6 support in tsconfig.json.

See: https://stackoverflow.com/a/38212418/3472184 . Pay attention to lib and target properties.

edited May 23 '17 at 12:18

Community

1
1

answered Feb 14 '17 at 14:31

noomorph

837
1
6
14

With above 68 errors are gone! But, still I am getting: TS1219: Set the 'experimen talDecorators' option to remove this warning. My tsconfig.json is as follows: ` { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es5", "es2015.promise"], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules" ] } ` – user2995358 Feb 14 '17 at 19:34

score 1 · Answer 3 · edited Feb 19 '17 at 11:57

Move the tsconfig.json to ./src folder. Please see config/webpack.common.js line 7:
```
options: {
  configFileName: helpers.root('src', 'tsconfig.json')
}
```

change tsconfig.json to:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types" : ["node"]
  }
}

score 0 · Answer 4 · answered Feb 16 '17 at 12:42

0

@user2995358 for your TS1219: Set the 'experimen talDecorators' option to remove this warning.

move the tsconfig.json to src folder from root

answered Feb 16 '17 at 12:42

Irfan Syed

113
2
10

Errors while using Webpack

4 Answers4