[Question] I extended your 06-ASPNET sample with Aurelia Contacts Manager tutorial
HamedFathi opened this issue · 12 comments
Hi
This is just a question and my problem so I hope you can guide me.
As you know, this is one of the best samples to beginning journey
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial
I found a source for that
https://github.com/kristianmandrup/aurelia-contacts-manager-tutorial-app
I deleted content of your App folder and copied aurelia-contacts-manager-tutorial-app source folder.
I ran 'webpack' command and 'dotnet run'.
but I have an error.
Error: Unable to find module with ID:
Can you guide me ?
Please start here:
https://github.com/jods4/aurelia-webpack-build/wiki/Getting%20started
You need to make Webpack aware of Aurelia loading modules at runtime through aurelia-loader.
You'll need to modify the code to include a few PLATFORM.moduleName() calls in order to do that.
you are awesome thanks , should be like this
PLATFORM.moduleName('no-selection')
@HamedFathi Have you read the whole thing?
I can go into more details if there are unclear parts, but I don't want to repeat all information here.
Briefly, wherever there is a string in your code that represents a module that Aurelia will load at runtime, you need to wrap it with PLATFORM.moduleName().
So I expect that you have .plugin("aurelia-testing") somewhere?
Also ./resources/index is not a global resource but a feature. There was a .feature("resources") in your source code. As indicated here you should modify it to .feature(PLATFORM.moduleName("resources/index")).
Thank you so much
first I commented that and project ran perfectly but Yes I have a problem with "aurelia-testing" .
import { Aurelia, PLATFORM } from 'aurelia-framework';
import environment from './environment';
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.feature(PLATFORM.moduleName('resources/index'));
if (environment.debug) {
aurelia.use.developmentLogging();
}
if (environment.testing) {
aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
}
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("app")));
}
PLATFORM.moduleName('aurelia-testing') seems work but I have an error still
Error: Unable to find module with ID: aurelia-testing/compile-spy
That's because aurelia-testing doesn't properly document its own internal dependencies (yet).
Until it does you'll need to work-around it by adding
new ModuleDependencies({
"aurelia-testing": [ "./compile-spy", "./view-spy"]
})to your Webpack plugins.
More info here:
https://github.com/jods4/aurelia-webpack-build/wiki/Managing-dependencies#moduledependenciesplugin
Yes it works
const { AureliaPlugin, ModuleDependenciesPlugin } = require("aurelia-webpack-plugin");
new ModuleDependenciesPlugin( {"aurelia-testing": ["./compile-spy", "./view-spy"] });
Failed loading required CSS file: resources/elements/nprogress.css
As you explaind in here
https://github.com/jods4/aurelia-webpack-build/wiki/CSS-doesn't-load
for some css files works eg I dont have problem with bootstrap.css
but seems
@noView(['./nprogress.css'])
or even
@noView([PLATFORM.moduleName('./nprogress.css')])
has problem.
import { FrameworkConfiguration, PLATFORM } from 'aurelia-framework';
export function configure(config: FrameworkConfiguration) {
config.globalResources([PLATFORM.moduleName('./elements/loading-indicator')]);
}
//--------------------------------------------------------------------------------------------------
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.feature(PLATFORM.moduleName('resources/index'))
.globalResources([PLATFORM.moduleName('./resources/elements/nprogress.css')]);
//--------------------------------------------------------------------------------------------------
import * as nprogress from 'nprogress';
import { bindable, noView, PLATFORM } from 'aurelia-framework';
@noView(['./nprogress.css'])
export class LoadingIndicator {
@bindable loading = false;
loadingChanged(newValue){
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
}
//-------------------------------------------------------------------------------------------------
module: {
rules: [
{ test: /\.html$/i, loaders: "html-loader" },
{ test: /\.ts$/i, loaders: "ts-loader" },
{
test: /\.css$/i,
loader: ['style-loader', 'css-loader'],
issuer: /\.[tj]s$/i
},
{
test: /\.css$/i,
loader: 'css-loader',
issuer: /\.html?$/i
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
}
]
},
just as curiosity,
A. You say for all aurelia libraries we should use 'PLATFORM.moduleName()' Am I right ?
B. If someone uses 'PLATFORM.moduleName()' then change webpack to jspm Does he/she has problem or not ? means PLATFORM.moduleName() works with jspm or etc too or not.
anyway, thank you so much for your helps.
Passing a CSS file to noView makes it a local resource, just like when you pass it to <require>. So as explained in the wiki, Aurelia expects this to be just your CSS string, no style-loader.
The problem is that the loader rule you've copied from the wiki assumes that every dependency from an .html file is <require>, hence css-loader; and every dep. from a .ts file is import hence style-loader!css-loader.
Your dependency is from .ts but it's an Aurelia resource, so it has style-loader applied incorrectly.
It's easier if you stick to one import style exclusively in your code. If you load all your CSS with Aurelia you just never need to use style-loader.
A. yes, so that libraries work out-of-the-box in webpack builds, without any manual config like you had to do for aurelia-testing.
B. no problem, because moduleName is actually implemented in aurelia-pal, it simply returns its first argument. So it works like an identity function in builds other than Webpack.
You are rock ! thank you so much.
Hi
Sorry, I have problem with referencing assets again !!!
I use ASP.NET Core and I have 'wwwroot' folder
Error
C:\Users\...\Documents\AuWPTSMVCCore\node_modules\aurelia-webpack-plugin\dist\PreserveModuleNamePlugin.js:29
throw new Error(`Can't figure out a normalized module name for ${module.rawRequest}, please call PLATFORM.moduleName() somewhere to help.`);
^
Error: Can't figure out a normalized module name for ../wwwroot/css/site.css, please call PLATFORM.moduleName() somewhere to help.
at Compilation.compilation.plugin.modules (C:\Users\...\Documents\AuWPTSMVCCore\node_modules\aurelia-webpack-plugin\dist\PreserveModuleNamePlugin.js:29:31)
I referenced css,js assets in two ways
- from npm_modules
- from wwwroot folder
when I move assests to 'ClientApp' aurelia main folder everythig is ok but outside of it I have problem.
Can you guide me ?
you should not use wwwroot, it's the folder from where dotnet is serving files. So if the browser wants to get access to something must use a path after wwwroot/. files or folders at same level are not served.
webapck will resolve the clientApp and node_module names and pack them, so you can refer a relative path to wwwroot or module name in node_modules.
If you want to keep css files outside the clientApp, inside wwwroot and use to load your
code, webpack must know about that by adding wwwroot to your resolve: { modules: [] } list. (don't look a good thing)
The easy way is move your css code to clientApp, and let webapck resolve that, or instead of require use a <link rel="stylesheet" type="text/css" href="site.css"> tag
I briefly touch on this error here:
https://github.com/jods4/aurelia-webpack-build/wiki/Debugging-missing-modules#using-webpack-alias-config
TL;DR: because of how module names are used by aurelia-loader, you can't refer to a module that is outside of your Webpack resolve.modules config, which you do by climbing out of ClientApp with ...
For the sake of explanation -- but read below -- you could fix this by either adding wwwroot to resolve.modules and then import css/site.css, or setting up aliases as explained in the wiki link.
But it makes no sense to <require> from wwwroot. This folder is used by ASP.NET Core to serve static file at runtime. <require> will load the module with aurelia-loader, in your case aurelia-loader-webpack; and the Webpack loader never loads files from the web server, it bundles all your resources together.
So CSS that you load with <require> should rather be in your ClientApp folder and they will end up in your application bundle.
you can also use https://gitter.im/aurelia/Discuss to kind of questions