2017-02-13 4 views
0

私は、ジェネレータfountain-angular1を使用して角度アプリケーションを作成するためにYeomanを使用しましたが、角材料を使用しようとしています。さまざまな理由でngMaterialからこのエラーを取得することについての他の記事を見ましたが、決議のどれも私にとってはうまくいかなかったようです。

enter image description here

私は依存関係をインストールして、提案されているよう特定の順序でそれらを入れています。私はAngularにはかなり新しいので、私はおそらく何か基本的なものが欠けていると推測しています。私はこれを働かせようと多くの時間を費やしました。私は何が間違っているのか分かりません。どんな助けもありがとう!

index.jsファイル:

var angular = require('angular'); 

var techsModule = require('./app/techs/index'); 
require('angular-ui-router'); 
var routesConfig = require('./routes'); 

var main = require('./app/main'); 
var header = require('./app/header'); 
var title = require('./app/title'); 
var footer = require('./app/footer'); 

require('./index.scss'); 

angular 
    .module('app', [techsModule, 'ui.router', 'ngMaterial', 'ngAnimate', 'ngAria']) 
    .config(routesConfig) 
    .component('app', main) 
    .component('fountainHeader', header) 
    .component('fountainTitle', title) 
    .component('fountainFooter', footer); 

index.htmlを

<!doctype html> 
<html> 

<head> 
    <base href="/"> 
    <meta charset="utf-8"> 
    <title>FountainJS</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" /> 
</head> 

<body ng-app="app"> 
    <ui-view></ui-view> 
    <script src="/node_modules/angular/angular.js" type="text/javascript"></script> 
    <script src="/node_modules/angular-aria/angular-aria.js"></script> 
    <script src="/node_modules/angular-animate/angular-animate.js"></script> 
    <script src="/node_modules/angular-material/angular-material.js"></script> 
    <script src="index.js"></script> 

</body> 

</html> 

package.json

{ 
    "dependencies": { 
    "angular": "^1.5.9", 
    "angular-animate": "^1.5.0", 
    "angular-aria": "^1.5.0", 
    "angular-filter": "^0.5.15", 
    "angular-material": "^1.1.3", 
    "angular-moment": "^1.0.1", 
    "angular-ui-router": "~0.2.15", 
    "babel-core": "^6.0.1", 
    "webpack": "^2.2.1" 
    }, 
    "devDependencies": { 
    "@types/angular": "^1.5.16", 
    "@types/angular-mocks": "^1.5.5", 
    "@types/jquery": "^2.0.33", 
    "angular-mocks": "^1.5.0-beta.2", 
    "gulp-angular-templatecache": "^1.8.0", 
    "@types/angular-ui-router": "^1.1.34", 
    "del": "^2.0.2", 
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb", 
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4", 
    "gulp-filter": "^4.0.0", 
    "gulp-util": "^3.0.7", 
    "gulp-angular-filesort": "^1.1.1", 
    "gulp-htmlmin": "^1.3.0", 
    "gulp-insert": "^0.5.0", 
    "gulp-ng-annotate": "^1.1.0", 
    "gulp-sass": "^2.1.1", 
    "browser-sync": "^2.9.11", 
    "browser-sync-spa": "^1.0.3", 
    "karma": "^1.3.0", 
    "karma-coverage": "^1.1.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-junit-reporter": "^1.1.0", 
    "jasmine": "^2.4.1", 
    "es6-shim": "^0.35.0", 
    "karma-angular-filesort": "^1.0.0", 
    "karma-ng-html2js-preprocessor": "^0.2.0", 
    "karma-phantomjs-launcher": "^1.0.0", 
    "karma-phantomjs-shim": "^1.1.2", 
    "phantomjs-prebuilt": "^2.1.6", 
    "karma-webpack": "^1.7.0", 
    "webpack": "2.1.0-beta.20", 
    "html-webpack-plugin": "^2.9.0", 
    "style-loader": "^0.13.0", 
    "css-loader": "^0.23.1", 
    "postcss-loader": "^0.8.0", 
    "autoprefixer": "^6.2.2", 
    "json-loader": "^0.5.4", 
    "extract-text-webpack-plugin": "^2.0.0-beta.3", 
    "webpack-fail-plugin": "^1.0.5", 
    "ng-annotate-loader": "^0.0.10", 
    "html-loader": "^0.4.3", 
    "sass-loader": "^3.1.2", 
    "node-sass": "^3.4.2", 
    "eslint": "^3.2.2", 
    "eslint-config-xo-space": "^0.12.0", 
    "eslint-config-angular": "^0.5.0", 
    "eslint-plugin-angular": "^1.3.0", 
    "eslint-loader": "^1.3.0", 
    "babel-loader": "^6.2.0" 
    }, 
    "scripts": { 
    "build": "gulp", 
    "serve": "gulp serve", 
    "serve:dist": "gulp serve:dist", 
    "test": "gulp test", 
    "test:auto": "gulp test:auto" 
    }, 
    "eslintConfig": { 
    "globals": { 
     "expect": true 
    }, 
    "root": true, 
    "env": { 
     "browser": true, 
     "jasmine": true 
    }, 
    "extends": [ 
     "xo-space" 
    ] 
    } 
} 

