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

这是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 3

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

如果您不想使用它(即它会减少生产包大小),那么导入NoopAnimationsModule:

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

imports: [
   NoopAnimationsModule 
   // ...
]

Answer 4

可以从'@ angular/platform-b​​rowser/animations'导入导入{BrowserAnimationsModule}的问题;

您可以收到以下错误消息:node_modules/@ angular/platform-b​​rowser/bundles/platform-b​​r owser.umd.js/animati ons 404(Not Found)

要解决这个问题,如果你使用的是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,否则不需要引用primeng.我碰巧尝试了一下.(不是推荐)