Components: Not working after 2.0.0-alpha.8-1 update

Created on 3 Sep 2016 · 13Comments · Source: angular/components

Bug, feature request, or proposal:

ng serve throws this error:
http://screenshot.sh/oeX9Dkq1MQTbk

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

https://github.com/angular/material2/blob/master/GETTING_STARTED.md

use this guide to install material
works when using 2.0.0-alpha.6,

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

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

angular: 2.0.0-rc.4
material: 2.0.0-alpha.8-1
windows 10

Is there anything else we should know?

Source

lessthan1

Most helpful comment

@lessthan1 I notice that the path that fails tries to fetch _button.js_, but a 404 not found error results. You guys can try loading the UMD packages that were introduced with alpha 8-1 instead of the previous scripts. To do so, you would need to change your _systemjs.config.js_ file

Before alpha 8:

materialPkgs.forEach((pkg) => {
  packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`};
});

Starting with alpha 8:

materialPkgs.forEach(name => {
  packages[`@angular2-material/${name}`] = {
    format: 'cjs',
    main: `${name}.umd.js`
  };
});

The _Getting Started_ guide has not been updated to reflect this, but you can see this new configuration in the change log, or the demo app

In general though, if a 404 error occurs it's more likely a configuration error with SystemJS or a dev tool (eg badly setup Gulp task) than with the library itself.

I'm using Angular 2 rc 6 with Material 2 alpha 8-1

RoxKilly on 4 Sep 2016

👍3

All 13 comments

Not working with Angular2 RC 6, I am having exact same error.

naveedahmed1 on 4 Sep 2016

Before alpha 8:

materialPkgs.forEach((pkg) => {
  packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`};
});

Starting with alpha 8:

materialPkgs.forEach(name => {
  packages[`@angular2-material/${name}`] = {
    format: 'cjs',
    main: `${name}.umd.js`
  };
});

The _Getting Started_ guide has not been updated to reflect this, but you can see this new configuration in the change log, or the demo app

In general though, if a 404 error occurs it's more likely a configuration error with SystemJS or a dev tool (eg badly setup Gulp task) than with the library itself.

I'm using Angular 2 rc 6 with Material 2 alpha 8-1

RoxKilly on 4 Sep 2016

👍3

thanks @RoxKilly :)

 var map = {
       ..
        '@angular2-material': 'node_modules/@angular2-material',
       ..
    };

 var  materialPackageNames = [
        'all',
        'button',
        'button-toggle',
        'card',
        'checkbox',
        'core',
        'dialog',
        'grid-list',
        'icon',
        'input',
        'list',
        'menu',
        'progress-bar',
        'progress-circle',
        'radio',
        'sidenav',
        'slide-toggle',
        'slider',
        'tabs',
        'toolbar',
        'tooltip',
    ];

  materialPackageNames.forEach(function (Material_PKG) {
        packages[("@angular2-material/" + Material_PKG)] = {
            format: 'cjs',
            main: Material_PKG + '.umd.js',
            defaultExtension: 'js'
        };
    });

Dj-jom2x on 4 Sep 2016

Still no success:

I am using Angular 2 RC 6, Material 2.0.0-alpha.8-1.

I have below packages in my package.json:

    "@angular2-material/button": "2.0.0-alpha.8-1",
    "@angular2-material/button-toggle": "2.0.0-alpha.8-1",
    "@angular2-material/card": "2.0.0-alpha.8-1",
    "@angular2-material/checkbox": "2.0.0-alpha.8-1",
    "@angular2-material/core": "2.0.0-alpha.8-1",
    "@angular2-material/grid-list": "2.0.0-alpha.8-1",
    "@angular2-material/icon": "2.0.0-alpha.8-1",
    "@angular2-material/input": "2.0.0-alpha.8-1",
    "@angular2-material/list": "2.0.0-alpha.8-1",
    "@angular2-material/menu": "2.0.0-alpha.8-1",
    "@angular2-material/progress-bar": "2.0.0-alpha.8-1",
    "@angular2-material/progress-circle": "2.0.0-alpha.8-1",
    "@angular2-material/radio": "2.0.0-alpha.8-1",
    "@angular2-material/sidenav": "2.0.0-alpha.8-1",
    "@angular2-material/slider": "2.0.0-alpha.8-1",
    "@angular2-material/slide-toggle": "2.0.0-alpha.8-1",
    "@angular2-material/tabs": "2.0.0-alpha.8-1",
    "@angular2-material/toolbar": "2.0.0-alpha.8-1",
    "@angular2-material/tooltip": "2.0.0-alpha.8-1",

