GET http://localhost:3000/@angular/animations 404 (Not Found)

Bug, feature request, or proposal:

Bug

What is the expected behavior?

anguar/systemjs should not complain and run

What is the current behavior?

angular/systemjs throws an error

GET http://localhost:3000/@angular/cdk 404 (Not Found) Error: Fetch error: 404 Not Found Instantiating http://localhost:3000/@angular/cdk Loading http://localhost:3000/node_modules/@angular/material/bundles/material.umd.js Loading main.js at fetch.js:37 at ZoneDelegate.invoke (zone.js:391) at Zone.run (zone.js:141) at zone.js:818 at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:191) at drainMicroTaskQueue (zone.js:584) at <anonymous> GET http://localhost:3000/@angular/animations 404 (Not Found)

What are the steps to reproduce?

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
npm install --save hammerjs

content of app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';
import { UserService } from './user.service';
import { HttpModule, JsonpModule } from '@angular/http';

// import { MaterialModule } from '@angular/material';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

import { UserFormComponent } from './user-form.component';
import { MenuComponent } from './menu/menu.component';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, HttpModule, JsonpModule,
                // MaterialModule,
                BrowserAnimationsModule,
                MdButtonModule, MdCheckboxModule
                ],
  declarations: [ AppComponent, UserFormComponent, MenuComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ UserService ]
})
export class AppModule { }

Providing a Plunker (or similar) is the best way to get the team to see your issue.

What is the use-case or motivation for changing an existing behavior?

just need to know why it is not woring and how to fix it

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

“@angular/material”: “^2.0.0-beta.8” “@angular/core”: “~4.2.6” “@angular/material”: “^2.0.0-beta.8”, “typescript”: “~2.4.1”, OS: Windows 10 Browser: Google Chrome 59.0.3071.115

Is there anything else we should know?

[willshowell]

Use this official plunker template as a guide on configuring systemjs.config.

You probably need to add (some of) the following to it:

'@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',

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
'@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',

[shekharsumanpandey-tudip]

But in angular CLI there is no system.config.js file so how I can add these files in our application.