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。“

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

将其添加到导入。

 @NgModule({
     imports: [
       BrowserAnimationsModule
     ]
 })

Answer 3

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

如果您不想使用它（即它会减少生产包大小），那么导入NoopAnimationsModule：

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

imports: [
   NoopAnimationsModule 
   // ...
]

Answer 4

人们可能会遇到问题从＆＃39; @ angular / platform-browser / animations＆＃39;中导入{BrowserAnimationsModule};

您可以收到以下错误消息： node_modules / @ angular / platform-browser / bundles / platform-br owser.umd.js / animati ons 404（Not Found）

要解决此问题，如果您使用的是systemjs.config.js，那么您需要使用此行：＆＃39; @ angular / platform-browser / animations＆＃39;：＆＃39; npm：@ angular / platform-browser / bundles / platform-browser-animations.umd.js＆＃39;，

以下是修复问题的systemjs.config.js的示例内容：

    <div class="body" data-spy="scroll" data-target=".navbar-fixed-top">
      <section id="red" class="bc1">
      </section>
      <section id="blue" class="bc2">
      </section>
      <section id="green" class="bc3">
      </section>
      <section id="blue" class="bc4">
      </section>
    </div>



     <script>

    var $pages = $('section'), tot = $pages.length, c = 0, pagePos = 0, down = 0, listen = true;
    $('.body').on('DOMMouseScroll mousewheel', function(e) {
        e.preventDefault();
        if (!listen)
            return;
        listen = false;
        down = e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0;
        c = Math.min(Math.max(0, down ? ++c : --c), tot - 1);
        pagePos = $pages.eq(c).offset().top;

        $(this).stop().animate({
            scrollTop : pagePos
        }, 850, function() {
            listen = true;
        });

    });
</script>

注意：除非您使用primeng，否则不需要对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',

angular2中的导航错误

5 个答案: