Angular component not executing with Webpack

Question

Short Version: I'm building an app with Angular2 and Webpack. I have the bundles building successfully, but when I include them on my page, the angular components loading. No errors are showing up.

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
}

The files are being generated correctly:

https://i.sstatic.net/ucuJq.jpg

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"]</title>
  <base href="/" />


</head>
<body style="background-color: #333;">

  @RenderBody()


  <script type="text/javascript" src="/scripts/polyfills.js"></script>
  <script type="text/javascript" src="/scripts/vendor.js"></script>

  @RenderSection("scripts", required: false)
</body>
</html>

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>
}

The component I'm expecting to see looks like this:

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


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

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

But when I generate the page, it looks like this:

https://i.sstatic.net/1eXcZ.jpg

with no errors in the console: https://i.sstatic.net/0K1eM.jpg

Any help is greatly appreciated

@yurzui well that's what I get for trying to zombify another project. Thanks for the help, make it an answer and I'll accept. — mrK
– mrK, Commented Apr 18, 2017 at 20:17

yurzui · Accepted Answer · 2017-04-18 20:21:13Z

2

Seems you forgot about bootstrapping your application via

platformBrowserDynamic().bootstrapModule(AppModule);

answered Apr 18, 2017 at 20:21

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular component not executing with Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related