0
我正在构建一个MEAN应用程序，并遇到了我以前没遇到过的问题。当我将我的应用程序根选择器包含在节点视图的index.ejs文件中时，选择器无法识别并被丢弃。该编辑器显示此错误：角度<app-root>无法在节点视图中识别
<app-root> is not recognized! Discarding Unexpected <app-root>
我检查在App组件选择，以确保选择匹配，检查的AppModule，以确保我宣布它，并检查了main.ts以确保我正确引导。一切看起来都很好，而且在运行应用程序时终端中没有错误。我花了大约一个小时在这里和Angular文档中寻找类似的问题，但没有找到任何东西。
所以我很好奇是否有其他人遇到过这个问题，或者对发生了什么有所了解。下面的代码。
index.ejs<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<app-root>Loading...</app-root>
<script src="/js/app/bundle.js"></script>
</body>
</html>
应用组件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
APP模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routes } from './route/app.routing';
import { RouterModule } from "@angular/router";
import { AmChartsModule } from "amcharts3-angular2";
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import { NavbarComponent } from './navbar/navbar.component';
import { MainComponent } from './main/main.component';
//Services
import { NewsApiService } from './service/news-api.service';
@NgModule({
declarations: [
AppComponent,
MapComponent,
NavbarComponent,
MainComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
AmChartsModule,
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [NewsApiService],
bootstrap: [AppComponent]
})
export class AppModule { }
import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
只依赖
{
"name": "aether-news",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./server/bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch"
},
"engines": {
"node": "7.4.0"
},
"dependencies": {
"@angular/animations": "^4.2.5",
"@angular/common": "^4.2.5",
"@angular/compiler": "^4.2.5",
"@angular/compiler-cli": "^4.2.5",
"@angular/core": "^4.2.5",
"@angular/forms": "^4.2.5",
"@angular/platform-browser": "^4.2.5",
"@angular/platform-browser-dynamic": "^4.2.5",
"@angular/platform-server": "^4.2.5",
"@angular/router": "^4.2.5",
"@angular/upgrade": "^4.2.5",
"bcrypt": "^1.0.2",
"body-parser": "^1.16.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.2",
"debug": "^2.6.3",
"ejs": "~2.5.5",
"express": "^4.14.1",
"hbs": "^4.0.1",
"jsonwebtoken": "^7.3.0",
"mongoose": "^4.9.2",
"morgan": "^1.7.0",
"multer": "^1.3.0",
"passport": "^0.3.2",
"passport-jwt": "^2.2.1",
"preboot": "^5.0.0-rc.11",
"request": "^2.81.0",
"request-promise": "^4.2.0",
"rxjs": "^5.4.2",
"serve-favicon": "^2.3.2",
"zone.js": "^0.8.12"
},
"devDependencies": {
"angular2-router-loader": "^0.3.5",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.2.1",
"del-cli": "^1.1.0",
"html-loader": "^0.4.5",
"raw-loader": "^0.5.1",
"typescript": "^2.4.1",
"webpack": "^3.1.0",
"webpack-merge": "^4.1.0"
}
}
感谢您抽空看看...
你有没有尝试在app-root标签之前放置bundle.js。 –
感谢您的回复。是的，我试过了。该错误实际上是在我捆绑应用程序之前显示的。 – sharedev
你用什么来编译你的项目？ “...不是！”信息来自HTML Tidy（http://www.html-tidy.org/）。看起来有些选项可以禁用无法识别的元素（https://github.com/htacg/tidy-html5/issues/119），但对于绝大多数的Angular应用程序来说，HTML Tidy应该不是必需的，甚至不是有用的。我没有看到任何包含在由Angular CLI 1.2.0引入的标准依赖中的HTML Tidy导入。 –