Angular 2 with Materialize

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를 사용하고 있습니다.

참고 이 프로젝트를 부트 스트랩에서 구체화하려고합니다. 필요한 경우 새 프로젝트를 시작하고 필요한 모든 코드를 가져올 수 있습니다. 나는 열심히 일하기를 두려워하지 않는다.

고마워!

편집 : 이 추가 :

출처

2017-04-22 Eddie Maiale

CLI 또는 시스템 js ?? – Aravind

아마 angular-cli를 사용하여 체크 아웃 할 것입니다. 커뮤니티 지원이 많이 있습니다. 그런 다음 구체화를위한 npm 패키지를 살펴보십시오. https://www.npmjs.com/package/angular2-materialize – bryjohns

@Aravind 나는 이것에 대해 좀 새로운 것이지만 CLI 또는 SystemJS라면 어떤 징후가 있습니까? –

당신은

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

업데이트 systemjs의 스크립트 참조를 포함 할 수 있습니다 : 여기 NPM 시작을 사용하려고하면 콘솔이 표시되어있는 오류는 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를 사용하는 경우 system.js 대신 webpack.config 파일을 사용합니다. – Aravind

그런데 무엇이 잘못 될 수 있는지 알고 있습니까? 나는 현재받은 콘솔 오류를 보여주는 이미지를 추가했습니다 –

https://github.com/InfomediaLtd/angular2-materialize을 사용하십시오. 나는 그것이 더 쉽다고 생각한다. 당신이 충분히 열심히 보면 @ 타이핑 솔루션이 있어야한다.

출처

2017-04-22 02:03:50 brohymn

Angular 2 with Materialize

답변

관련 문제