Getting Error Error: (SystemJS) Unexpected token <

munjalpandya commented 7 years ago

Bug, feature request, or proposal:

I upgraded to "@angular/material": "2.0.0-beta.11" but now getting an annoying error at run-time as given below.

munjalpandya commented 7 years ago

Below is my package.json

`{ "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi", "scripts": { "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", "lint": "tslint ./app/*/.ts -t verbose", "lite": "lite-server", "pree2e": "webdriver-manager update", "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", "test-once": "tsc && karma start karma.conf.js --single-run", "tsc": "tsc", "tsc:w": "tsc -w" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/common": "^4.4.3", "@angular/compiler": "^4.4.3", "@angular/core": "^4.4.3", "@angular/forms": "^4.4.3", "@angular/http": "^4.4.3", "@angular/platform-browser": "^4.4.3", "@angular/platform-browser-dynamic": "^4.4.3", "@angular/router": "^4.4.3",

"angular-in-memory-web-api": "0.2.4",
"systemjs": "0.19.40",
"core-js": "2.4.1",
"rxjs": "5.0.3",
"zone.js": "^0.8.4"

}, "devDependencies": { "concurrently": "3.2.0", "lite-server": "2.2.2", "typescript": "2.0.10",

"canonical-path": "0.0.2",
"tslint": "3.15.1",
"lodash": "4.16.4",
"jasmine-core": "2.4.1",
"karma": "1.3.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.0.2",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "4.0.14",
"rimraf": "2.5.4",

"@types/node": "6.0.46",
"@types/jasmine": "2.5.36",
"@angular/material": "2.0.0-beta.11",
"@angular/cdk": "2.0.0-beta.11",
"@angular/animations": "^4.4.3"

}, "repository": {} }`

Below is systemjs.config.js

`/**

System configuration for Angular samples

Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

    '@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',
    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
    '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
    '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
    '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
    '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
    '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
    '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
    '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
    '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
    '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
    '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
    //'@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
    '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',

    // other libraries
    'rxjs': 'npm:rxjs',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
    app: {
        main: 'main.js', defaultExtension: 'js'
    },
    rxjs: {
        defaultExtension: 'js'
    }
}

}); })(this);`

EdricChan03 commented 7 years ago

Show your main.ts and app.module.ts files please.

munjalpandya commented 7 years ago

app.zip

After minor modifications in my app.module, the given error is resolved, but now I am getting below error.

Unhandled Promise rejection: No ErrorHandler. Is platform module (BrowserModule) included? ; Zone: ; Task: Promise.then ; Value: Error: No ErrorHandler. Is platform module (BrowserModule) included? at eval (application_ref.ts:368) [angular] at Object.onInvoke (ng_zone.ts:296) [angular] at NgZone.run (ngzone.ts:153) [] at PlatformRef._bootstrapModuleFactoryWithZone (application_ref.ts:363) [] at eval (application_ref.ts:333) [] Error: No ErrorHandler. Is platform module (BrowserModule) included? at eval (http://localhost:54203/node_modules/@angular/core/bundles/core.umd.js:4532:23) [angular] at Object.onInvoke (http://localhost:54203/node_modules/@angular/core/bundles/core.umd.js:3922:33) [angular] at NgZone.run (http://localhost:54203/node_modules/@angular/core/bundles/core.umd.js:3853:69) [] at PlatformRef_._bootstrapModuleFactoryWithZone (http://localhost:54203/node_modules/@angular/core/bundles/core.umd.js:4527:23) [] at eval (http://localhost:54203/node_modules/@angular/core/bundles/core.umd.js:4569:59) []

EdricChan03 commented 7 years ago

You're missing an export at the first NgModule (app.module.ts).

@NgModule({
    exports: [
        CdkTableModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatStepperModule,
    ]
})
// There should be an export here
export class MaterialModule {}

josephperrott commented 6 years ago

Closing as this is not a bug within the library, but rather looks to be an issue in usage. If you need additional assistance in usage feel free to visit our docs site or stackoverflow to see if there is someone who can assist from the community.

ghost commented 6 years ago

@josephperrott broken link to docs site.......

angular-automatic-lock-bot[bot] commented 5 years ago

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

angular / components

Getting Error Error: (SystemJS) Unexpected token < #7571

Bug, feature request, or proposal: