xenoterracide xenoterracide - 3 months ago 117
TypeScript Question

Aurelia, navigate is not updating viewport

This worked, and then I migrated to webpack, and now it doesn't. It's worth noting the content shows up if I refresh the route in the browser.

This is my

app.html
when I change from one view to another
nav
is supposed to update

<template>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">RPF</a>
</div>
<router-view name="authn"></router-view>
</div>
</nav>
</header>
<div class="row container">
<nav class="col-xs-3 col-md-2">
<router-view name="nav"></router-view>
</nav>

<main id="content" class="container-fluid">
<router-view name="content"></router-view>
</main>
</div>
</template>


and
app.ts


import { Router, RouterConfiguration } from "aurelia-router";

export class App {
private router: Router;

configureRouter( config: RouterConfiguration, router: Router ): void {
config.title = 'RPF';
config.map( [
{
route: [ '', 'home' ],
name: 'home',
nav: false,
viewPorts: {
content: { moduleId: 'main/home' },
authn: { moduleId: 'authn/login' },
}
},
{
route: 'manage-content',
name: 'home',
title: 'Manage Content',
nav: true,
viewPorts: {
content: { moduleId: 'main/home' },
authn: { moduleId: 'authn/logout' },
nav: { moduleId: 'main/nav' }
}
},
] );

this.router = router;
}
}


and
main/nav.html


<template bindable="router">
<ul class="nav nav-pills nav-stacked">
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in"
href.bind="row.href">${row.title}</a>
</ul>
</template>


nav.ts


export class Nav {
}


index.html


