使用 webpack 时，Aurelia 不会在没有 <require> 的情况下加载模板

Question

我在 aurelia 中动态加载模板，并且在使用 webpack 时，除非添加为 <require from="..."></require>，否则不会加载视图。使用 aurelia-cli 时，这不是必需的。为什么？这和webpack如何加载模块有关系吗？

我在 Visual Studio 2017 中使用 aurelia 和 asp.net 核心模板，由 dotnet new aurelia 根据 https://github.com/EisenbergEffect/aspnetcore-aurelia-build-2017 生成

<!-- this part was not required when using cli -->
<require from="../empty-report/empty-report"></require>

<compose id="printcontent" view-model="../${report.type}-report/${report.type}-report" model.bind="report"></compose>

我的 webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'app': 'aurelia-bootstrapper' },
        resolve: {
            extensions: ['.ts', '.js'],
            modules: ['ClientApp', 'node_modules'],
        },
        output: {
            path: path.resolve(bundleOutputDir),
            publicPath: '/dist/',
            filename: '[name].js'
        },
        module: {
            rules: [
                { test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
                { test: /\.html$/i, use: 'html-loader' },
                { test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            }),
            new AureliaPlugin({ aureliaApp: 'boot' })
        ].concat(isDevBuild ? [
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')  // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    }];
}

更新 #1

当编辑引导程序以允许资源时，webpack 构建，但加载站点我会得到一个错误

boot.ts

import 'isomorphic-fetch';
import { Aurelia, PLATFORM } from 'aurelia-framework';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build

export function configure(aurelia: Aurelia) {
    aurelia.use
        .standardConfiguration()
        .feature(PLATFORM.moduleName('resources'));// /index makes no difference

    //aurelia.use.plugin('aurelia-table');
    //aurelia.use.plugin('aurelia-chart');

    if (IS_DEV_BUILD) {
        aurelia.use.developmentLogging();
    }

    aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
}

错误：

aurelia-loader-webpack.js:187 Uncaught (in promise) Error: Unable to find module with ID: resources/index
    at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:187)
    at step (aurelia-loader-webpack.js:36)
    at Object.next (aurelia-loader-webpack.js:17)
    at aurelia-loader-webpack.js:11
    at Promise (<anonymous>)
    at 146.__awaiter (aurelia-loader-webpack.js:7)
    at WebpackLoader.146.WebpackLoader._import (aurelia-loader-webpack.js:152)
    at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:252)
    at step (aurelia-loader-webpack.js:36)
    at Object.next (aurelia-loader-webpack.js:17)

更新 #2：

我可以确认问题是缺少 .feature('resources') 或 .feature(PLATFORM.moduleName('resources'))，但即使添加 index.ts（此处建议：http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/6）我也无法以这种方式加载功能

我已按照 Aurelia 页面上的上述说明组织了我的应用程序，但我仍然收到相同的错误 Error: Unable to find module with ID: resources/index。我已将所有元素/组件放在资源文件夹中，并将 index.ts 添加到同一文件夹中。

Answer 1

您是否在使用新的 aurelia webpack 插件/设置？如果是，那么您应该加载像这样的功能aurelia.use.feature(PLATFORM.moduleName('my-feature/index');

路由上的moduleId 字段也是如此。

更多信息在这里https://github.com/jods4/aurelia-webpack-build/wiki/Debugging-missing-modules