in AppModule I have first imported the below required modules:

import { MdCoreModule } from '@angular2-material/core/core';
import { MdCheckboxModule } from '@angular2-material/checkbox/checkbox';
import { MdProgressBarModule } from '@angular2-material/progress-bar/progress-bar';
import { MdRadioModule, MdUniqueSelectionDispatcher } from '@angular2-material/radio/radio';
import { MdSlideToggleModule } from '@angular2-material/slide-toggle/slide-toggle';
import { MdTabsModule } from '@angular2-material/tabs/tabs';

then added below in the imports list:

    imports: [
        ....
        // Material Design
        MdCoreModule.forRoot(),
        MdCheckboxModule.forRoot(),
        MdRadioModule.forRoot(),
        MdSlideToggleModule.forRoot(),
        MdTabsModule.forRoot(),
        MdProgressBarModule.forRoot(),
        ....
    ],

in Providers:

providers: [
        MdUniqueSelectionDispatcher
]

In my SystemJs Config file I have:

    var map = {
        'app': 'content/app',
        'rxjs': 'node_modules/rxjs',

        // angular bundles
        '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
        '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
        '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
        '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
        //Material
        '@angular2-material': 'node_modules/@angular2-material',
        'angular2-masonry": "node_modules/angular2-masonry'
    }; 

var paths = {
        "masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js"
    };

var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-masonry': { defaultExtension: 'js', main: "index" }
    };

var components = [
        'core',
        'button',
        'card',
        'checkbox',
        'grid-list',
        'icon',
        'input',
        'list',
        'progress-bar',
        'progress-circle',
        'radio',
        'sidenav',
        'slide-toggle',
        'tabs',
        'toolbar'
    ];

    components.forEach(function (Material_PKG) {
        packages[("@angular2-material/" + Material_PKG)] = {
            format: 'cjs',
            main: Material_PKG + '.umd.js',
            defaultExtension: 'js'
        };
    });

    var config = {
        map: map,
        packages: packages,
        paths: paths
    };

    System.config(config);

naveedahmed1 on 4 Sep 2016

me i just import MaterialModule because it keeps my code cleaner
also /core/core is no good .. do /core only ... and also i rebuild it by cloning it and not depending on release one's

try to clone the rep .. then type
npm install
gulp serve:release

and don't forget to clear cache

import { NgModule ,Renderer} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {AppComponent}  from './app.component';
import {CustomModal}  from './system/modal.system';
import {MaterialModule} from '@angular2-material/all';
import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';


@NgModule({
  imports:[BrowserModule,MaterialModule.forRoot(), ModalModule.forRoot(),BootstrapModalModule,FormsModule ],
  declarations:[AppComponent,CustomModal],
  providers:[
      {provide:Renderer,useValue:null},
  ],
  entryComponents:[AppComponent,CustomModal],
  bootstrap:[AppComponent]

})
export class AppModule { }

and about "useValue:null" thingy due to phpstorm likes that way xD i hate red lint

Dj-jom2x on 4 Sep 2016

@naveedahmed1 near the bottom of your SystemJS Config file you set paths: paths. Where is that value coming from? And what error do you get? A 404 not found?

RoxKilly on 4 Sep 2016

@RoxKilly yes its there, I forgot to mention in my comment. Please have a look at my updated comment above.

naveedahmed1 on 4 Sep 2016

