在节点视图中无法识别Angular <app-root>
在节点视图中无法识别Angular <app-root>
提问于 2017-07-08 01:08:27
我正在构建一个糟糕的应用程序，并且遇到了一个我以前从未遇到过的问题。当我在Node视图的index.ejs文件中包含应用程序根选择器时，该选择器无法识别并被丢弃。编辑器显示以下错误：
<app-root> is not recognized! Discarding Unexpected <app-root> 我检查了应用程序组件中的选择器以确保选择器匹配，检查了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!';
}应用程序模块
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"
}
}谢谢你看了..。
回答 1
Stack Overflow用户
发布于 2017-07-08 04:50:58
您的<app-root>是AngularJS选择器，而您的ejs是由nodeJS ejs引擎引导的，它将无法识别AngularJS选择器。
只需使用"ng build“命令编译您的angularJS项目，然后将" dist”文件夹中的所有内容复制到nodejs项目的"public“文件夹中(或者您需要在nodejs项目中配置dist路径)，它应该可以工作，您根本不需要index.ejs。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44976311
复制相关文章
相似问题
腾讯云开发者
