更新中に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
),
私は問題を修正しました。新しいパッケージを追加しました:@angular/animations
。
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
そして、モジュールをインポートしました:
@NgModule({
imports: [
BrowserAnimationsModule
]
})
4.0.0-rc.1 からの変更です。
彼らの言葉で、「私たちはアニメーションを独自のパッケージに入れました。これは、アニメーションを使用しない場合、この余分なコードがプロダクションバンドルに含まれないことを意味します。オートコンプリートの利点。アニメーションが必要な場合、Materialのようなライブラリは自動的にモジュールをインポートします(NPMを介してインストールすると)、またはメインのNgModuleに追加できます。」
npm install @angular/animations --save
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
インポートに追加します。
@NgModule({
imports: [
BrowserAnimationsModule
]
})
それはAngularアニメーションを使用するかどうかによって異なります
使用したくない場合(つまり、本番バンドルのサイズを小さくする場合)、NoopAnimationsModuleをインポートします。
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
imports: [
NoopAnimationsModule
// ...
]
'@ angular/platform-browser/animations'から{BrowserAnimationsModule}をインポートすると問題が発生する可能性があります。
次のエラーメッセージを取得できます:node_modules/@ angular/platform-browser/bundles/platform-br owser.umd.js/animati ons 404(Not Found)
修正するには、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への参照は、使用しない限り必要ありません。私はそれを試してみることがあります。 (推奨ではありません)