导航误差在angular2

Question

我已经更新我收到以下错误，而导航更新后，从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.js配置。看到下面的代码

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 
     ), 

Answer 1

我已经解决了这个问题。我添加了一个新的包：@angular/animations。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

我输入模块：

@NgModule({ 
    imports: [ 
     BrowserAnimationsModule 
    ] 
}) 

Answer 2

这取决于你是否要使用角动画或不

如果你不想使用它（即，它会降低然后导入NoopAnimationsModule：

import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 

imports: [ 
    NoopAnimationsModule 
    // ... 
] 

Answer 3

这是从4.0.0-rc.1。

用他们的话说，“我们已经将动画拉入自己的包中，这意味着如果您不使用动画，这些额外的代码将不会在您的生产包中结束，这也使您可以更轻松地查找文档并更好地利用自动完成功能，如果你确实需要动画，像Material这样的库会自动导入模块（一旦你通过NPM安装它），或者你可以将它自己添加到主要的NgModule中。

1. npm install @angular/animations --save
2. 里面的AppModule >>import {BrowserAnimationsModule} from '@angular/platform-browser/animations'

3. 它添加到进口。

   @NgModule({ 
       imports: [ 
        BrowserAnimationsModule 
       ] 
   }) 
   

Answer 4

一个可以与 进口{BrowserAnimationsModule}从 '@角/平台的浏览器/动画' 碰到一个问题;

您可以收到此错误信息： node_modules/@角/平台的浏览器/包/平台-BR owser.umd.js/animati组件404（未找到）

为了解决这个问题，如果你正在使用systemjs.config.js，那么你需要有这一行它吧： “@角/平台的浏览器/动画”：“故宫：@角/平台的浏览器/包/平台的浏览器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的参考是没有必要，除非你正在使用它。我碰巧试了一下。 （不推荐）

Answer 5

不要忘了添加下面一行在你System.config.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', 

---