Question

我在VS 2017中构建了一个角度4应用程序，当我在VS中调试它时工作正常。现在我已经将它从VS发布到一个文件夹并将其复制到我的Windows 2008服务器上，使用IIS7（包括文件夹node_modules），修改了一些文件路径以消除所有加载错误，但现在我遇到了下一个错误：

Unhandled Promise rejection: Template parse errors:
'app-root' is not a known element:
1. If 'app-root' is an Angular component, then verify that it is part of this module.
2. If 'app-root' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<body>
    [ERROR ->]<app-root>
        <div id="error" class="alert alert-danger" style="display:none;"></div>
        "): ng:///~/App/SharedModule/table/dataTable.component.html@38:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:

当我检查时，一切都很好地加载到浏览器中。我找到了所有的.js文件。

据我所知，这里是所需文件，按加载顺序：

system.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        'baseURL:': '/hhappadmin/',
        paths: {
            // paths serve as alias
            'npm:': '/hhappadmin/node_modules/'

        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'base': '/app/',

            // 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',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'ng2-bs3-modal': 'npm:ng2-bs3-modal',
            'ng2-pdf-viewer': 'npm:ng2-pdf-viewer',
            'pdfjs-dist': 'npm:pdfjs-dist',
            //'@ngui/datetime-picker': 'npm:@ngui/datetime-picker/dist',
            'ng2-typeahead': 'npm:ng2-typeahead'
            //'auto-complete': 'npm:auto-complete/dist'
        },
        // 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'}, 
            'ng2-bs3-modal': { main: '/bundles/ng2-bs3-modal.js', defaultExtension: 'js' },

            'ng2-pdf-viewer': { main: 'dist/index', defaultExtension: 'js' },
            'pdfjs-dist': { defaultExtension: 'js' },
            'ng2-typeahead': { main: 'index.js', defaultExtension: 'js' },

            '@ngui/datetime-picker': { main: '/datetime-picker.umd.js', defaultExtension: 'js' }
            //,'auto-complete': {
            //    main: 'auto-complete.umd.js',
            //    defaultExtension: 'js'
            //}

        }
    });
})(this);

应用/ main.ts

从'@ angular / platform-browser-dynamic'导入{platformBrowserDynamic}; 从'./basemodule/base.module'中导入{BaseModule};

platformBrowserDynamic（）bootstrapModule（BaseModule）;

应用/ basemodule / base.module.ts

import { NgModule } from '@angular/core';
import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule, NgSelectOption } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal'
import { SharedModule } from "../SharedModule/shared.module";
import { AppComponent } from './app/app.component';
import { routing } from '../app.routing';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contacts/contacts.component';
import { ContactDetailComponent } from './contacts/contactDetail/contactDetail.component';
import { OrganisationDetailComponent } from './contacts/organisationDetail/organisationDetail.component';
import { OrganisationComponent } from './contacts/Organisations.component';
import { AddressComponent } from "./contacts/address/address.component";
import { ContactSettingsComponent } from "./contacts/contactSettings/contactSettings.component";

import { ItemsComponent } from "./items/items.component";
import { ItemDetailComponent} from "./items/itemDetail/itemDetail.component";
import { ItemSettingsComponent } from ./items/itemSettings/itemSettings.component";

import { ContactService } from '../Service/contact.service';
import { ItemService } from '../Service/item.service';
import { FinanceModule } from "../FinanceModule/finance.module";
import { ContactDataComponent } from "./contacts/contactData/contactdata.component";

@NgModule({

    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpModule,
        routing,
        Ng2Bs3ModalModule,
        SharedModule,
        FinanceModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        ContactComponent, ContactDetailComponent,
        OrganisationComponent, OrganisationDetailComponent,
        AddressComponent, ContactDataComponent, ContactSettingsComponent, 
        ItemsComponent, ItemDetailComponent, ItemSettingsComponent
    ],
    providers: [
        { provide: APP_BASE_HREF, useValue: '/hhappadmin/' },
        ContactService,
        ItemService
    ],
    bootstrap: [AppComponent]
})

export class BaseModule { }

以及最后一部分 app / basemodule / app / app.component.ts

import { Component } from "@angular/core"
import { Global } from "../../Shared/global";
@Component({
    selector: 'app-root',
    templateUrl: Global.BASE_TEMPLATE_PATH + '/App/basemodule/app/app.component.html'

})
export class AppComponent {
    constructor(   
    ) {  }
    private shownMenu: string[] = ['']
    changeMenu(name: string) {
        if (this.shownMenu.indexOf(name) > -1) {
            this.shownMenu.splice(this.shownMenu.indexOf(name), 1);
        } else {
            this.shownMenu.push(name);
        }
    }
}

我已经在Windows服务器2008上安装了NodeJ，并且大约2个月前在这个服务器上运行了这个应用程序的基本框架作为测试，如果它可以工作（它确实可以！）

我应该怎么做才能修复此错误...提前致谢！

Answer 1

谢谢你让我朝着正确的方向前进！我取代了＆＃34;〜＆＃34;在基本URL的已部署应用程序中。它可能没有用，因为这些url是由Js而不是.net框架处理的

在IIS上从VS部署时，无法识别Angular 4根组件

1 个答案: