在angular2中导航错误
我更新了angular度包版本从2.4.10到4.0.0更新后我在导航时遇到以下错误。
ERROR Error: Uncaught (in promise): Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application 我更改了webpack.common.jsconfiguration。 看下面的代码
new webpack.ContextReplacementPlugin( // The (\\|\/) piece accounts for path separators in *nix and Windows /angular(\\|\/)core(\\|\/)@angular/, helpers.root('./src'), // location of your src {} // a map of your routes ),
我已经解决了这个问题。 我添加了一个新的包： @angular/animations 。
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
我导入了模块：
@NgModule({ imports: [ BrowserAnimationsModule ] })
这是从4.0.0-rc.1的变化。
用他们的话来说，“我们已经将animation拉入自己的包中，这意味着如果你不使用animation，这个额外的代码将不会在你的生产包中结束，这也使你更容易find文档，自动完成的好处如果你确实需要animation，像Material这样的库会自动导入模块（一旦你通过NPM安装它），或者你可以把它自己添加到你的主要NgModule中。
-
npm install @angular/animations --save - Inside AppModule >>
import {BrowserAnimationsModule} from '@angular/platform-browser/animations' -
将其添加到导入。
@NgModule({ imports: [ BrowserAnimationsModule ] })
这取决于你是否要使用Angularanimation
如果你不想使用它（即它会减less生产包的大小），然后导入NoopAnimationsModule：
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; imports: [ NoopAnimationsModule // ... ]
可以从'@ angular / platform-browser / animations'导入{BrowserAnimationsModule};
你可以得到这个错误信息：node_modules / @ angular / platform-browser / bundles / platform-br owser.umd.js / animati ons 404（Not Found）
为了解决这个问题，如果你使用的是systemjs.config.js，那么你需要把它放在这里：'@ angular / platform-browser / animations'：'npm：@ angular / platform-browser / bundles / platform-browser- animations.umd.js'，
下面是解决问题的systemjs.config.js的示例内容：
/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'primeng': 'npm:primeng' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, primeng: { defaultExtension: 'js' } } }); })(this);
注意：对primeng的引用是没有必要的，除非你正在使用它。 我碰巧试了一下。 （不是build议）
