Angular 2 与 Materialise答案

【问题标题】：Angular 2 with MaterializeAngular 2 与 Materialise
【发布时间】：2023-03-28 21:23:01
【问题描述】：

我正在尝试在我的 Angular 2 项目上运行 Materialize，但我认为我在 index.html 文件中对 JS 文件进行排序时遇到了问题。

我正在使用 npm 安装 Angular 2 的节点模块。我使用以下命令导入 Angular 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 Code 编译这个项目。

注意我正在尝试将此项目从引导程序转换为具体化。如果需要，我可以开始一个新项目并导入所有需要的代码。我不怕辛苦:)

谢谢！

编辑：以下是我尝试使用 npm start 时控制台显示的错误：

【问题讨论】：

CLI还是系统js？？
我可能会使用 angular-cli 进行检查。它有很多社区支持。然后看一下用于materialize的npm包-npmjs.com/package/angular2-materialize
@Aravind 我对此有点陌生，如果是 CLI 或 SystemJS 会有什么指示？

标签： node.js angular materialize

【解决方案1】：

可以在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"

【讨论】：

你说的是systemjs.config.js吗？抱歉，我是新手！
您正在使用 System.js。如果您使用 CLI，您将拥有 webpack.config 文件而不是 system.js
说了这么多，你知道哪里出了问题吗？我添加了一张图片，显示了我收到的当前控制台错误
检查你的错字有一个$符号的地方
你觉得和我的 Main.ts 有关系吗？是不是不知道在哪里可以找到“materialize-css”和“angular2-materialize”？

【解决方案2】：

使用https://github.com/InfomediaLtd/angular2-materialize。我认为这更容易，如果你足够努力的话，应该有一个@typings 解决方案。

【讨论】：