angular2中的导航错误

Question

我已将 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.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

这取决于你是否要使用 Angular 动画

如果你不想使用它（即它会减少生产包的大小）然后导入 NoopAnimationsModule ：

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

imports: [
   NoopAnimationsModule 
   // ...
]

Answer 3

这是对4.0.0-rc.1的变化。

用他们的话说，“我们已经将 Animations 放入了他们自己的包中。这意味着如果您不使用 Animations，这些额外的代码将不会出现在您的生产包中。这也使您可以更轻松地找到文档和更好地利用自动补全。如果你确实需要动画，像 Material 之类的库会自动导入模块（一旦你通过 NPM 安装它），或者你可以自己将它添加到你的主 NgModule。"

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

3. 将其添加到导入中。

    @NgModule({
        imports: [
          BrowserAnimationsModule
        ]
    })
   

Answer 4

一个人可能会遇到问题 从'@angular/platform-b​​rowser/animations'导入{BrowserAnimationsModule}；

您会收到以下错误消息： node_modules/@angular/platform-b​​rowser‌​/bundles/platform-b​​r‌​owser.umd.js/animati‌​ons 404（未找到）

要修复它，如果您使用的是 systemjs.config.js，那么您需要将这一行： '@angular/platform-b​​rowser/animations': 'npm:@angular/platform-b​​rowser/bundles/platform-b​​rowser-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 项目中使用动画，那么你需要在你的 Angular 存储库中包含这些行。

---

 '@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',

---