angular2中的导航错误

Posted 2023-03-07

【中文标题】angular2中的导航错误

【英文标题】：Navigation Error in angular2

【发布时间】：2017-08-17 02:05:27

【问题描述】：

我已将 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
        ),

【问题讨论】：

如果你在运行单元测试时得到这个，但在运行实际应用程序时没有，你需要导入到你的测试台配置中。在另一个问题上查看此答案：***.com/a/43506088/791007

【参考方案1】：

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

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

我导入了模块：

@NgModule(
    imports: [
        BrowserAnimationsModule
    ]
)

【参考方案2】：

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

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

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

imports: [
   NoopAnimationsModule 
   // ...
]

【讨论】：

如果它不起作用，请检查：也许您遇到了误导性错误消息问题。 github.com/angular/angular/issues/15581

【参考方案3】：

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

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

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

将其添加到导入中。

 @NgModule(
     imports: [
       BrowserAnimationsModule
     ]
 )

【讨论】：

我收到一个错误GET http://localhost:3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations 404 (Not Found)

@Kimmiekim 如果您使用的是 systemjs，您也需要更新配置文件。查看@user2367418 将@angular/platform-browser/animations、@angular/animations/browser 和@angular/animations 添加到您的配置文件的答案

【参考方案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 的引用。我碰巧在试一试。 （不是推荐）

【参考方案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',

---

【讨论】：

用户@user2367418已经发布了这个答案。因此，在发布答案之前，请检查以前的答案并发布您的相关答案。