@naveedahmed1 you have angular2 rc8? where did you get that .. i only know rc6 is the latest one

@lessthan1 you must really upgrade on the latest rc release don't stay at rc4 :+1:

do you have a live server ? ... traceur.js will only appear if don't follow the system.js.config instruction part "precisely" let's debug it step by step .. like for instance

you don't "@angular2-material/core/core"
you need "@angular2-material/core"

you will get "Error: SyntaxError: Unexpected token import" if you do that .

in order to replicate your issue here's the example that makes rc6 show the same error on your screen shot. rc4 and rc6 there's a big gap to them called "deprecated" that may lead to your traceur case.. so to make this error show

zone.js:101 GET http://sc-mgr.io/traceur 404 (Not Found)

if you duplicate how the angular2-quickstart load package

function Material_Loader(Material_PKG) {
        packages['@angular2-material/' + Material_PKG] = {
            main: Material_PKG + '.js',
            defaultExtension: 'js'
        };
    }
    var setMaterialPackageConfig = Material_Loader;
    materialPackageNames.forEach(setMaterialPackageConfig);

but you're not ..

instead you have this

 materialPackageNames.forEach(function (Material_PKG) {
        packages[("@angular2-material/" + Material_PKG)] = {
            format: 'cjs',
            main: Material_PKG + '.umd.js',
            defaultExtension: 'js'
        };
    });

and if you want a supress the error ... ( TRACEUR IS 1.364 MB IT MAKES YOUR APP BOOT SLOW )

zone.js:101 GET http://sc-mgr.io/traceur 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:345Zone.scheduleMacroTask @ zone.js:282(anonymous function) @ zone.js:122send @ VM1524:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:607(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
(index):18 Error: Error: XHR error (404 Not Found) loading http://sc-mgr.io/traceur
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://sc-mgr.io/node_modules/zone.js/dist/zone.js:794:30)
        at ZoneDelegate.invokeTask (http://sc-mgr.io/node_modules/zone.js/dist/zone.js:365:38)
        at Zone.runTask (http://sc-mgr.io/node_modules/zone.js/dist/zone.js:265:48)
        at XMLHttpRequest.ZoneTask.invoke (http://sc-mgr.io/node_modules/zone.js/dist/zone.js:433:34)
    Error loading http://sc-mgr.io/traceur
    Error loading http://sc-mgr.io/node_modules/@angular2-material/all/all.js as "@angular2-material/all" from http://sc-mgr.io/core_js/app.module.js

you need to install traceur
npm install traceur --save

var packages = {
       ..
        'traceur': { main: 'traceur.js' ,defaultExtension: 'js' },
       ..
    };

var map = {

        'traceur': 'node_modules/traceur/bin',

    };

Dj-jom2x on 4 Sep 2016

@Dj-jom2x Even I have the same error. Install 'traceur' but still have the same problem.
zone.js: GET http://sc-mgr.io/traceur 101 404 (Not Found).
Any other ideas?

dmiguel942 on 7 Sep 2016

Got it solved! If anyone is still struggling, please have a look at http://stackoverflow.com/questions/39334852/angular-2-rc-6-material-2-alpha-8-not-working/39359913#39359913

naveedahmed1 on 8 Sep 2016

@dmiguel942 i already said the fix

read this
https://github.com/angular/material2/issues/1174#issuecomment-244591923

then

import { MaterialModule } from '@angular2-material/all';


@NgModule({
  imports:[
 ..
      MaterialModule.forRoot(),
      ..
  declarations:[
    ..
  providers:[
...
  ],
  entryComponents:[
      ...

})

i compiled the source code that's why i got the all package thing if you dont have you can mport manually

import { MdButtonModule } from '@angular2-material/button';


@NgModule({
  imports:[
 ..
      MdButtonModule.forRoot(),
      ..
  declarations:[
    ..
  providers:[
...
  ],
  entryComponents:[
      ...

})

Dj-jom2x on 8 Sep 2016

I guess i can close this now. Worked for me.

lessthan1 on 8 Sep 2016

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._}