<!DOCTYPE html>
<html>
<head>
<title><%- webpackConfig.metadata.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="<%- webpackConfig.metadata.baseUrl %>">
<!-- imported CSS are concatenated and added automatically -->
</head>
<body aurelia-app="main">
<div class="splash">
<div class="message"><%- webpackConfig.metadata.title %></div>
<i class="fa fa-spinner fa-spin"></i>
</div>
<% if (webpackConfig.metadata.ENV === 'development') { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
</body>
</html>


I haven't changed configurations from the skeleton

webpack.config.js


"use strict";

/**
* To learn more about how to use Easy Webpack
* Take a look at the README here: https://github.com/easy-webpack/core
**/
const easyWebpack = require('@easy-webpack/core');
const generateConfig = easyWebpack.default;
const get = easyWebpack.get;
const path = require('path');
const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || 'development';
let config;

// basic configuration:
const title = 'RPF';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');

const coreBundles = {
bootstrap: [
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal',
'aurelia-pal-browser',
'regenerator-runtime',
'bluebird'
],
// these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
aurelia: [
'aurelia-bootstrapper-webpack',
'aurelia-binding',
'aurelia-dependency-injection',
'aurelia-event-aggregator',
'aurelia-framework',
'aurelia-history',
'aurelia-history-browser',
'aurelia-loader',
'aurelia-loader-webpack',
'aurelia-logging',
'aurelia-logging-console',
'aurelia-metadata',
'aurelia-pal',
'aurelia-pal-browser',
'aurelia-path',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-task-queue',
'aurelia-templating',
'aurelia-templating-binding',
'aurelia-templating-router',
'aurelia-templating-resources'
]
}

const baseConfig = {
entry: {
'app': [/* this is filled by the aurelia-webpack-plugin */],
'aurelia-bootstrap': coreBundles.bootstrap,
'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
},
output: {
path: outDir,
}
}

// advanced configuration:
switch (ENV) {
case 'production':
config = generateConfig(
baseConfig,

require('@easy-webpack/config-env-production')
({compress: true}),

require('@easy-webpack/config-aurelia')
({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}),

require('@easy-webpack/config-typescript')(),
require('@easy-webpack/config-html')(),

require('@easy-webpack/config-css')
({ filename: 'styles.css', allChunks: true, sourceMap: false }),

require('@easy-webpack/config-fonts-and-images')(),
require('@easy-webpack/config-global-bluebird')(),
require('@easy-webpack/config-global-jquery')(),
require('@easy-webpack/config-global-regenerator')(),
require('@easy-webpack/config-generate-index-html')
({minify: true}),

require('@easy-webpack/config-common-chunks-simple')
({appChunkName: 'app', firstChunk: 'aurelia-bootstrap'}),

require('@easy-webpack/config-copy-files')
({patterns: [{ from: 'favicon.ico', to: 'favicon.ico' }]}),

require('@easy-webpack/config-uglify')
({debug: false})
);
break;

case 'test':
config = generateConfig(
baseConfig,

require('@easy-webpack/config-env-development')
({devtool: 'inline-source-map'}),

require('@easy-webpack/config-aurelia')
({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}),

require('@easy-webpack/config-typescript')
({ options: { doTypeCheck: true, compilerOptions: { sourceMap: true, inlineSourceMap: false } }}),

require('@easy-webpack/config-html')(),

require('@easy-webpack/config-css')
({ filename: 'styles.css', allChunks: true, sourceMap: false }),

require('@easy-webpack/config-fonts-and-images')(),
require('@easy-webpack/config-global-bluebird')(),
require('@easy-webpack/config-global-jquery')(),
require('@easy-webpack/config-global-regenerator')(),
require('@easy-webpack/config-generate-index-html')(),

require('@easy-webpack/config-test-coverage-istanbul')()
);
break;

default:
case 'development':
process.env.NODE_ENV = 'development';
config = generateConfig(
baseConfig,

require('@easy-webpack/config-env-development')(),

require('@easy-webpack/config-aurelia')
({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}),

require('@easy-webpack/config-typescript')(),
require('@easy-webpack/config-html')(),

require('@easy-webpack/config-css')
({ filename: 'styles.css', allChunks: true, sourceMap: false }),

require('@easy-webpack/config-fonts-and-images')(),
require('@easy-webpack/config-global-bluebird')(),
require('@easy-webpack/config-global-jquery')(),
require('@easy-webpack/config-global-regenerator')(),
require('@easy-webpack/config-generate-index-html')
({minify: false}),

require('@easy-webpack/config-copy-files')
({patterns: [{ from: 'favicon.ico', to: 'favicon.ico' }]}),

require('@easy-webpack/config-common-chunks-simple')
({appChunkName: 'app', firstChunk: 'aurelia-bootstrap'})
);
break;
}

module.exports = config;


I don't see how any of these are actually broken, there may be another file involved that's causing the problem but nothing that I see.

update. I've determined that aurelia isn't even trying to load the nav view/model on load.
canActivate
is never called, and this is what's being logged in console

DEBUG [function Login(am, router) {
_classCallCheck(this, Login);

this.am = am;
this.router = router;
this.log = _aureliaFramework.LogManager.getLogger(Login_1);
}] navigating to manage-content
aurelia-logging-console.js:24 DEBUG [templating] importing resources for authn/logout.html


you'll note the distinctive lack of a log for 'main/nav.html', but if I go directly to the page.

DEBUG [templating] importing resources for app.html []
aurelia-logging-console.js:24DEBUG [function Nav() {
_classCallCheck(this, Nav);

this.log = _aureliaFramework.LogManager.getLogger(Nav_1);
}] can activate
aurelia-logging-console.js:24DEBUG [templating] importing resources for main/home.html []
aurelia-logging-console.js:24DEBUG [templating] importing resources for authn/logout.html []
aurelia-logging-console.js:24DEBUG [templating] importing resources for nav/nav.html []

Answer

So I don't understand why this behavior is different from aurelia-cli to webpack, but the solution was this, which is basically the router in webpack has to populate all of the keys the view specifies. So I made a template that's empty,

nullvm.html

<template></template>

nullvm.ts

export class NullVM {}

and then added it to the missing part of the route.

export class App {
private router: Router;

configureRouter( config: RouterConfiguration, router: Router ): void {
    config.title = 'RPF';
    config.map( [
        {
            route: [ '', 'home' ],
            name: 'home',
            nav: false,
            viewPorts: {
                content: { moduleId: 'main/home' },
                authn: { moduleId: 'authn/login' },
                nav: { moduleId: 'main/nullvm' }
            }
        },
        {
            route: 'manage-content',
            name: 'home',
            title: 'Manage Content',
            nav: true,
            viewPorts: {
                content: { moduleId: 'main/home' },
                authn: { moduleId: 'authn/logout' },
                nav: { moduleId: 'main/nav' }
            }
        },
    ] );

    this.router = router;
}
}
Comments