1

Here is my app.module.ts code. Im trying to create a messaging app but it does not run any angular material modules

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';
import { AppComponent }  from './app.component';
import { MessagesComponent} from './messages-component';


@NgModule({
  imports:      [ BrowserModule,MaterialModule],
  declarations: [ AppComponent, MessagesComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Here is my message-components.ts file

import { Component } from '@angular/core';
//this is a component a basic building block of angular this ,components run like trees

@Component({
    selector : 'messages',
    template : `

    <div *ngFor="let message of messages">

        <md-card>{{message.owner}}<md-card>
        {{message.text}} 

    </div>
    `

})
export class MessagesComponent {

    messages =[{text:'some text',owner:'Bruce'}, {text:'hello',owner:'Caleb'}];
}
//the template for the component, every component must have a template

Hers is my system.js file

'@angular/material': 'npm:@angular/material/bundles/material.umd.js'
    },

Here is my error message 0 info it worked if it ends with ok 1 verbose cli [ 'C:\Program Files\nodejs\node.exe', 1 verbose cli

'C:\\Users\\bruce\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 verbose lifecycle [email protected]~prestart: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]~prestart: PATH: C:\Users\bruce\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Users\bruce\Desktop\dev\messageboard\frontend\node_modules\.bin;C:\Program Files\Microsoft MPI\Bin\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;C:\Program Files\Anaconda3;C:\Program Files\Anaconda3\Scripts;C:\Program Files\Anaconda3\Library\bin;C:\Program Files\Git\cmd;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\nodejs\;C:\Users\bruce\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\bruce\AppData\Roaming\npm
8 verbose lifecycle [email protected]~prestart: CWD: C:\Users\bruce\Desktop\dev\messageboard\frontend
9 silly lifecycle [email protected]~prestart: Args: [ '/d /s /c', 'npm run build' ]
10 silly lifecycle [email protected]~prestart: Returned: code: 2  signal: null
11 info lifecycle [email protected]~prestart: Failed to exec prestart script
12 verbose stack Error: [email protected] prestart: `npm run build`
12 verbose stack Exit status 2
12 verbose stack     at EventEmitter.<anonymous> (C:\Users\bruce\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:289:16)
12 verbose stack     at emitTwo (events.js:125:13)
12 verbose stack     at EventEmitter.emit (events.js:213:7)
12 verbose stack     at ChildProcess.<anonymous> (C:\Users\bruce\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
12 verbose stack     at emitTwo (events.js:125:13)
12 verbose stack     at ChildProcess.emit (events.js:213:7)
12 verbose stack     at maybeClose (internal/child_process.js:921:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
13 verbose pkgid [email protected]
14 verbose cwd C:\Users\bruce\Desktop\dev\messageboard\frontend
15 verbose Windows_NT 10.0.15063
16 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\bruce\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
17 verbose node v8.2.1
18 verbose npm  v5.3.0
19 error code ELIFECYCLE
20 error errno 2
21 error [email protected] prestart: `npm run build`
21 error Exit status 2
22 error Failed at the [email protected] prestart script.
22 error This is probably not a problem with npm. There is likely additional logging output above.
23 verbose exit [ 2, true ]

Here is my index.html file

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
   <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>
5
  • What version of material are you using? Commented Jul 27, 2017 at 12:07
  • Did you add a theme file ? Commented Jul 27, 2017 at 17:20
  • I believe I'm using + @angular/[email protected] Commented Jul 27, 2017 at 18:16
  • Im linking my style sheet in the index.html fie as <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> Commented Jul 27, 2017 at 18:18
  • When I add the materials component chrome console states it cannot load angular/cdk Commented Jul 27, 2017 at 18:32

1 Answer 1

1

Latest angular2 and angular2-material have changed their way of systemjs setting

You can try following steps -

  • Add to your systemjs.config.js as:
map: {
  // our app is within the app folder
  app: 'app',
    :
    '@angular/material': 'npm:@angular/material/material.umd.js',
    :
}
  • change your app.module.ts:
from

@NgModule({
      imports:      [ BrowserModule, MaterialModule],
to

 @NgModule({
      imports:      [ BrowserModule, MaterialModule.forRoot()],
Sign up to request clarification or add additional context in comments.

1 Comment

I tried the solution it didn't work. Here is my error message

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.