ファイルパス:私は enter image description here

+0

node_modules'があなたのパブリックにアクセスファイル1つ上の階層である 'のように見えます。あなたは、おそらく最高のようなものを使用して1つのファイルにそれらを組み合わせている[ '一気-亭-files'を](https://www.npmjs.com/package/gulp-bower-files) – haxxxton

答えて

0

あなたは、あなたのhtmlでこの構造に存在していないapp/node_modules...への参照がそうsrc="/node_modules/..."

node_modules 
app/index.html 

を持っているので、あなたがこの

<script src="/node_modules/angular/angular.js" type="text/javascript"></script> 
<script src="/node_modules/angular-aria/angular-aria.js"></script> 
<script src="/node_modules/angular-animate/angular-animate.js"></script> 
<script src="/node_modules/angular-material/angular-material.js"></script> 

ようnode_modulesからモジュールにアクセスすることができると思いません。

src="/node_modules/whatever"src="../node_modules/whateverに変更することはできますが、サーバーに依存しますが、サーバーのルートフォルダ以外の親参照は通常許可されません。

恒久的な解決策として、node_module内のファイルをapp/somethingから参照する必要があります。リンクを作成するか、ファイルをコピーすることでこれを行うことができます。 Gulp(fountain-angular1で使用されている)には、これを行う方法が必要です。 gulp buildを実行してみてください、あなたの角のモジュールがapp/

別のオプション内のいくつかのディレクトリにコピーされているかどうかを確認し、あなたがbower install angular-aria angular-animate angular-materialを行い、その後、ソリューションのコメントやさまざまな../bower_components/angular-whatever/angular-whatever.js

+0

が応答をありがとう!だから私は、一気のビルドを試してみましたが、それは私:::: @(WebPACKの)/lib/webpack.js @マルチ角度角度-アニメイト角度-ARIA角度フィルタアンギュラ材料の角モーメントの角度-UIのようなエラーのトンを提供しますエラー: '/ Users/myname/Documents/appname/node_modules/isexe'の 'fs'を解決できません。 @。 /~/isexe/index.js 1:9-22 @ ./~/which/which.js @ ./~/node-gyp/lib/build.js @ ./~/node-gyp/lib^\。\ /.*$ ./~/node-gyp/lib/node-gyp.js @私は亭ですべての私の依存関係を再インストールする必要がありますか? – cheesydoritosandkale

+0

私はまた、../を動作しなかった最初に追加しようとしました。 – cheesydoritosandkale

1

おかげにインデックスからファイルを参照するためのものです!私は実際に私の問題が何かを知った。私はすでにnpmでインストールしていたので、index.jsファイルにAngularが必要な場所の直下に角材料を必要としました。

<script src="/node_modules/angular/angular.js" type="text/javascript"></script> 
<script src="/node_modules/angular-aria/angular-aria.js"></script> 
<script src="/node_modules/angular-animate/angular-animate.js"></script> 
<script src="/node_modules/angular-material/angular-material.js"></script> 

、その後、モジュールに追加:

angular 
    .module('app', [techsModule, 'ui.router', 'ngMaterial', 'ngAnimate']) 
    .config(routesConfig) 
    .component('app', main) 
、私はすべてのこれらの参照を使用する必要はありませんそれと

var angular = require('angular'); 
require('angular-material'); 

:それはこのように見えるために必要な

これは、この問題を抱えている人に役立ちます。本当に簡単な修正!

関連する問題