Angular 角度2 RC 6材料2 Alpha 8不工作_Angular_Angularjs Directive_Angular Material2_Angular2 Material

Angular 角度2 RC 6材料2 Alpha 8不工作

angular

Angular 角度2 RC 6材料2 Alpha 8不工作,angular,angularjs-directive,angular-material2,angular2-material,Angular,Angularjs Directive,Angular Material2,Angular2 Material,我最近将我的项目升级为Angular 2 RC 6和Material 2.0.0-alpha.8-1，但它不起作用，有人能告诉我这里缺少什么吗？有人能和Angular 2 RC 6和Material 2.0.0-alpha.8-1共用一个工作弹头吗我的package.json中有以下包： "@angular2-material/button": "2.0.0-alpha.8-1", "@angular2-material/button-toggle": "2.0.0-alpha.8-1", "

我最近将我的项目升级为Angular 2 RC 6和Material 2.0.0-alpha.8-1，但它不起作用，有人能告诉我这里缺少什么吗？有人能和Angular 2 RC 6和Material 2.0.0-alpha.8-1共用一个工作弹头吗

我的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",

在AppModule中，我首先导入了以下必需的模块：

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

然后在导入列表中添加以下内容：

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

在供应商中：

providers: [
        MdUniqueSelectionDispatcher
]

在我的SystemJs配置文件中，我有：

var map = {
    '@angular': 'node_modules/@angular',
    '@angular2-material': 'node_modules/@angular2-material',

    'rxjs': 'node_modules/rxjs',

    'app': 'content/app',
    "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 angularPackages = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'forms'
];

angularPackages.forEach(function (name) {
    packages['@angular/' + name] = {
        format: 'cjs',
        main: 'bundles/' + name + '.umd.js', defaultExtension: 'js'
    };
});

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

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

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

    System.config(config);

以下是我运行应用程序时控制台上显示的错误消息：

43 Error: SyntaxError: Unexpected token import
at Object.eval (http://localhost:57196/content/app/app.module.js:16:14)
at eval (http://localhost:57196/content/app/app.module.js:328:4)
at eval (http://localhost:57196/content/app/app.module.js:329:3)
Evaluating http://localhost:57196/node_modules/@angular2-material/core/core.js
Evaluating http://localhost:57196/content/app/app.module.js
Evaluating http://localhost:57196/content/app/main.js
Error loading http://localhost:57196/content/app/main.js

修好了！如果有人仍在努力使Angular 2 RC 6 Material 2 Alpha 8在您的项目中运行，下面的配置可能会起作用

下面是我的SystemJS配置文件

(function (global) {
    var map = {
        //angular
        '@angular': 'node_modules/@angular',
        '@angular2-material': 'node_modules/@angular2-material',
        'rxjs': 'node_modules/rxjs',

        'app': 'content/app',

        //thirdparty
        "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 angularPackages = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'forms'
    ];

    angularPackages.forEach(function (name) {
        packages['@angular/' + name] = {
            format: 'cjs',
            main: 'bundles/' + name + '.umd.js',
            defaultExtension: 'js'
        };
    });

    var materialComponents = [
        'checkbox',
        'core',
        'progress-bar',
        'progress-circle',
        'radio',
        'sidenav',
        'slide-toggle',
        'tabs'
    ];

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

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

    System.config(config);

})(this);

@NgModule({
    imports: [
        //angular
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ReactiveFormsModule,
        routing,

        //material
        MdCheckboxModule.forRoot(),
        MdRadioModule.forRoot(),
        MdSlideToggleModule.forRoot(),
        MdTabsModule.forRoot(),
        MdProgressBarModule.forRoot(),
        MdProgressBarModule.forRoot()
//.....
    ],

应用模块

导入

//angular
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Http, XHRBackend, HttpModule, RequestOptions, JsonpModule } from '@angular/http';
import { NgModule } from '@angular/core';

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

在NgModule中导入

(function (global) { var map = { //angular '@angular': 'node_modules/@angular', '@angular2-material': 'node_modules/@angular2-material', 'rxjs': 'node_modules/rxjs', 'app': 'content/app', //thirdparty "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 angularPackages = [ 'common', 'compiler', 'core', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'forms' ]; angularPackages.forEach(function (name) { packages['@angular/' + name] = { format: 'cjs', main: 'bundles/' + name + '.umd.js', defaultExtension: 'js' }; }); var materialComponents = [ 'checkbox', 'core', 'progress-bar', 'progress-circle', 'radio', 'sidenav', 'slide-toggle', 'tabs' ]; materialComponents.forEach(function (name) { packages[("@angular2-material/" + name)] = { format: 'cjs', main: name + '.umd.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages, paths: paths }; System.config(config); })(this);

@NgModule({ imports: [ //angular BrowserModule, FormsModule, HttpModule, JsonpModule, ReactiveFormsModule, routing, //material MdCheckboxModule.forRoot(), MdRadioModule.forRoot(), MdSlideToggleModule.forRoot(), MdTabsModule.forRoot(), MdProgressBarModule.forRoot(), MdProgressBarModule.forRoot() //..... ],
如果您正在使用收音机

providers: [ MdUniqueSelectionDispatcher ]

我将Material 2与'official'
systemjs.config.js
文件一起使用，但无法将其与
.js
桶一起使用
因此，我继续将它们映射到
.umd
文件，例如

map: { ... '@angular2-material/button': 'npm:@angular2-material/button/button.umd.js', '@angular2-material/card': 'npm:@angular2-material/card/card.umd.js', '@angular2-material/checkbox': 'npm:@angular2-material/checkbox/checkbox.umd.js', ... }

并删除了
程序包
部分中的相关条目。这对我来说是个好办法。
你能详细说明一下“它不起作用”吗？@Günter我已经更新了问题，并在问题末尾添加了错误消息，请看一看。我遇到了同样的问题。。。如何解决？最大的变化是什么？请看AppModule开头的导入。例如，@angular2 material//checkbox/checkbox应该是@angular2 material/checkbox。它始终是
@angular2 material/checkbox
。。至少在RC 6之前的正常情况下，我必须使用@angular2 material/checkbox/checkbox，但现在只使用@angular2 material/checkbox，RC6中还有其他重大变化吗@纳维德艾哈迈德