Angular 2與Materialise

我想在我的Angular 2項目上運行Materialise，但我認爲我遇到了index.html文件中JS文件排序的問題。Angular 2與Materialise

我使用NPM安裝角爲2.節點模塊我用下面的命令來導入所需角2的文件和materializecss

npm install 
npm install materialize-css

的index.html

<!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>

Main.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代碼來編譯此項目。

注意我想將這個項目從bootstrap轉化爲具體化。如果需要，我可以開始一個新項目，只需導入所需的所有代碼。我不害怕辛勤工作:)

謝謝！

編輯：這是當我嘗試使用NPM啓動控制檯顯示錯誤：

來源

2017-04-22 Eddie Maiale

CLI或系統js ?? – Aravind

我可能會使用angular-cli檢查出來。它有很多社區支持。然後看看npm包的實現 - https://www.npmjs.com/package/angular2-materialize – bryjohns

@Aravind我在這有點新，如果它是CLI或SystemJS會有什麼跡象？ –

可以包括在systemjs腳本參考

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

更新：添加下面來的package.json

//packages section 

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


//mappings section 

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

來源

2017-04-22 00:37:33 Aravind

你說的是systemjs.config.js嗎？對不起，我是新手！ –

您正在使用System.js。如果你使用CLI，你將有webpack.config文件，而不是system.js – Aravind

這樣說，你知道什麼可能是錯的嗎？我添加了一張圖片，顯示我正在收到的當前控制檯錯誤 –

使用https://github.com/InfomediaLtd/angular2-materialize。我認爲這很容易，如果你足夠堅強，應該有一個@typings解決方案。

來源

2017-04-22 02:03:50 brohymn

Angular 2與Materialise

回答

相關問題