更新

Question

我尝试使用Angular2设置webpack（使用TypeScript）。根据{{3}}，这应该是轻而易举的事。这家伙以video tutorial on Youtube为例。所以我克隆了github repo开始，基本上完成了那个人在视频教程中所做的一切。

但是当我加载我的页面时，它所说的只是＆＃34;正在加载...＆＃34;。它永远不会真正加载角度分量。控制台中也没有错误。根据＆＃34;网络＆＃34; 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 repo。

任何人都知道为什么我的组件没有加载？

更新

设法让它运作起来。问题是我将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'.
...

Answer 1

重复错误是因为打字机在其浏览器和主目录中有重复的定义文件。如果你看看typings.d.ts，你会看到两者都包含在那里。它们包含在如下所示的行中：

/// <reference path="../typings/browser.d.ts" />
/// <reference path="../typings/main.d.ts" />

如果从该文件中删除main.d.ts行并再次运行webpack，错误就会消失。

我仍然不知道这两个是什么，但我的项目在浏览器中运行，所以我删除了main.d.ts行。我假设每个人都必须删除一个，但我可能在那里错了。（如果有人想管道）。 -Jeff

Answer 2

根据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>

带有Angular2打字稿{web}的webpack

更新

2 个答案: