2

我正在尝试使用 Angular2 设置 webpack（使用 TypeScript）。根据Youtube 上的视频教程，这应该是轻而易举的事。这家伙以这个 Github repo为例。因此，我首先克隆了那个 github 存储库，并且基本上完成了这个人在视频教程中所做的一切。

但是当我加载我的页面时，它只会显示“正在加载...”。它从来没有真正加载角度分量。控制台中也没有错误。根据 Chrome 中的“网络”选项卡，它似乎可以bundle.js正常加载我的文件。

捆绑webpack也完全没有错误。

我不知道为什么这对我不起作用。这就是我所拥有的：

索引.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 { }

引导.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'.
...
4

2 回答 2

1

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

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

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

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

于 2016-06-03T14:20:31.453 回答
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 回答