Error after importing @angular/material": "^2.0.0-beta.8"

[ravivit9]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see use [gitter](https://gitter.im/mgechev/angular2-seed) or [stackoverflow](https://stackoverflow.com/questions/tagged/angular2)

Current behavior
After downloading the seed it worked fine. When installed material design beta8 version I started getting this error

Expected behavior
Runtime error as below screenshot.

Minimal reproduction of the problem with instructions
Import material2 design in home.module.ts to get this error.

What is the motivation / use case for changing the behavior?
To make use of material2 design with angular-seed.

Please tell us about your environment:
Mac, npm, Webstorm.

• Angular Seed Version: aaaaf75
  angular-seed (downloaded today 23-jul-2017)
  Last commit: facd075 / facd075

Node: v6.11.0

Added the following on top of existing angular-seed code. No change to the code done yet.

app.module.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ............
............

home.component.html

<md-card> <md-slide-toggle class="example-margin"> Slide me! </md-slide-toggle> </md-card> ............
............

home.module.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MdSliderModule, MdSlideToggleModule } from '@angular/material';
............
............

`@NgModule({
imports: [ HomeRoutingModule, SharedModule,
BrowserModule,
BrowserAnimationsModule,
FormsModule,
//MdNativeDateModule,
ReactiveFormsModule,
],
exports: [HomeComponent, MdSliderModule, MdSlideToggleModule]
bootstrap: [HomeComponent],
providers: [NameListService]
})

export class HomeModule { }
platformBrowserDynamic().bootstrapModule(HomeModule);`

[adibb83]

same for me

[ravivit9]

downloaded ng4-material seed which worked well along with angular but may not have all features as equivalent to angular-seed repo. I really like this repo as it's well maintained to recent.

Just create >>> ng new ng4-material and follow the instruction from the link. Config wise not much change I found between my project and ng4-material project.
https://coursetro.com/posts/code/67/Angular-4-Material-Tutorial

[zladuric]

@ravivit9 Did you add the link to umd (or whatever) in project.config?

Take a look at: https://github.com/mgechev/angular-seed/wiki/Add-external-dependency and https://github.com/mgechev/angular-seed/wiki/Add-external-scripts-and-styles

[vyakymenko]

Hi @ravivit9 ,

Let's try step-by-step:

1. Install main packages:

$  npm install @angular/material @angular/cdk material-design-lite hammerjs --save

2. Configure project.config.ts:

...
import { ExtendPackages } from './seed.config.interfaces';

...

    // Add `NPM` third-party libraries to be injected/bundled.
    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
      {src: 'material-design-lite/dist/material.js', inject: 'libs'}
      // {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
      // {src: 'lodash/lodash.min.js', inject: 'libs'},
    ];
.....

    // Add packages (e.g. ng2-translate)
    let additionalPackages: ExtendPackages[] = [
      {
        name: '@angular/material',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },{
        name: '@angular/cdk',
        path: 'node_modules/@angular/cdk/bundles/cdk.umd.js'
      },{
        name: 'hammerjs',
        path: 'node_modules/hammerjs/hammer.js'
      }
    ];

    this.addPackagesBundles(additionalPackages);
....
}

3. Configure app.module.ts:

...
import 'hammerjs';

4. Configure shared.module.ts:

...

import { MdButtonModule } from '@angular/material';
...

@NgModule({
  imports: [CommonModule, RouterModule,
    MdButtonModule],
  declarations: [ToolbarComponent, NavbarComponent],
  exports: [ToolbarComponent, NavbarComponent,
    CommonModule, FormsModule, RouterModule,
    MdButtonModule]
})
...

5. Configure index.html for example:

...
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-light_green.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
...

6. Last thing, we need to verify everything home.component.html:

...
<!--<button type="submit">Add</button>-->
  <button md-button type="submit">
    Add
  </button>
....

[vyakymenko]

@mgechev , I think we can close this issue.

[ravivit9]

just implemented as guided above. Got an error after running
The selector "sd-home" did not match any elements

[ravivit9]

BTW, thanks for the step by step guidance. Once the above error sorted out then will be good to go.

[vyakymenko]

@ravivit9 , show me your index.html page body.

[ravivit9]

`

Loading...

<script defer> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', '<%= GOOGLE_ANALYTICS_ID %>', 'auto'); ga('send', 'pageview'); </script> <script> // Fixes undefined module function in SystemJS bundle function module() {} </script>

<% if (BUILD_TYPE === 'dev') { %>

<script src="<%= APP_BASE %>system-config.js"></script>

<% } %>

<% if (BUILD_TYPE === 'dev') { %>

<script> System.import('<%= BOOTSTRAP_MODULE %>') .catch(function (e) { console.error(e.stack || e, 'Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issues'); }); </script>

<% } %>

`

[vyakymenko]

@ravivit9 , what tag is used in Loading.... Please show code, not plain text.
Also, you tried on clean installation?

[ravivit9]

It's from app.component.ts file
`import { Component } from '@angular/core';
import { Config } from './shared/config/env.config';
import './operators';

/**

• This class represents the main application component.
  */
  @component({
  moduleId: module.id,
  selector: 'sd-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  })
  export class AppComponent {
  constructor() {
  console.log('Environment config', Config);
  }
  }
  `

[vyakymenko]

@ravivit9 , if you will configure clean installation with my steps, all will work fine. Also, please learn MD text formatting.

[ravivit9]

Removed node_modules, did npm cahce clean --force, now installing all modules in package.json.
Sure will have a look MD text formatting.

[ravivit9]

Still the same error, give me sometime i will download angular-seed again in another directory and try to implement the above.

[ravivit9]

Downloaded angular-seed in another directory and tried the above steps which resulted in my original error screenshot, not sure what's missing.

[vyakymenko]

@ravivit9 , and you have done all steps?

[ravivit9]

Yes i have done all the above steps. the fresh app worked fine before doing the project.config.ts change afterwards the above error occurred.

1. Downloaded angular-seed
2. cd angular-seed
3. npm install
4. yarn install
5. npm start ( which worked fine as I can see the default output in browser)

---

6. Started performing the above suggested points and saved the project.
7. The above error occurred.

[vyakymenko]

@ravivit9 ,

[ravivit9]

I did exactly the same but only one difference.
I did npm install first then yarn install and then the following
npm install @angular/material @angular/cdk material-design-lite hammerjs --save

Will it make any difference? If so I am happy to redo it once again.

[vyakymenko]

@ravivit9 , please look in screens and steps. Also, please learn about yarn and npm.

I did npm install first then yarn install and then the following

[ravivit9]

I again removed node_modules and cleared the npm cache with --force option.

Then npm install material-design-lite hammerjs --save

After which did a "npm install" and when i tried to run "npm start" it gave me an error so executed "yarn install" then "npm start" which worked fine.

Now I can see the website without any error.

Only thing is I wanted to use the angular/material2 instead of material-design-lite as I have a project already using angular/material2 but I wanted to use angular-seed as my primary base project.

Thank you so far @vyakymenko

[ravivit9]

Included material design2 js and css to the project.config.js and other changes as per the below screenshot. Looks like the MD2 styling not applied.

[vyakymenko]

@ravivit9 , it's not a seed issue, it's your own development issue.

[ravivit9]

ok. Thanks for your involvement in sorting out this issue. I will investigate further on this how to use MD2.

I am happy to close this ticket, if anything related to seed I will create a ticket.

[michelcve]

Syntax error, unexpected token '<' usually means some kind of path problem. Browser is loading HTML instead of javascript. To identify which file went wrong, simply look at the 'network' tab, and see which .js file spitted out html instead of javascript.

I also believe there was a bug with Zone.js 0.8.13 what resulted in something similar, but I'm not sure about that. But use the latest zone.js (0.8.16 at the time of writing) just to be sure ;-).

For your information, we are using Material Design 2 library with this project without issues, so it is possible.

[ravivit9]

Thanks for your update michelcve. Will have a look and update you accordingly.

[ravivit9]

Just to update where I am now.

I have updated all npm libraries to make sure I have up to date libraries.

I believe there this.NPM_DEPENDENCIES is unable or not configured to find the route path in project.config.js. When I included the following css file the final output not importing the css mentioned.
this.NPM_DEPENDENCIES = [
...this.NPM_DEPENDENCIES,
{src: '@angular/material/@angular/material.js', inject: 'libs'},
{src: '@angular/material/prebuilt-themes/indigo-pink.css', inject: 'true'}
];

Then I included the following in the index file which loaded the indigo css property and styles appeared properly.

Similarly the @angular/material/@angular/material.js is still not loaded properly hence the token error in the console. But in Network tab I don't find any error and material.js not being loaded in network tab.

After

[michelcve]

You should include the css like this:
{src: '@angular/material/prebuilt-themes/indigo-pink.css', inject: true},

