index.ejs

Question

我正在构建一个MEAN应用程序，并遇到了一个我以前没有遇到过的问题。当我在我的index.ejs文件中将我的app-root选择器包含在Node视图中时，选择器无法识别并被丢弃。编辑器显示此错误：

<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"
  }
}

谢谢你看看......

Answer 1

你的<app-root>是AngularJS选择器，你的ejs是由nodeJS ejs引擎引导的，它不会识别AngularJS选择器。

使用＆＃34; ng build＆＃34;编译你的angularJS项目命令，然后复制＆＃34; dist＆＃34;中的所有内容折叠到＆＃34; public＆＃34;你的nodejs项目的折叠（或者你需要在nodejs项目中配置dist路径），它应该工作，你根本不需要index.ejs。

在Node视图中无法识别Angular <app-root>

index.ejs

应用程序组件

应用程序模块

main.ts

依赖

1 个答案: