Downloading the second component calls "The template specified for the SidebarComponent is not a string"

Question

I just started to study angular and tried to create a simple toolbar.

I created 2 components, DashboardComponent and SidebarComponent.

The toolbar loads normally, but when I load SidebarComponent, the error "The template specified for the SidebarComponent component is not a string" appears in the browser

SidebarComponent:

import { Component } from '@angular/core';

@Component({
    selector: 'sidebar-component',
    templateUrl: './sidebar.component.ts',
    styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent {}

App.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SidebarComponent } from './sidebar/sidebar.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Both of them are also uploaded to app.component.

<sidebar-component></sidebar-component>
<dashboard></dashboard>

Answer 1

The error speaks for itself ...

You mean the .tsfile instead .html.

Change this line:

templateUrl: './sidebar.component.ts'

at

templateUrl: './sidebar.component.html'

Answer 2

const path = require ('path'); - const rxPaths = require ('rxjs/_esm5/path-mapping');

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

const helpers = require('./webpack.helpers');

const ROOT = path.resolve(__dirname, '..');

- console.log('@@@@@@@@@USING DEVELOPMENT @@@@@@@@@@@@@@@');

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    performance:{hints: false},
    entry: {
        //polyfills: './ClientApp/polyfills.ts',
        //vendor: './wwwroot/vendor.js',
        app: './ClientApp/app.ts'
    },
    watchOptions: {
        ignored: /node_modules/
    },
    output: {
        path: ROOT + '/wwwroot/',
        filename: 'dist/[name].bundle.js',
        chunkFilename: 'dist/[id].chunk.js',
        publicPath: '/'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
        //alias: rxPaths()
    },

    devServer: {
        historyApiFallback: true,
        contentBase: path.join(ROOT, '/wwwroot/'),
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
        },
        hot: true
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    //'ts-loader',
                    'awesome-typescript-loader',
                    'angular-router-loader',
                    'angular2-template-loader',
                    'source-map-loader',
                    'tslint-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
                loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'
            },
            {
                test: /favicon.ico$/,
                loader: 'file-loader?name=/[name].[ext]'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            },
            {
                test: /\.svg$/,
                loader: 'svg-inline-loader',
                options: {
                    name: "[name].[ext]",
                    outputPath: 'wwwroot/assets/svgs/',
                    publicPath: 'ClientApp/'
                }
            }
        ],
        exprContextCritical: false
    },
    plugins: [
        function () {
            this.plugin('watch-run', function (watching, callback) {
                console.log(
                    '\x1b[33m%s\x1b[0m',
                    'Begin compile at ${new Date().toTimeString()}'
                );
                callback();
            });
        },

        new webpack.optimize.ModuleConcatenationPlugin(),

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),

        // new webpack.optimize.CommonsChunkPlugin({ name: ['vendor', 'polyfills'] }),

        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./wwwroot/dist', './wwwroot/assets'],
            root: ROOT
        }),

        new HtmlWebpackPlugin({
            filename: 'index.html',
            inject: 'body',
            template: 'ClientApp/index.html'
        }),

        new CopyWebpackPlugin([
            { from: './ClientApp/assets/*.*', to: 'assets/', flatten: true }
        ])

        //new FilterWarningsPlugin({
        //    exclude: /System.import/
        //})
    ]
};

// Package.Json
    {
  "author": "Sandeep Kumar",
  "dependencies": {
    "@angular/animations": "^8.0.1",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "@aspnet/signalr": "^1.1.4",
    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
    "@ngtools/webpack": "^8.0.3",
    "@types/flatpickr": "^3.1.2",
    "alertify": "^0.3.0",
    "angular-bootstrap-md": "^7.5.4",
    "angular4-notify": "^1.2.0",
    "babel-polyfill": "^6.26.0",
    "chart.js": "^2.5.0",
    "file-loader": "^4.0.0",
    "flag-icon-css": "^3.3.0",
    "flatpickr": "^4.6.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.11",
    "notie": "^4.3.1",
    "omni-slider": "^1.2.1",
    "pell": "^1.0.6",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "description": "sms app",
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.3",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.9.5",
    "@types/webpack-env": "^1.13.9",
    "angular-router-loader": "^0.8.5",
    "angular2-template-loader": "^0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^3.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "clean-webpack-plugin": "^3.0.0",
    "codelyzer": "^5.0.0",
    "compression-webpack-plugin": "^3.0.0",
    "concurrently": "^4.1.0",
    "copy-webpack-plugin": "^5.0.3",
    "css-loader": "^3.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.2.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "jquery": "^3.4.1",
    "json-loader": "^0.5.7",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "raw-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "svg-inline-loader": "^0.8.0",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^6.0.3",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "tslint-loader": "^3.5.4",
    "typescript": "~3.4.3",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "url-loader": "^2.0.0",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.2",
    "webpack-filter-warnings-plugin": "^1.2.1",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-manifest-plugin": "^2.0.4"
  },
  "license": "ISC",
  "main": "wwwroot/index.html",
  "name": "client-app",
  "private": true,
  "scripts": {
    "ngc": "ngc -p ./tsconfig.json",
    "start": "concurrently \"webpack-dev-server --hot --inline --port 44380\" \"dotnet run\" ",
    "webpack-dev": "set NODE_ENV=development && webpack",
    "webpack-production": "set NODE_ENV=production && webpack",
    "build-dev": "npm run webpack-dev",
    "build-production": "npm run ngc && npm run webpack-production",
    "watch-webpack-dev": "set NODE_ENV=development && webpack --watch --color",
    "watch-webpack-production": "npm run build-production --watch --color",
    "publish-for-iis": "npm run build-production && dotnet publish -c Release"
  },
  "version": "0.0.0",
  "-vs-binding": {
    "ProjectOpened": [
      "watch-webpack-dev"
    ]
  }
}

Hide result

.net core 2, index.cshtml. - , AppSection,

, .

**** .net ClientApp , tsconfig, tslint package.json .net.