Lỗi khi sử dụng Webpack

Question

Tôi đang cố gắng tìm hiểu webpack bằng cách theo dõi this tutorial.

Tôi nhận được 70 lỗi như dưới đây khi tôi chạy bắt đầu.

$ 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. 

Answer 1

Việc sửa chữa là ở đây https://github.com/angular/angular.io/pull/3233/commits/8e886fc2710acadd749139c2172519de254b849c

Bạn phải modifiy webpack.common.js

Answer 2

1. Vì bạn đang sử dụng góc 2, giải pháp khả thi duy nhất trong trường hợp của bạn vào lúc này thứ là đóng băng phiên bản @types/jasmine để 2.5.41.

   Xem: https://stackoverflow.com/a/42182400/3472184

2. Ngoài ra, có vẻ như bạn không có hỗ trợ ES6 trong tsconfig.json.

   Xem: https://stackoverflow.com/a/38212418/3472184. Hãy chú ý đến các thuộc tính lib và target.

Answer 3

1. Di chuyển tsconfig.json để ./src folder. Xin vui lòng xem config/webpack.common.js dòng 7:

   options: { 
       configFileName: helpers.root('src', 'tsconfig.json') 
   } 
   

2. thay đổi tsconfig.json tới:

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

Answer 4

@ user2995358 cho TS1219 của bạn: Đặt opti 'thí nghiệm talDecorators' opti để xóa cảnh báo này.

di chuyển tsconfig.json vào thư mục src từ gốc