Winkelkomponente nicht mit Webpack ausgeführt

Question

Kurzversion: Ich baue eine App mit Angular2 und Webpack. Ich habe die Bündel erfolgreich aufgebaut, aber wenn ich sie auf meiner Seite einfüge, werden die eckigen Komponenten geladen. Es werden keine Fehler angezeigt.

webpack.config.js

"use strict"; 


let webpack = require('webpack'); 
let ExtractTextPlugin = require('extract-text-webpack-plugin'); 
let helpers = require('./webpack.helpers.js'); 
let HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: { 
    'app': helpers.root('/Modules/Shared/Main.ts'), 
    'vendor': helpers.root('/External/Vendor.ts'), 
    'polyfills': helpers.root('/External/Polyfill.ts') 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'] 
    }, 

    output: { 
    path: helpers.root('/wwwroot/scripts'), 
    filename: '[name].js' 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.ts$/, 
     loaders: [ 
      { loader: 'awesome-typescript-loader', options: { tsConfig: 'tsconfig.json' } }, 
      'angular-router-loader', 
      'angular2-template-loader', 
      'source-map-loader', 
      'tslint-loader' 
     ] 
     }, 
     { 
     test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/, 
     loader: 'file-loader?name=assets/[name]-[hash:6].[ext]' 
     }, 
     { 
     test: /favicon.ico$/, 
     loader: 'file-loader?name=/[name].[ext]' 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract({ 
      fallbackLoader: "style-loader", 
      loader: "css-loader" 
     }) 
     }, 
     { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: 'raw-loader' 
     } 
    ] 
    }, 

    plugins: [ 
    new ExtractTextPlugin('css/[name].bundle.css'), 
    new webpack.NoEmitOnErrorsPlugin(), 

    // Workaround for angular/angular#11580 
    new webpack.ContextReplacementPlugin(
     // The (\\|\/) piece accounts for path separators in *nix and Windows 
     /angular(\\|\/)core(\\|\/)@angular/, 
     'Modules/', // location of your src 
     {} // a map of your routes 
    ), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
    }), 
    new webpack.ProvidePlugin({ 
     jQuery: 'jquery', 
     $: 'jquery', 
     jquery: 'jquery', 

    }), 

    new HtmlWebpackPlugin() 
    ] 
}; 

tsconfig.json

{ 
    "compilerOptions": { 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "noEmitOnError": true, 
    "noImplicitAny": true, 
    "removeComments": true, 
    "skipLibCheck": true, 
    "sourceMap": true, 
    "target": "es5" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ], 
    "compileOnSave": true 
} 

Die Dateien korrekt generiert werden:

http://imgur.com/a/xzw0E

_Layout.cshtml

index.cshtml

@using System.Threading.Tasks 

@{ 
    ViewData["Title"] = "Home Page"; 
} 



<div style="height: 100%;"> 

    <app-component>Loading...</app-component> 

</div> 




@section Scripts{ 

    <script type="text/javascript" src="/scripts/app.js"></script> 
} 

Die Komponente Ich erwarte sieht wie folgt zu sehen:

import { Component } from '@angular/core'; 


@Component({ 
    selector: 'app-component' 
}) 
export class AppComponent { 

    constructor() { 
    console.log('I\'m running !!!!'); 
    } 
} 

Aber wenn ich die Seite zu erzeugen, sieht es wie folgt aus:

http://imgur.com/a/YrPJf

ohne Fehler in der Konsole: http://imgur.com/a/Xepl2

Jede Hilfe ist sehr geschätzt

Answer 1

scheint vergessen Sie über Ihre Anwendung Bootstrapping über

platformBrowserDynamic().bootstrapModule(AppModule);