2017-04-22 22 views
0

Angular 2プロジェクトでMaterializeを実行しようとしていますが、index.htmlファイルでJSファイルのソートに問題があると思います。私は角2のノードモジュールをインストールするには、NPMを使用していますAngular 2 with Materialize

は私が

<!DOCTYPE html> 
<html> 

<head lang="en"> 
    <base href="/"> 
    <title>Angular 2 Project</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 


    <link href="app/app.component.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> 
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" 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/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> 
    <!-- Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 

    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</head> 

<body> 
    <pm-app>Loading App...</pm-app> 
</body> 

</html> 

npm install 
npm install materialize-css 

Index.htmlとの角度2に必要なファイルをインポートし、materializecssするには、次のコマンドを使用しました

メイン.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
import "materialize-css"; 
import "angular2-materialize"; 

app.component.css私はMaterializeCSS min.cssのコンテンツを使用しています

私はこのプロジェクトをコンパイルするためにVisual Studio Codeを使用しています。

このプロジェクトをブートストラップからマテリアライズに変換しようとしています。必要な場合は、新しいプロジェクトを開始し、必要なコードをすべてインポートするだけです。私は勤勉を恐れていません:)

ありがとう!

編集: 追加: Errors

+0

CLIまたはシステムjs ?? – Aravind

+0

私はおそらく角度cliを使用してチェックアウトします。それは地域社会の多くの支援を受けています。次に、npmパッケージを見てください。https://www.npmjs.com/package/angular2-materialize – bryjohns

+0

@Aravind私はまったく新しく、CLIやSystemJSならどんな適応がありますか? –

答えて

2

あなたは

"angular2-materialize": { 
     "main": "npm:materialize-css/dist/js/materialize.js" 
    } 

更新systemjsのスクリプト参照を含めることができます。ここで私はNPM開始を使用しようとすると、コンソールが表示されていることをエラーがありますパッケージに続く.json

//packages section 

"materialize-css": { 
      "main": "dist/js/materialize" 
     } 


//mappings section 

"materialize-css": "node_modules/materialize-css", 
"angular2-materialize": "node_modules/angular2-materialize" 
+0

あなたはsystemjs.config.jsについて話していますか?申し訳ありませんが、私はこれに新しいです! –

+1

あなたはSystem.jsを使用しています。 CLIを使用している場合は、system.jsの代わりにwebpack.configファイルがあります。 – Aravind

+0

これで、何が間違っているのか分かりますか?私は受け取っている現在のコンソールのエラーを表示する画像を追加しました –