我正在构建一个 MEAN 应用程序，并且遇到了以前从未遇到过的问题。当我将应用程序根选择器包含在 Node View 的 index.ejs 文件中时，该选择器无法识别并被丢弃。编辑器显示此错误:
<app-root> is not recognized! Discarding Unexpected <app-root>
我检查了应用程序组件中的选择器以确保选择器匹配，检查了 AppModule 以确保我声明了它，并检查了 main.ts 以确保我正确引导。一切看起来都很好，当我运行应用程序时，终端中没有错误。我花了大约一个小时在这里和 Angular 文档中寻找类似的问题，但没有找到任何东西。
所以我很好奇是否有其他人遇到过这个问题或者知道发生了什么。代码如下。
索引.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!';
}
应用程序模块
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 { }
main.ts
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>是 AngularJS 选择器，并且您的 ejs 是由 NodeJS ejs 引擎引导的，它不会识别 AngularJS 选择器。
只需使用“ng build”命令编译您的angularJS项目，然后将“dist”文件夹中的所有内容复制到您的nodejs项目的“public”文件夹中(或者您需要在您的nodejs项目中配置dist路径)，它应该可以工作，您根本不需要index.ejs。
关于node.js - Angular <app-root> 在 Node View 中无法识别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44976311/