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 的变化。

用他们的话说，"We have pulled Animations into their own package. This means that if you don’t use Animations, this extra code will not end up in your production bundles. This also allows you to more easily find documentation and to take better advantage of autocompletion. If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main NgModule."

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

将其添加到导入中。

 @NgModule({
     imports: [
       BrowserAnimationsModule
     ]
 })

Answer 4

一个人可以运行成问题从“@angular/platform-browser/animations”导入{BrowserAnimationsModule}；

您会收到此错误消息： node_modules/@angular/platform-browser‌ /bundles/platform-br‌ owser.umd.js/animati‌ 在 404（未找到）

要修复它，如果您使用的是 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 的引用不是必需的，除非您正在使用它。我碰巧正在尝试一下。（不推荐）

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

angular2 中的导航错误

Navigation Error in angular2

node.js

webpack-2

typescript2.1

angular