2

我正在尝试在 Angular 2 中创建 hello world。我正在使用这种架构： angular2-seed。

我做了以下事情。

使用然后安装 npm 包创建package.json文件。npm init这是我的 package.json 文件：

{    
  "name": "testwell",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^0.7.2",
    "typescript": "^1.7.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "es6-promise": "3.0.2",
    "es6-shim": "0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  }
}

然后我做了一个tsconfig.json文件：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules"
  ]
}

然后我创建了一个webpack.config.js文件，实际上我从这里复制了这个 angular2-seed 文件。

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        'app': './src/app.ts',
        'vendor': './src/vendor.ts'
    },
    output: {
        path: "./dist",
        filename: "bundle.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')
    ],
    resolve: {
        extensions: ['', '.ts', '.js']
    },

    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' },
        ],
        noParse: [ path.join(__dirname, 'node_modules', 'angular2', 'bundles') ]
    },

    devServer: {
        historyApiFallback: true
    }
};

然后我创建了一个app目录，并在其中创建了app.ts：

import {Component} from 'angular2/core';

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

在main.ts：

import {bootstrap} from 'angular2/platform/browser';

import {AppComponent} from './app';

bootstrap(AppComponent)
    .catch(err => console.error(err));

在vendor.ts：

import 'angular2/bundles/angular2-polyfills';

import 'angular2/platform/browser';
import 'angular2/core';
import 'angular2/http';
import 'angular2/router';

在index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <title>Angular2 Seed</title>
    <base href="/">
</head>
<body>
<my-app>loading...</my-app>
<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>
</body>
</html>

这是我的代码： https ://dl.dropbox.com/s/d1xiqdinbxle5eq/testwell.zip?dl=0

我收到此错误：

未找到vendor.bundle.js和bundle.js文件

这是目录的屏幕截图：

在此处输入图像描述

如何消除此错误

4

0 回答 0