Why is angular2-webpack-starter not working with angular-material?

Question

I want to modify angular2-webpack-starter(https://github.com/AngularClass/angular-starter) to work with angular-material (https://material.angular.io/)

I followed instructions on angular-material website and imported everything, though when I run the application I hit an error here:

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

It appears to not be able to find the import above even though I installed the package successfully.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@angular/platform-browser/animations' in 'myprojectdirectory'
 @ ./src/app/app.module.ts 40:0-79
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts

How do I get around this?

Vignesh Vignesh · Accepted Answer · 2017-05-03T04:40:52

After Updating the packages to latest version change the configuration in Webpack. See the below code

  plugins: [
           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
        )
]

Why is angular2-webpack-starter not working with angular-material?

1 Answers