templateUrl в компоненте Angular2 не загружает URL

ProgramBox

templateUrl в компоненте Angular2 не загружает URL

Post author:admin
Запись опубликована:4 мая, 2023
Post category:Вопросы по программированию

#asp.net-mvc #angular #typescript #angular2-template

Вопрос:

это мой компонент

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

@Component({
    selector: 'homeView',
    templateUrl: '/home/home'
})
export class HomeViewComponent implements OnInit {
    ngOnInit(): void {}
}

Я использую AngularJS 2 с TypeScript 1.8.5 и пытаюсь создать компонент, который будет загружать шаблон из действия контроллера.

Я получаю эту ошибку

 main.bundle.js:667 Uncaught Error: Cannot find module ".//home/home"

Я также пробовал это с home / home, ошибка почти такая же

 main.bundle.js:667 Uncaught Error: Cannot find module "./home/home"

Однако ошибка не связана с ошибкой времени компиляции — она появляется в консоли браузера при загрузке страницы и компонента

Итак, как вы можете видеть, я не хочу загружать статический шаблон, подобный home.template.html — это работает правильно. Я хочу загрузить HTML-шаблон из asp.net Действие контроллера MVC. Я даже не достигаю точки отладки в домашнем действии HomeController.

Есть ли какой-нибудь способ заставить это работать? Похоже, Angular продолжает вставлять этот знак ‘./’. Есть ли способ настроить это? Я прочитал несколько руководств по angular2 mvc, и кажется, что это должно быть возможно, но по какой-то причине у меня это не работает.

My app.routes.ts

 import {Routes} from "@angular/router";
import {MainViewComponent} from "../views/main-view/main-view.component";
import {MinorViewComponent} from "../views/minor-view/minor-view.component";
import {HomeViewComponent} from "../views/home-view/home-view.component";

export const ROUTES:Routes = [  
    // Main redirect
    { path: '', redirectTo: 'mainView', pathMatch: 'full'},

    // App views
    {path: 'mainView', component: MainViewComponent},
    {path: 'minorView', component: MinorViewComponent},
    {path: 'homeView', component: HomeViewComponent}

    // Handle all other routes
    //{path: '**',    component: MainViewComponent }
];

app.module.ts

 @NgModule({
    declarations: [AppComponent],
    imports     : [

        // Angular modules
        BrowserModule,
        HttpModule,

        // Views
        MainViewModule,
        MinorViewModule,

        // Modules
        NavigationModule,
        FooterModule,
        TopnavbarModule,

        RouterModule.forRoot(Approutes.ROUTES)
    ],
    providers   : [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap   : [AppComponent]
})

export class AppModule {}

РЕДАКТИРОВАТЬ: еще немного информации :

packages.json

 {
    "name": "inspinia_angular2_starter",
    "version": "1.0.0",
    "description": "Inspinia Admin Theme",
    "repository": "https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S",
    "scripts": {
        "typings-install": "typings install",
        "postinstall": "npm run typings-install",
        "build": "webpack --inline --colors --progress --display-error-details --display-cached",
        "server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000  --content-base src",
        "start": "npm run server"
    },
    "dependencies": {
        "@angular/common": "2.0.0",
        "@angular/compiler": "2.0.0",
        "@angular/core": "2.0.0",
        "@angular/forms": "2.0.0",
        "@angular/http": "2.0.0",
        "@angular/platform-browser": "2.0.0",
        "@angular/platform-browser-dynamic": "2.0.0",
        "@angular/router": "3.0.0",
        "@angular/upgrade": "2.0.0",
        "angular2-in-memory-web-api": "0.0.20",
        "animate.css": "3.1.1",
        "bootstrap": "^3.3.7",
        "core-js": "^2.4.1",
        "font-awesome": "^4.6.1",
        "ie-shim": "^0.1.0",
        "jquery": "^3.1.0",
        "metismenu": "^2.5.0",
        "pace": "0.0.4",
        "pace-progress": "^1.0.2",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.12",
        "systemjs": "0.19.27",
        "typings": "^1.3.2",
        "zone.js": "^0.6.23"
    },
    "devDependencies": {
        "angular2-template-loader": "^0.4.0",
        "awesome-typescript-loader": "^1.1.1",
        "bootstrap-webpack": "0.0.5",
        "css-loader": "^0.23.1",
        "exports-loader": "^0.6.3",
        "expose-loader": "^0.7.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "file-loader": "^0.9.0",
        "imports-loader": "^0.6.5",
        "raw-loader": "^0.5.1",
        "style-loader": "^0.13.1",
        "to-string-loader": "^1.1.4",
        "typescript": "~1.8.5",
        "url-loader": "^0.5.7",
        "webpack": "^1.12.9",
        "webpack-dev-server": "^1.14.0",
        "webpack-merge": "^0.8.4"
    }
}

tsconfig.json

 {
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",

        "outDir": "dist",
        "rootDir": ".",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "moduleResolution": "node"
    },
    "exclude": [
        "node_modules",
        "bower_components"
    ],
    "awesomeTypescriptLoaderOptions": {
        "useWebpackText": true
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

Приложение создано с использованием webpack

main.browser.ts

 import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "../src/app/app.module";

/*
 * Bootstrap Angular app with a top level NgModule
 */

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

1. вы можете попробовать (не уверен) templateUrl: '~/home/home.html' . пожалуйста, также покажите вашу структуру каталогов.

2. Привет, спасибо за ваше предложение, однако оно не сработало. Ошибка по-прежнему та же: неперехваченная ошибка: не удается найти модуль «./~/home/home» . Структура каталогов не должна вызывать беспокойства, поскольку это не должен быть ПУТЬ к шаблону, а скорее URL к действию, которое будет его обслуживать

Ответ №1:

Итак, после того, что казалось вечностью, я, наконец, понял суть этого.

Проблема была в webpack, использующем angular2-template-loader. Этот модуль отвечает за встраивание html-шаблона. Другими словами, он будет выполнять require (используя ваш templateUrl) за кулисами в теге шаблона вашего компонента. Это, конечно, нарушает функциональность, если вы используете реальные URL-адреса в качестве templateUrl, а не пути, поэтому шаблона там нет.

Основываясь на том, что я прочитал, похоже, что авторы не будут поддерживать это в будущем. (Если шаблон не найден -> попробуйте загрузить его с URL)

Больше информации здесь — https://github.com/angular/angular-cli/issues/1605

Итак, по сути, я просто удалил этот компонент из файла конфигурации: webpack.config.js

ПЕРЕД

 module: {
    loaders: [
        {
            test: /.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /.css$/,
            loader:

ПОСЛЕ

 module: {
    loaders: [
        {
            test: /.ts$/,
            loaders: ['awesome-typescript-loader']
        },
        {
            test: /.css$/,
            loader: