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

[Masber]

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

[jelbourn]

Configuring SystemJS is something that falls under the consuming app, not something tied to Angular Material.

[johnkuriakose89]

You should add the
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js'
'@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

in the system.config.js

[shekharsumanpandey-tudip]

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}