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 ファイルを this からコピーしたファイルを作成しました。

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