My main component can not import another component/ it is not loaded

Help Requests
1

my-app.html

<template>

    <import from="./pages/msg/msg"></import>

    <msg></msg>

text

    <fast-design-system-provider use-defaults>

        <div>        sdfs</div>

        <msg></msg>

        <ul>

            <li><a active.class="home" load="route:; active.bind:home">Home</a></li>

            <li><a active.class="login" load="route:login; active.from-view:login">Login</a></li>

            <li><a active.class="note" load="route:note; active.from-view:note">Note</a></li>

            <li><a active.class="photo" load="route:photo; active.from-view:photo">Photo</a></li>

        </ul>

        <au-viewport default=""></au-viewport>

    </fast-design-system-provider>

</template>

my-app.js
import {route, customElement} from ‘aurelia’;

import template from './my-app.html';

import {Login} from './pages/login/login';

import {Note} from './pages/note/note';

import {Photo} from './pages/photo/photo';

import {Index} from './pages/index/index';

@route({

    routes: [

        {id: 'index', path: '', component: Index, title: 'Home'},

        {id: 'login', path: 'login', component: Login, title: 'Home'},

        {id: 'note', path: 'note', component: Note, title: 'Notes'},

        {id: 'photo', path: 'photo', component: Photo, title: 'Notes'},

    ]

})

@customElement({name: 'my-app', template})

export class MyApp {

    // static dependencies = [AuthService];

    message = 'Hello World!';

    login = true;

    constructor() {

        console.log('App created');

    }

    onClick() {

        console.log('clicked');

    }

}

component msg only has a text in itself.

1 Like
2

the problem was that in my-app.js were these 2 lines:

import {route, customElement} from ‘aurelia’;
@customElement({name: 'top-nav', template})

if i remove customElement from import and remove the

@customElement({name: ‘top-nav’, template})
string it starts working.

Why does it work this way?
Please inform me.

1 Like
3

I’m guessing without the line with @customElement(...), our convention kicks in and able to recognize the <import .../> in the template.

If it’s specified, then the convention bails. Though for webpack, it’s the loader that tries apply the convention to your TS/HTML files, I’m not sure why it didn’t work when you do

import template from './app.html';

Can you paste the webpack.config.js here? I think the problem may be there.

1 Like
4

Good day, bigopon!

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

const cssLoader = 'css-loader';


const postcssLoader = {
  loader: 'postcss-loader',
  options: {
postcssOptions: {
  plugins: ['autoprefixer']
}
  }
};

module.exports = function(env, { analyze }) {
  const production = env.production || process.env.NODE_ENV === 'production';
  return {
target: 'web',
mode: production ? 'production' : 'development',
devtool: production ? undefined : 'eval-cheap-source-map',
entry: {
  entry: [path.resolve(__dirname, 'src') + '/main.js', path.resolve(__dirname, 'src') + '/my-app.scss']
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: production ? '[name].[contenthash].bundle.js' : '[name].bundle.js'
},
resolve: {
  extensions: ['.js'],
  modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
devServer: {
  historyApiFallback: true,
  open: !process.env.CI,
  port: 9000
},
module: {
  rules: [
    { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
    { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
    { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
    { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
    { test: /\.css$/i, use: [ 'style-loader', cssLoader, postcssLoader ] },
    {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          postcssLoader,
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    { test: /\.js$/i, use: ['babel-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
    { test: /[/\\]src[/\\].+\.html$/i, use: '@aurelia/webpack-loader', exclude: /node_modules/ }
  ]
},
plugins: [
  new HtmlWebpackPlugin({ template: 'index.ejs' }),
  analyze && new BundleAnalyzerPlugin()
].filter(p => p)
  }
}

Thank you for helping me