Мы находимся в процессе обновления веб-пакета для использования версии 4 (в настоящее время используется 3.8.1), но мы застряли с этой ошибкой:
Unable to find module with ID: my-app
Это начальная загрузкаfile:
bootstrap(async (aurelia: Aurelia) => {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
config.useDefaults();
config.settings.startingZIndex = 2000;
})
.plugin(PLATFORM.moduleName('aurelia-validation'), config => {
config.customValidator(AjvValidator);
});
if (debugMode) {
aurelia.use.developmentLogging();
}
await aurelia.start();
await aurelia.setRoot(PLATFORM.moduleName('my-app'), document.getElementById('root'));
});
Структура каталогов:
src -|
|- ...directories (views, repositories, etc)
|- bootstrap.ts
|- my-app.html
|- my-app.ts
Если я попытаюсь сделать каталог my-app (с файлами index.ts и index.html), ошибка изменится набит:
Unable to find module with ID: my-app.html
Я пытался использовать getViewStrategy для указания на index.html, но это не сработало.
Если в коде начальной загрузки я изменяюна PLATFORM.moduleName('my-app/index'), тогда ошибка становится:
Unable to find module with ID: my-app/index
Какая будет правильная настройка в этом случае?
Дополнительная информация:
- мы используем aurelia-webpack-plugin@3.0.0 (последняя версия в NPM)
- это команда запуска:
webpack-dev-server --config webpack.dev.config.js, ошибка также возникает в команде сборки
это базовая конфигурация веб-пакета:
module.exports = (options) => ({
context: path.resolve(__dirname, 'src'),
mode: options.mode,
entry: [
'regenerator-runtime/runtime',
'reflect-metadata',
'babel-polyfill',
'event-source-polyfill',
`./scss/main-${options.product}.scss`,
`./bootstrap-${options.product}.ts`
],
output: Object.assign({
sourceMapFilename: '[file].map'
}, options.output),
module: {
rules: [
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'source-map-loader'
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => {
return [
require('autoprefixer')({
browsers: ['> 5%', 'last 2 versions']
})
];
}
}
},
'sass-loader'
]
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'ts-loader']
},
{
test: /\.html$/,
use: options.product === PRODUCTS.styleguide.name ? ['raw-loader', 'highlightjs-loader'] : ['raw-loader']
},
{
test: /\.(svg|png|ico)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
hash: 'sha512',
digest: 'hex',
name: options.imageNamePattern
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
optipng: {
optimizationLevel: 7
},
gifsicle: {
interlaced: false
},
mozjpeg: {
bypassOnDebug: true
}
}
}
]
},
{
test: /\.(woff|woff2)$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: options.plugins.concat([
new AureliaPlugin({aureliaApp: undefined}/* {aureliaApp: undefined, includeAll: 'src'} */),
// To strip all locales except “en”
new MomentLocalesPlugin(),
new webpack.IgnorePlugin(/regenerator|nodent|js-beautify/, /ajv/),
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch'
}),
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]),
resolve: {
alias: {
ajv: path.join(__dirname, 'node_modules', 'ajv', 'dist', 'ajv.bundle.js'),
pikaday: path.join(__dirname, 'node_modules', 'pikaday', 'pikaday.js'),
'moment-timezone': path.join(
__dirname,
'node_modules',
'moment-timezone',
'builds',
'moment-timezone-with-data.js'
),
'raven-js': path.join(
__dirname,
'node_modules',
'raven-js',
'dist',
'raven.js'
)
},
extensions: ['.ts', '.js', '.scss', '.html'],
modules: [srcDir, 'node_modules']
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
optimization: {
namedModules: true,
splitChunks: {
name: 'vendor',
minChunks: 2
}
}
})