Angular 2を使いこなすには？

Question

私はAngular2アプリを開発しようとしています。私はそれを展開するためにGruntを使いたいと思います。何らかの理由で、私が展開したindex.htmlを実行すると、私のコードが動作しません。問題のコードは、角度のあるウェブサイトの例です。私は依存関係がないか、まったく配備されていないと思います。

また、端末から「grunt」を実行すると、エラーが発生します。EBUSY：リソースがビジー状態であるか、「deploy」フォルダにロックされています。どのように私はそれを働かせることができますか？どんな助けでも大歓迎です。

ありがとうございます。 Syn。

私はNPM次package.jsonファイルでインストールを使用して依存関係をインストール：

{ "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "mapRoot": "./", 
    "module": "es6", 
    "moduleResolution": "node", 
    "noEmitOnError": true, 
    "noImplicitAny": false, 
    "outDir": "../deploy", 
    "sourceMap": true, 
    "target": "es6" 
}} 

そして、私のgruntfile：マイtsconfig.jsonはこのようになります

{ 
    "name": "MyProject", 
    "version": "0.0.1", 
    "description": "My description", 
    "main": "index.html", 
    "scripts": { 
     "postinstall": "npm dedupe" 
    }, 
    "author": "Me", 
    "license": "UNLICENSED", 
    "dependencies": { 
     "@angular/common": "2.0.0-rc.5", 
     "@angular/compiler": "2.0.0-rc.5", 
     "@angular/core": "2.0.0-rc.5", 
     "@angular/forms": "0.3.0", 
     "@angular/http": "2.0.0-rc.5", 
     "@angular/platform-browser": "2.0.0-rc.5", 
     "@angular/platform-browser-dynamic": "2.0.0-rc.5", 
     "@angular/router-deprecated": "2.0.0-rc.0", 
     "@angular/upgrade": "2.0.0-rc.0", 
     "systemjs": "0.19.27", 
     "es6-shim": "^0.35.0", 
     "reflect-metadata": "^0.1.3", 
     "rxjs": "5.0.0-beta.6", 
     "zone.js": "^0.6.12", 
     "angular2-in-memory-web-api": "0.0.5", 
     "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
     "@types/core-js": "^0.9.37", 
     "babel-cli": "^6.18.0", 
     "babel-preset-es2015": "^6.16.0", 
     "babel-runtime": "^6.11.6", 
     "concurrently": "^2.0.0", 
     "grunt": "^1.0.1", 
     "grunt-babel": "^6.0.0", 
     "grunt-contrib-clean": "^1.0.0", 
     "grunt-contrib-concat": "^1.0.1", 
     "grunt-contrib-copy": "^1.0.0", 
     "grunt-contrib-less": "^1.4.1", 
     "grunt-contrib-sass": "^1.0.0", 
     "grunt-contrib-uglify": "^2.0.0", 
     "grunt-contrib-watch": "^1.0.0", 
     "grunt-sync": "^0.6.2", 
     "lite-server": "^2.2.0", 
     "typescript": "^1.8.10", 
     "typings": "^0.8.1" 
    }, "repository": { 
     "type": "git", 
     "url": "ssh://< MY REPO>" 
    } 
} 

。 jsはこのようになります：

module.exports = function (grunt) { 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
      clean: { 
      src: ['deploy/**'] 
     }, concat: { 
      options: { 
       separator: ';' 
      }, dist: { 
       src: ['src/js/**/*.js'], 
       dest: 'deploy/js/<%= pkg.name %>.concat.js' 
      } 
     }, babel: { 
      options: { 
       presets: ["es2015"], 
       sourceMap: true, 
       compact: true, 
       babelrc: false 
      }, files: { 
       expand: true, 
       src: ['<%= concat.dist.dest %>'], 
       ext: '-babel.js' 
      } 
     }, typescript: { 
      base: { 
       src: [ 
        'js/tsd.d.ts', 
        'js/*.ts', 
        'app.ts', 
        'app.js', 
        'js/*.js' 
       ], dest:'build', 
       options: { 
        target:'ES6', 
        module:'commonjs', 
        sourceMap:true, 
        watch: { 
         after: ['copy'], 
         atBegin: true 
        } 
       } 
      } 
     }, 
     uglify: { 
      options: { 
       preserveComments: false, 
       screwIE8: true, 
       banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' 
      }, default: { 
       options: {mangle: true}, 
       files: { 
        'deploy/js/<%= pkg.name %>.min.js': ['temp/<%= pkg.name %><%=babel.files.ext %>'] 
       } 
      }, dev: { 
       options: {mangle: false, beautify: true}, 
       files: { 
        'deploy/js/<%= pkg.name %>.min.js': ['temp/<%= pkg.name %><%=babel.files.ext %>'] 
       } 
      } 
     }, sync: { 
      main: { 
       files: [{ 
        cwd: 'src', 
        src: ['**', '!**/*.js', '!**/*.scss'], 
        dest: 'deploy' 
       }, { 
        cwd: 'node_modules/@angular', 
        src: ['angular.min.js'], 
        dest: 'deploy/js' 
       }, { 
        cwd: 'node_modules/bootstrap/dist/js', 
        src: ['bootstrap.min.js'], 
        dest: 'deploy/js' 
       }, { 
        cwd: 'src', 
        src: ['**/*.html'], 
        dest: 'deploy' 
       }] 
      } 
     }, watch: { 
      JS: { 
       files: ['src/js/**'], 
       tasks: ['watcherDoJsNoUgly'], 
       options: {spawn: true} 
      }, CSS: { 
       files: ['src/css/**'], 
       tasks: ['sync'], 
       options: {spawn: true} 
      }, HTML_AND_OTHER_FILES: { 
       files: ['src/html/*.html', 'src/res/**'], 
       tasks: ['sync'], 
       options: {spawn: true} 
      } 
     } 
    }); 
    grunt.loadNpmTasks('grunt-babel'); 
    grunt.loadNpmTasks('grunt-contrib-clean'); 
    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-sync'); 
    grunt.registerTask('watcherDoJsNoUgly', ['concat', 'babel', 'uglify:dev']); 
    grunt.registerTask('watcherDoJs', ['concat', 'babel', 'uglify:default']); 
    grunt.registerTask('default', ['clean', 'watcherDoJsNoUgly', 'sync', 'watch']); 
    grunt.registerTask('deploy', ['clean', 'watcherDoJs', 'sync']) 

}; 

そして、私のフォルダ構造は次のようになります。あなたがうなり声を使うべきではありません

Answer 1

、ちょうどAngular CLIを使用しています。それは角度のあるチームによって維持され、webpackバンドラーを使用しているので、Gruntの必要はありません。

あなたはng buildを実行しますあなたのアプリをコンパイルするには、次の

ここ

ng build --prod //this will also minify/uglify,... 

が上のより深い記事でwhy you should use Angular CLI