0

当我将我的 angular 2 升级到 angular 5 时，控制台中出现以下错误。

  Uncaught Error: Template parse errors:
  "let-" is only supported on ng-template elements. ("
  <template ngFor [ERROR ->]let-breadcrumb [ngForOf]="breadcrumbs" let-last 
  = last>
  <li class="breadcrumb-item" *ngIf="breadc"): 
  ng:///AppModule/BreadcrumbsComponent.html@1:18
 "let-" is only supported on ng-template elements. ("
 <template ngFor let-breadcrumb [ngForOf]="breadcrumbs" [ERROR ->]let-last = 
 last>
  <li class="breadcrumb-item" 
*ngIf="breadcrumb.label.title&&breadcrumb.url.substr"): 
 ng:///AppModule/BreadcrumbsComponent.html@1:57
at ZoneAwareError (zone.js:672)
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34366)
at JitCompiler.compileModuleAsync (compiler.js:34260)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.bootstrapModule (core.js:5567)
at Object.eval (main.ts:11)

ng2-bootstrap：1.4.0。

依赖关系

  "@angular/animations": "^5.2.7",
"@angular/cdk": "^5.2.3",
"@angular/common": "^5.2.7",
"@angular/compiler": "^5.2.7",
"@angular/core": "^5.2.7",
"@angular/forms": "^5.2.7",
"@angular/http": "^5.2.7",
"@angular/material": "^5.2.3",
"@angular/platform-browser": "^5.2.7",
"@angular/platform-browser-dynamic": "^5.2.7",
"@angular/platform-server": "^5.2.7",
"@angular/router": "^5.2.7",
"@angular/upgrade": "2.4.9",
"angular-2-data-table": "^0.1.2",
"angularfire2": "^5.0.0-rc.5-next",
"bootstrap": "^4.0.0",
"chart.js": "2.5.0",
"core-js": "2.4.1",
"firebase": "^4.10.1",
"moment": "2.17.1",
"ng2-bootstrap": "1.4.0",
"ng2-charts": "1.5.0",
"ngx-toastr": "^8.2.1",
"promise-polyfill": "7.1.0",
"rxjs": "^5.2.0",
"ts-helpers": "1.1.2",
"zone.js": "0.7.2"

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ApplicationRef, NgModule } from '@angular/core';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { CommonModule } from '@angular/common';
import { FormsModule, NgForm, NgModel, ReactiveFormsModule } from 
'@angular/forms';
import { DropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { ChartsModule } from 'ng2-charts/ng2-charts';


import { AppComponent } from './app.component';

import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';

import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
import { AppRoutingModule } from './app.routing';
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
import { AuthService } from './auth/auth.service';
import { ActivitiesComponent } from './activities/activities.component';







@NgModule({

 declarations: [
 //    RegisterComponent,
AppComponent,

FullLayoutComponent,
SimpleLayoutComponent,
NAV_DROPDOWN_DIRECTIVES,
BreadcrumbsComponent,
SIDEBAR_TOGGLE_DIRECTIVES,
AsideToggleDirective,
SignupComponent,
SigninComponent,
ActivitiesComponent

],
imports: [
BrowserModule,
AppRoutingModule,
DropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
// AgmCoreModule.forRoot({
//   apiKey: 'AIzaSyAN5kOnczJueAAtUuXRWo-82aCrTUbJDxs'
// })
],

  providers: [AuthService,{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component ,OnInit} from '@angular/core';
import * as firebase from 'firebase';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Component({
// tslint:disable-next-line
selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit{

 ngOnInit() {
 firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
  });
  }
  }

我在 github 上遇到了同样的问题。但是他们在我使用 ng2-bootstrap 时使用了 ngx-bootstrap。当我安装 ngx-bootstrap 时，它会删除我的 ng2-bootstrap 并在我在 app.module 中使用 ng2-bootstrap 时出现错误。 ngx- 之间有什么区别bootstrap 和 ng2-bootstrap 任何帮助将不胜感激。谢谢

4

0 回答 0