Question

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

我正在使用aurelia与Visual Studio 2017中的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

当编辑bootstrapper以允许资源时，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

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

1 个答案: