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導入。 –