2

Angular2 (TypeScript を使用) で webpack をセットアップしようとしています。Youtube のビデオ チュートリアルによると、簡単に実行できるはずです。男はこの Github リポジトリを例として使用しています。そこで、最初にその github リポジトリのクローンを作成し、基本的にビデオ チュートリアルでその人物が行ったことをすべて実行しました。

しかし、ページをロードすると、「ロード中...」と表示されます。角度コンポーネントを実際にロードすることはありません。コンソールにもエラーはありません。Chrome の [ネットワーク] タブによると、bundle.jsファイルが正常に読み込まれているようです。

とバンドルしてwebpackも、エラーはまったく発生しません。

なぜこれがうまくいかないのか、私にはわかりません。これは私が持っているものです:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
  <my-app>Loading...</my-app>

  <script src="bundle.js"></script>
</body>
</html>

Typescript ファイルは、angular.io app.component.ts にあるものとまったく同じです。

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

そして私のwebpack構成ファイル：

module.exports = {
  entry: {
      app: "./src/boot",

      // load addintional libs (disabled for now)
      vendors: [
        //__dirname + "/node_modules/angular2/bundles/angular2-polyfills.js"
      ]
  },
  output: {
    path: __dirname, 
    filename: "./dist/bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

のような他のすべてtsconfig.jsは、github リポジトリから直接取得されます。

私のコンポーネントがロードされない理由は誰にも分かりますか?

アップデート

なんとかそれを機能させることができました。entry問題は、オブジェクトとして定義したことです。しかし、文字列として割り当てると機能します:

...
entry: './src/boot',
...

これでindex.html、コンポーネントをロードすると正常にロードされます。しかし、webpack でビルドをトリガーすると、コンソールにまだ多くのエラーが表示されます。

...
ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(283,5): error TS2300: Duplicate identifier 'MAX_SAFE_INTEGER'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(290,5): error TS2300: Duplicate identifier 'MIN_SAFE_INTEGER'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(346,5): error TS2300: Duplicate identifier 'flags'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(498,5): error TS2300: Duplicate identifier 'prototype'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(561,5): error TS2300: Duplicate identifier 'size'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(570,5): error TS2300: Duplicate identifier 'prototype'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(581,5): error TS2300: Duplicate identifier 'size'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(590,5): error TS2300: Duplicate identifier 'prototype'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(605,5): error TS2300: Duplicate identifier 'prototype'.

ERROR in C:\xampp\htdocs\repo\node_modules\angular2\bundles\typings\es6-shim\es6-shim.d.ts
(619,5): error TS2300: Duplicate identifier 'prototype'.
...
4

2 に答える 2

0

Angular2 クイックスタートによると、必要なすべてのライブラリを含める必要があります ( https://angular.io/guide/quickstart )

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
于 2016-01-18T09:46:58.803 に答える