无法在mvc 5中加载angular2 templateUrl

时间:2017-02-27 14:41:07

标签: angular asp.net-mvc-5 angular2-template

我在angular2应用程序中加载模板时遇到问题。

system.config.js:

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '/libs/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: '/Scripts',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

boot.ts

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

import { AccountsAppComponent } from './Accounts/app';
import { LoginComponent } from './Accounts/Login/Login.component';
import { RegisterComponent } from './Accounts/Register/Register.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AccountsAppComponent,
        LoginComponent,
        RegisterComponent
        ],
    bootstrap: [AccountsAppComponent]
})
export class AppModule { }

app.ts:

import { Component } from '@angular/core';
import { LoginComponent } from './Login/Login.component';
import { RegisterComponent } from './Register/Register.component';

@Component({
    selector: 'my-app',
    template: `<login-form></login-form> <register-form></register-form>`
})
export class AccountsAppComponent {
    title = 'ASP.NET MVC 5 with Angular 2';
    skills = ['MVC 5', 'Angular 2', 'TypeScript', 'Visual Studio 2015'];
    myskills = this.skills[1];
}

Register.component.ts:

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

@Component({
    selector: 'register-form',
    templateUrl: './Accounts/Register/Register.component.html'
})
export class RegisterComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

我尝试过不同的路径,例如:

'./Accounts/Register/Register.component.html'
'./Register/Register.component.html'
'./Register.component.html'

如果我使用template:代码,我可以成功加载我的HTML代码,但是如果我使用templateUrl:它无法正常工作。起初我觉得路径有问题,但是当我尝试不同的路径时,我意识到这是另一回事。我想知道是什么导致了这些问题。

1 个答案:

答案 0 :(得分:1)

from keras.layers import merge, Dropout, Convolution2D, MaxPooling2D, Input, Dense, Flatten, Merge from keras.models import Model from keras.callbacks import EarlyStopping, ReduceLROnPlateau,TensorBoard import pickle from sklearn.utils import shuffle import numpy as np import random from keras.optimizers import Adam np.random.seed(1000) def load_pickled_data(file, columns): with open(file, mode='rb') as f: dataset = pickle.load(f) return tuple(map(lambda c: dataset[c], columns)) train_preprocessed_dataset_file = "train.p" test_preprocessed_dataset_file = "test.p" X_train, y_train_64 = load_pickled_data(train_preprocessed_dataset_file, columns = ['features', 'labels']) X_test, y_test_64 = load_pickled_data(test_preprocessed_dataset_file, columns = ['features', 'labels']) y_train = y_train_64.astype(np.float32) y_test = y_test_64.astype(np.float32) ###CNN model### input_img = Input(shape=(32, 32, 1)) conv_1 = Convolution2D(32, 5, 5, border_mode='same', activation='relu')(input_img) pool_1 = MaxPooling2D((2, 2))(conv_1) pool_1 = Dropout(0.1)(pool_1) conv_2 = Convolution2D(64, 5, 5, border_mode='same', activation='relu')(pool_1) pool_2 = MaxPooling2D((2, 2))(conv_2) pool_2 = Dropout(0.2)(pool_2) conv_3 = Convolution2D(128, 5, 5, border_mode='same', activation='relu')(pool_2) pool_3 = MaxPooling2D((2, 2))(conv_3) pool_3 = Dropout(0.3)(pool_3) pool_3 = Flatten()(pool_3) pool_1 = MaxPooling2D((4, 4))(pool_1) pool_1 = Flatten()(pool_1) pool_2 = MaxPooling2D((2, 2))(pool_2) pool_2 =Flatten()(pool_2) all_features = merge([pool_1, pool_2, pool_3], mode='concat') logits = Dense(500,activation='relu')(all_features) logits = Dropout(0.5)(logits) res = Dense(43,activation='softmax')(logits) c_model = Model(input_img, res) c_model.summary() adam = Adam(lr=0.001, beta_1=0.9, beta_2=0.999, epsilon=1e-08) c_model.compile(loss='categorical_crossentropy', optimizer= adam, metrics=['accuracy']) tensor_board = TensorBoard(log_dir='./logs', histogram_freq=1) history = c_model.fit(X_train, y_train, batch_size=128,nb_epoch=3,shuffle=True,verbose=1,validation_split=0.25,callbacks=[tensor_board]) loss_and_metrics = c_model.evaluate(X_test, y_test, batch_size=128) 的相对路径不正确。 templateUrl相对于当前文件夹,因此它正在查找./

将路径更改为相对于文件的位置。很可能模板的文件名或其位置不匹配,但正确的路径应为:

<root>/Accounts/Register/Accounts/Register/Register.component.html

假设您的项目结构是:

'./Register.component.html'