Code-split article preview page that requires the markdown lib

app/core/core.js

@@ -6,7 +6,6 @@ import {CRegisterComponent} from "../pages/register.comp";
 import {RouterOutlet} from "../router/router-outlet";
 import {ComponentRegistry} from "./component-registry";
 import {ProfileComponent} from "../pages/profile.comp";
-import {ArticlePreviewComponent} from "../pages/article-preview.comp";
 import {CommentPreviewComponent} from "../components/comment-preview.comp";
 import {EditorComponent} from "../pages/editor.comp";
 import {SettingsComponent} from "../pages/settings.comp";
@@ -61,10 +60,6 @@ const components = [
         tagName: 'c-profile',
         component: ProfileComponent
     },
-    {
-        tagName: 'article-preview',
-        component: ArticlePreviewComponent
-    },
     {
         tagName: 'comment-preview',
         component: CommentPreviewComponent

app/pages/article-preview.comp.js

@@ -1,9 +1,7 @@
 import {Http} from "../http/http";
-"use strict";
 var markdown = require("markdown").markdown;
 
-
-export class ArticlePreviewComponent extends HTMLElement {
+class ArticlePreviewComponent extends HTMLElement {
     constructor(params) {
         super();
         this.slug = params.slug;
@@ -105,3 +103,6 @@ export class ArticlePreviewComponent extends HTMLElement {
 
 
 }
+
+window.customElements.define('article-preview', ArticlePreviewComponent);
+export default ArticlePreviewComponent;

app/router/router-handler.js

@@ -3,7 +3,6 @@ import {CLoginComponent} from "../pages/login.comp";
 import {AuthDefender} from "../auth/auth-defender";
 import {SettingsComponent} from "../pages/settings.comp";
 import {EditorComponent} from "../pages/editor.comp";
-import {ArticlePreviewComponent} from "../pages/article-preview.comp";
 import {ProfileComponent} from "../pages/profile.comp";
 import {CRegisterComponent} from "../pages/register.comp";
 import {HomeComponent} from "../pages/home.comp";
@@ -42,7 +41,6 @@ export class RouterHandler {
             {path: '/login', resolve: CLoginComponent},
             {path: '/register', resolve: CRegisterComponent},
             {path: '/profile/:username', resolve: ProfileComponent},
-            {path: '/article/:slug', resolve: ArticlePreviewComponent},
             {path: '/editor/:slug', resolve: EditorComponent, canActivate: AuthDefender.canActivate},
             {path: '/editor', resolve: EditorComponent, canActivate: AuthDefender.canActivate}
         ];
@@ -51,6 +49,14 @@ export class RouterHandler {
             RouterHandler.inject(new HomeComponent())
         }).resolve();
 
+        this.router.on(
+        '/article/:slug',
+        (params) => {
+            import('../pages/article-preview.comp.js').then((Component) =>
+                RouterHandler.inject(new Component.default(params))
+            );
+        }).resolve();
+
         routes.forEach(route => {
             this.router.on(
                 route.path,

webpack.config.js

@@ -1,4 +1,3 @@
-const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');