【问题标题】：webpack with Angular2 typescript带有 Angular2 打字稿的 webpack
【发布时间】：2016-04-23 00:54:07
【问题描述】：

我正在尝试使用 Angular2（使用 TypeScript）设置 webpack。根据video tutorial on Youtube，这应该是轻而易举的事。这家伙以this Github repo 为例。因此，我首先克隆了那个 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'.
...

【问题讨论】：

您缺少angular2-polyfills.js 文件。
@EricMartinez 似乎没有任何区别。继续遇到同样的问题。
嗯……很难说。我看到的唯一奇怪的事情是你的输出指向dist/bundle.js，而在你的html中你使用的是src="bundle.js"。你能做一个回购吗？
@EricMartinez 我已经设法让它工作了。我唯一不同的是 webpack 配置中的 entry 部分。我将其定义为一个对象，而不是教程中的字符串。但是，即使它有效，webpack 确实会吐出大量错误。我用我现在拥有的东西做了一个回购。也许你仍然可以看看你是否知道如何修复错误？ goo.gl/f5UTPH
试试这个repo，它是最新的Angular2 beta并使用webpack。

标签： webpack angular ts-loader

【解决方案1】：

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

【讨论】：

使用 webpack，您不必再包含所有这些库（除了 polyfill）。这就是 webpack 背后的想法。它会为您找到所有参考资料。

【解决方案2】：

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

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

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

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

【讨论】：