Angular CLI about angular2-materialize HOT 11 CLOSED

Maybe you can share your repository to check it out?
It's difficult without the context of how the project is set up, dependency-wise - e.g. transpiling with webpack or SystemJS, local or CDN dependencies, etc.

from angular2-materialize.

@rubyboy Here is a zip of the project. It looks like they are using SystemJS, but the configuration is quite odd. I couldn't figure it out based on your docs and the craziness the generator made.

https://drive.google.com/file/d/0B68aZqcn2sxXMUlpRmxMeGFXdEU/view?usp=sharing

Here is what I used to generate the project if it helps:
https://github.com/angular/angular-cli

from angular2-materialize.

+1 Having the same issue with figuring out how to set up angular-cli with angular2-materialize.

I threw the System.config files where I thought they went, called "ng build" and "ng serve", but no materialize unfortunately.

I have had some luck by directly putting the scripts and links into the index.html as seen in my repo, but I would prefer not to do that as I feel it does not take advantage of Angular's capabilities.

I am no expert to angular2 or angular-cli, so any sort of hint / help would be very much appreciated.

The Github repo I have set up can be found here.

from angular2-materialize.

Can you try this?

index.html:

<link type="text/css" rel="stylesheet" href="vendor/materialize-css/dist/css/materialize.css"/>
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

angular-cli-build.js :

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      // ...
      "jquery/dist/*",
      "angular2-materialize/dist/*",
      "materialize-css/dist/**/*"
    ]
  });
};

system-config.ts :

cliSystemConfigPackages["materialize"] = {
  "format": "global",
  "main": "dist/js/materialize",
  "defaultExtension": "js"
};
cliSystemConfigPackages["angular2-materialize"] = {
  "main": "dist/index",
  "defaultExtension": "js"
};
// ...
System.config({
  map: {
    // ...
    "materialize": "vendor/materialize-css",
    "angular2-materialize": "vendor/angular2-materialize",
    "jquery": "vendor/jquery"    
  },
  packages: cliSystemConfigPackages
});

If this works then the only open issue above is the jQuery&CSS dependencies that are specified in the HTML. Need to find a nice way to configure SystemJS to bring them in automatically. I tried using "meta" and "deps" in the config, but that didn't works. Not sure why, though as this is exactly how it's done with JSPM (JSPM SystemJS override for MaterializeCSS)

from angular2-materialize.

I tried the above changes, but am still having problems getting the javascript for materialize to work properly. However, the links do work properly for the CSS, so all the CSS elements are loading in correctly.

The repo posted before has my updated code with the fixes you recommended.

Thanks for your help so far.

from angular2-materialize.

@rubyboy I tried the code you suggested and it worked great. Thanks!! I cannot attest to all the JS code working, but I added the accordion example and had no issues.

from angular2-materialize.

@JoshuaNovak919 glad it worked for you.

@chinchalupa is there a specific component that doesn't work or is it the loading of JS files the problem?
If your repo has it reproduced let me know and I'll check that out.

I'll add the config with CLI notes to the README later this week. Probably could use a demo repo for all variants of build systems. Help welcome :)

from angular2-materialize.

Yes, the repo I posted before has the issue. To run it, just clone it, npm install, ng build, and ng serve. I am using a Windows machine.

I have been trying to get the list accordion to work that should display at the base route. I have not tested other components yet.

Thanks for taking the time to check out the repo.

from angular2-materialize.

Fixed the issue!

It was on my end because I forgot to include the MaterializeDirective in the directives.

So I too can confirm that this configuration works for the accordion example (and most likely other examples).

@rubyboy thanks for your help!

from angular2-materialize.

@rubyboy I'll make a demo repo if you'd like. Still a bit new to Angular2 etc, so you'd wanna check it. If you want me to, just let me know what you want in the demo.

from angular2-materialize.

@JoshuaNovak919 thanks for offering to create a demo repo. That would be awesome!
I think it can have a small collection of two or three MaterializeCSS components (buttons, accordion, etc.). The main thing to demo is the configuration so the rest should be minimal.
If there's a popular starter repo for the CLI you could take that and fork it to be a starter+Materialize. I did a similar thing for Webpack with the angular2-webpack-starter (although I didn't really document it. I should!).
Let me know when you've got it and I'll review and add a link to it from this repo, for people to follow when they have a similar setup.
Again, thanks heaps for contributing.

from angular2-materialize.