Missing Typescript mapping of Angular Material && SystemJS && Angular2

1
votes

I used:

  • angular-cli
  • angular 2
  • typescript
  • systemjs

I want to add: angular material

I think the Problem is:

  • the mappings is not working/not importing

The error - The typescript compiler can not map the type

I have no typescript XP, first steps with it.

angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      '@angular2-material/**/*'
    ],
    sassCompiler: {
      includePaths: [
        'src/app'
      ]
    }
  });
};

system-config.ts

/** Map relative paths to URLs. */
const map: any = {
  '@angular2-material': 'vendor/@angular2-material',
};

/** User packages configuration. */
const packages: any = {
  // add missing material elements as desired
};
const materialPkgs:string[] = [
  'core',
  'button',
  'card'

];

materialPkgs.forEach((pkg) => {
  packages[`@angular2-material/${pkg}`] = { main: `${pkg}.js`,
                                            format: 'cjs',
                                            defaultExtension: 'js'};
});
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/index',
  'app/navigation',
  'app/header',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map,
                packages
});

my Component to use material

import { Component, OnInit } from '@angular/core';
import { MdButtonModule } from '@angular2-material/button';

@Component({
      moduleId: module.id,
      selector: 'app-index',
      templateUrl: 'index.component.html',
      imports: [ MdButtonModule ],
      styleUrls: ['index.component.css']
})
export class IndexComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

The error i got when i run ng serve:

lehrer git:(master) ✗ ng build
Could not start watchman; falling back to NodeWatcher for file system events.
  Visit http://ember-cli.com/user-guide/#watchman for more info.
  Build failed.
  The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/src/app/component/index/index.component.ts (9, 3): Argument of type '{ moduleId: string; selector: string; templateUrl: string; imports: typeof MdButtonModule[]; styl...' is not assignable to parameter of type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'.
  Object literal may only specify known properties, and 'imports' does not exist in type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'.
/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/src/typings.d.ts (2, 1): File '/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/node_modules/@angular2-material/core/core.d.ts' not found.
/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/src/typings.d.ts (3, 1): File '/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/node_modules/@angular2-material/button/button.d.ts' not found.
/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/src/typings.d.ts (4, 1): File '/Users/mrx/Documents/project/learn/angular2/lehrer/tmp/broccoli_type_script_compiler-input_base_path-7Qnz5kDV.tmp/0/node_modules/@angular2-material/card/card.d.ts' not found.
  at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
at BroccoliTypeScriptCompiler.build (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
at /Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
at lib$rsvp$$internal$$tryCatch (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1019:11)
at lib$rsvp$asap$$flush (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:419:9)
at process._tickCallback (node.js:348:13)

The broccoli plugin was instantiated at:
  at BroccoliTypeScriptCompiler.Plugin (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
at BroccoliTypeScriptCompiler (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:27:10)
at Angular2App._getTsTree (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/angular2-app.js:331:18)
at Angular2App._buildTree (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/angular2-app.js:124:23)
at new Angular2App (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
at module.exports (/Users/mrx/Documents/project/learn/angular2/lehrer/angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
at new Class (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
at /Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
at lib$rsvp$$internal$$tryCatch (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at /Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (/Users/mrx/Documents/project/learn/angular2/lehrer/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

npm --version 3.9.2

node --version v4.2.6

1
typescriptsystemjsangular-cliangular-material2

1 Answers

1
votes

Angular-CLI has moved from SystemJS to Webpack.

Thus the instructions now are quite a bit different. I'm posting the contents of the Getting Started Guide here to improve the quality of this answer by not only including a link.

Get started with Angular Material 2 using the Angular CLI.

Install the CLI

bash npm install -g angular-cli

Create a new project

bash ng new my-project

The new command creates a project with a build system for your Angular app.

Install Angular Material components

bash npm install --save @angular/material

Import the Angular Material NgModule

src/app/app.module.ts ts import { MaterialModule } from '@angular/material'; // other imports @NgModule({ imports: [MaterialModule.forRoot()], ... }) export class PizzaPartyAppModule { }

Include the core and theme styles:

This is required to apply all of the core and theme styles to your application. You can either use a pre-built theme, or define your own custom theme.

:trident: See the theming guide for instructions.

Additional setup for gestures

Some components (md-slide-toggle, md-slider, mdTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

bash npm install --save hammerjs

After installing, import HammerJS on your app's module. src/app/app.module.ts ts import 'hammerjs';

Configuring SystemJS

If your project is using SystemJS for module loading, you will need to add @angular/material to the SystemJS configuration:

js System.config({ // existing configuration options map: { ..., '@angular/material': 'npm:@angular/material/bundles/material.umd.js' } });

[Optional] Using Material Design icons with md-icon:

  • If you want to use Material Design icons in addition to Angular Material components, load the Material Design font in your index.html.
    md-icon supports any font icons or svg icons, so this is only one option for an icon source.

src/index.html html <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Sample Angular Material 2 projects