Question

所以我按照本教程 - https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part?fid=1920478&df=90&mpp=50&sort=Position&spc=Relaxed&select=5432277&prof=True&view=Thread

到目前为止，每个人都做得很好。我试图添加材料2。

我在package.json中的隐私是：

"@angular/common": "4.4.1",
"@angular/compiler": "~4.4.1",
"@angular/core": "~4.4.1",
"@angular/forms": "~4.4.0",
"@angular/http": "~4.4.1",
"@angular/platform-browser": "~4.4.1",
"@angular/platform-browser-dynamic": "~4.4.1",
"@angular/router": "~4.4.1",
"@angular/material": "^2.0.0-beta.6",
"@angular/animations": "^4.3.0",
"@angular/cdk": "^2.0.0-beta.6",

然后，我在systemjs.config.js中创建了映射，如下所示：

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

创建映射后，所有类型都得到了解决，没有任何问题。然后，我将所有材料组件加载到一个名为material-component.module.ts

的模块中

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
    MdAutocompleteModule, MdButtonModule, MdCardModule, MdCheckboxModule, MdDatepickerModule, MdDialogModule,
    MdGridListModule, MdIconModule, MdInputModule, MdListModule,
    MdMenuModule, MdNativeDateModule, MdProgressBarModule, MdProgressSpinnerModule, MdRippleModule, MdSelectModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule, MdSnackBarModule, MdTabsModule, MdToolbarModule, MdTooltipModule
} from '@angular/material';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [],
    exports: [
        MdInputModule,
        MdTabsModule,
        MdIconModule,
        MdListModule,
        MdButtonModule,
        MdToolbarModule,
        MdDialogModule,
        MdMenuModule,
        MdGridListModule,
        MdCardModule,
        MdSnackBarModule,
        MdTooltipModule,
        MdSliderModule,
        MdAutocompleteModule,
        MdDatepickerModule,
        MdSlideToggleModule,
        MdSidenavModule,
        MdCheckboxModule,
        MdNativeDateModule,
        MdProgressBarModule,
        MdProgressSpinnerModule,
        MdSelectModule,
        MdRippleModule
    ]
})
export class MaterialComponentsModule { }

然后我最终将该模块加载到my app.module.ts。如图所示，一切都正常加载：

但是，当尝试加载实际页面以显示HTML时，我收到此错误：

(index):17 Error: Unexpected token <
Evaluating 
http://localhost:30815/node_modules/@angular/cdk/bundles/cdk.umd.js/a11y
Evaluating http://localhost:30815/app/core/material-components.module.js
Evaluating http://localhost:30815/app/app.module.js
Evaluating http://localhost:30815/app/main.js
Loading app
at eval (<anonymous>)
at evaluate (system.src.js:2822)
at system.src.js:3625
at dynamicExecute (system.src.js:1145)
at doEvaluate (system.src.js:1092)
at ensureEvaluate (system.src.js:1000)
at system.src.js:1018
at doEvaluate (system.src.js:1090)
at ensureEvaluate (system.src.js:1000)
at system.src.js:1018

我不能为了这个人的生活这一点。任何帮助将不胜感激 - 如果您还有其他需要，请说出来！

Answer 1

确保导入应用程序所需的所有模块：

@NgModule([
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        // And your other modules
    ]
]
export class AppModule {}

Angular / Material2 - 意外的标记＆lt;

1 个答案: