CODEWITHSUNDEEP
javascriptangulartypescriptwebpack
Welsh Watson
Welsh Watson

Reputation: 31

Routing not working for bundled (webpack) Angular 2 project

I have a simple angular application with 2 components (AppComponent and tester) which are webpacked into a single app.bundle.js file. My problem is that once the app is bundled the routing no longer works. I have tried a few different methods seen online to get this working with no luck, can anyone help? I have seen mention of bundling and routing via modules, but I would rather keep the entire angular project as a single file if possible

<!DOCTYPE html>
<html>
  <head>
    <title>Routing webpack test</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="slate.css">
  </head>
  <my-app>Loading...</my-app>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script>
  </body>
</html>

app.component.ts

import { Component, Input, Output } from '@angular/core';
import { Route } from "@angular/router";
@Component({
  selector: 'my-app',
  template: `<h1>Hello world</h1>`
})
export class AppComponent  {}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app/app.component'
import { tester } from './app/test.component';

const appRoutes: Routes = [
  {
    path: '',
    component: AppComponent
  },
  {
    path: 'test',
    component: tester
  },
  {
    path: 'myapp',
    component: AppComponent
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes,{ enableTracing: true }), 
    BrowserModule, FormsModule],
  exports: [RouterModule],
  declarations: [AppComponent, tester ],
  bootstrap: [AppComponent]
})
export class AppModule { }

webpack.config.js:

var webpack = require('webpack');
var HtmlWebpack = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');

module.exports = {

  entry: [
    __dirname + '/src/main.ts'
  ],
  output: {
    path: __dirname + '/src/dist',
    filename: 'app.bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['ts-loader', 'angular2-template-loader', 'angular2-router-    loader']
      },

    ]
  },
  resolve: {
    extensions: ['.js', '.ts']
  },
  plugins: [
    new HtmlWebpack({
      template: './src/index.html'
    }),
    new CopyWebpackPlugin([
      { from: './src/slate.css' }
    ]),
    new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('')
    }
  }),
  new webpack.optimize.AggressiveMergingPlugin(),
  new CompressionPlugin({
     asset: "[path].gz[query]",
     algorithm: "gzip",
     test: /\.js$|\.css$|\.html$/,
     threshold: 10240,
     minRatio: 0.8
   }),
  new webpack.ContextReplacementPlugin(
    /angular(\\|\/)core(\\|\/)@angular/,
    './src',
    {}
  ),
  ],
};

Upvotes: 1

Views: 597

Answers (1)

Jay
Jay

Reputation: 406

The template needs a placeholder( routeroutlet) for router components to be loaded. I think you are missing

<router-outlet> </router-outlet>

Upvotes: 1

Related Questions