And replace the CSS from css/main.css with something like this (original css gets in the way for material's css):

body {
    font-family: Roboto,"Helvetica Neue",sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

Remove the {src: '/.js', inject: 'libs'}, too btw... As far as I know, it doesn't belong there. Material bundle should be added via addPAcakgesBundles like this:

    this.addPackagesBundles(
        [
          {
            name:'@angular/material',
            path:'node_modules/@angular/material/bundles/material.umd.js',
            packageMeta:{
              //main: 'index.js',
              defaultExtension: 'js'
            }
          },
          {
            name:'@angular/cdk',
            path:'node_modules/@angular/cdk/bundles/cdk.umd.js',
            packageMeta:{
              //main: 'index.js',
              defaultExtension: 'js'
            }
          },
        ]
    );

[ravivit9]

Sorry, just noticed the path was truncated after inputting.
The config looks like this.

I believe either the above path is getting overwritten or not being loaded at all.

[michelcve]

Can't you copy paste in a code block, instead of using images?

anyway, get rid of the
{src: '@angular/material/@angular/material.js', inject: 'libs'}

[michelcve]

And read this:

https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularMaterial2

[ravivit9]

Thanks for your response.

Yes I did copied the actual code and after posting the comment part of the path disappeared. That's the reason I took an image. Infact I should have copied the code within the script quote.

this.NPM_DEPENDENCIES = [ ...this.NPM_DEPENDENCIES, {src: '@angular/material/prebuilt-themes/indigo-pink.css', inject: 'true'} ];

`

let additionalPackages: ExtendPackages[] = [
  {
    name: '@angular/material',
    path: 'node_modules/@angular/material/bundles/material.umd.js',
    packageMeta:{
      defaultExtension: 'js'
    }
    //path: '../../node_modules/@angular/material/@angular/material.js'
  },{
    name: '@angular/cdk',
    path: 'node_modules/@angular/cdk/bundles/cdk.umd.js',
    packageMeta:{
      defaultExtension: 'js'
    }
  },{
    name: 'hammerjs',
    path: 'node_modules/hammerjs/hammer.js',
    packageMeta:{
      defaultExtension: 'js'
    }
  }
];

this.addPackagesBundles(additionalPackages);

`

After removing the material.js and I removed the css link from index file. Then did a npm start to reload everything, this time no token error but the styling have gone which means the above NPM_DEPENDENCIES not taking effect. Then added css file in index file again then it worked.

[michelcve]

Did you clean out your main.css like I said?

[ravivit9]

Pretty much deleted all entries and copied yours.

[michelcve]

Well, then I don't know. You must have an error somewhere else.

I'm using the CSS from the NPM_DEPENDENCIES, and it's working fine. And our application is using quite a few component from Material Design 2 I must say ;-)

[michelcve]

You could check you network tab, and see if it's loaded.

[ravivit9]

Would you mind sharing the piece of code in NPM_DEPENDENCIES? If not, no issues.

[ravivit9]

Reason why I am after the NPM_DEPENDENCIES is because I would like to know the scope of it. As I have another project which is MD2 quite ok. I wanted to migrate my code base to angular-seed which I like very much. I still can include the material css in index file but I need to be careful about future dependencies which may occur around NPM_DEPENDENCIES.

May be I will create a github temp seed with the changes and if you have time to have a look that would be great.

[michelcve]

This is my full NPM_DEPENDENCIES:

    // Add `NPM` third-party libraries to be injected/bundled.
    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
      /* Select a pre-built Material theme */
      {src: '@angular/material/prebuilt-themes/indigo-pink.css', inject: true},
    ];

If you look for a starter project, with this seed, and Material Design 2 included, look here (it's not mine)

[michelcve]

And you should have had something like this in your network tab:

indigo-pink.css?1501849246375

So there is definitely something broken in your project. My suggestion? Create a new empty project, and follow there instructions here. And also clean out the main.css as I mentioned before.

Or use the started project I mentioned in my previous post.

[ravivit9]

I have created brand new two angular-seed project after opening this ticket without any major change to the code base and followed the instructions as well.

Now I have created another new project with the link you suggested and giving it a try. Will update once I have done that.

[ravivit9]

Did the following

1. git clone from https://github.com/Karasuni/angular-seed
2. npm install
3. yarn install
4. npm start.

ALL WORKED FINE.
5) npm installed @angular/material, cdk, hammerjs
updated the project.config.js as per the guidelines

6. Added the following code in tools/shared.module.ts

`
@NgModule({
imports: [CommonModule, RouterModule, MdButtonModule
],
declarations: [ToolbarComponent, NavbarComponent],
exports: [ToolbarComponent, NavbarComponent,
CommonModule, FormsModule, RouterModule, MdButtonModule
]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [NameListService]
};
}
}

`

All I did was added MdButtonModule to the shared module file. Then did a npm start to reload all the changes. Now I can see the same console error.

No major changes to the app. I have spent more than a week to figure it and and a good amount of time of other helpful group members as well. But unfortunately I was not able to use this great seed in my project.

[ravivit9]

In fact even with the original angular-seed download I did changes only up to this much.

[mgechev]

For support requests you can use gitter or take a look at project's the wiki page in order to get more complete idea on how the it works.

[ravivit9]

I pretty much understood how the seed works and it is also configurable, but when things won't work as expected with no clue it is becoming bit of a hassle.

I appreciate a whole community is working towards bringing this great seed to developers. Probably me being unlucky as I tried in various different was to use angular-seed with MD2 including strictly following the instructions which is clear enough to understand and implement.

So far I have created in 5 different was to use in combination with MD2, no luck so far.

At the moment I am using ng4-material seed but it doesn't have the advanced modularisation and configurable approach to it. Hence thought of trying angular-seed. But even a single MD2 module is not being imported and added to the app.

Hopefully someone may fork a angular-seed-MD2 version.

Thanks a lot for all of your help.

[ravivit9]

I have just uploaded my work under my github id.
https://github.com/ravivit9/angular-seed-new

[sparachi]

@ravivit9 see if this helps

#1996 (comment)