ng2-mdl and angular-cli

[alber70g]

Since it's (angluar-cli) now the most used way to start an angular2 project, it would be nice to add some guidelines on how to add it to the project that way. Do you know how to add it to an angular-cli project?

[sabbirrahman]

I haven't used angular-cli yet. I like the angular2-webpack-starter and used in some projects. I'll take a look at angular-cli and let you know.

[alber70g]

I have a feeling I'm close, but I get the following error:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'AppComponent'

This is what I did to a newly created angular-cli project (using ng new <projectname>):

Install ng2-mdl to angular-cli project

Install ng2-mdl using npm

$ npm install --save ng2-mdl

Add file reference angular-cli-build.js

vendorNpmFiles: [
  ...
  'ng2-mdl/**/*.+(js|js.map)'
]

Add library reference src/system-config.ts

/** User packages configuration. */
const packages: any = {
  ...
  'ng2-mdl': {
    format: 'systemjs',
    defaultExtensions: 'js',
    main: 'ng2-mdl.js'
  }
};

[alber70g]

I'm configuring now src/system-config.ts differently.

/** Map relative paths to URLs. */
const map: any = {
   'ng2-mdl': 'vendor/ng2-mdl/ng2-mdl.js'
};

/** User packages configuration. */
const packages: any = {
  'ng2-mdl': {
    format: 'cjs',
    defaultExtension: 'js'
  }
};

But this way I get errors because it's requiring these files. Notice that there's no .js at the end.

 http://localhost:4200/vendor/ng2-mdl/src/directives/mdl.directive 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-button/mdl-button.component 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-check-box/mdl-check-box.component 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-layout/mdl-layout.component 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-progress/mdl-progress.component 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-radio/mdl-radio.component 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-select/mdl-select.component 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-spinner/mdl-spinner.component 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-switch/mdl-switch.component 
 http://localhost:4200/vendor/ng2-mdl/src/components/mdl-text-field/mdl-text-field.component 

[sabbirrahman]

I've just published a new version (0.6.6) in npm with minor changes. Try updating to this version and let me know if this update solves your problem. I'm facing problem while trying to install angular-cli. May be something wrong with my internet or my PC.

[alber70g]

I think it should be working without the .js and I'm configuring something wrong. Because now the references from *.component.js aren't correct:

[sabbirrahman]

I've installed and configured ng2-mdl with angular-cli. Here's what I did:

In angular-cli-build.js

vendorNpmFiles: [
  ...
  'ng2-mdl/**/*.js'
]

In src/system-config.ts

/** Map relative paths to URLs. */
const map: any = {
  'ng2-mdl': 'vendor/ng2-mdl'
};

/** User packages configuration. */
const packages: any = {
  'ng2-mdl': {
    main: 'index.js' // or you can use ng2-mdl.js too.
  }
};

It worked for me so I hope it will work for you too.

[alber70g]

Thanks a lot 😄. It would be good to add these instructions to the Readme 👍