首页 文章

使用CLI构建Angular 2

提问于
浏览 次
0
  • 我使用 angular cli 构建项目 . 项目已运行，但错误将显示在控制台中 .

enter image description here

我点击VM223然后看

enter image description here

我想我忘了连接一些图书馆或类似的东西 . 我怎么解决这个问题？有人可以体验这个吗？

package.json

"dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@types/gapi": "0.0.30",
    "@types/gapi.auth2": "0.0.34",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "jquery": "^3.1.1",
    "ng2-facebook-sdk": "^1.2.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "@types/jquery": "^2.0.40",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }

angular-cli

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/ng2-facebook-sdk/dist/ng2-facebook-sdk.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

polyfills.ts

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es6/promise';

import 'core-js/es7/reflect';
import 'core-js/client/shim.min';
import 'zone.js/dist/zone';

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

    <script src="https://connect.facebook.net/en_US/sdk.js"></script>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
    <div class="wrapper">
        <main>
            <my-app>Loading...</my-app>
        </main>
    </div>
</body>
</html>
  • 当我使用 ng build -prod 时，我得到文件夹dist，其中包含应用程序所需的样式，图像，字体和其他资源 . 但我认为必须有index.html和bundle文件没有图像，字体等 .

建成之后我有：

enter image description here

也许我做错了什么？

问候

angular angular-cli

2 回答

  • 0

    首先删除节点模块：

    并使你的pacage.json像这样：

    "dependencies": {
    "@angular/common": "2.3.1",
    "@angular/compiler": "2.3.1",
    "@angular/core": "2.3.1",
    "@angular/forms": "2.3.1",
    "@angular/http": "2.3.1",
    "@angular/platform-browser": "2.3.1",
    "@angular/platform-browser-dynamic": "2.3.1",
    "@angular/router": "3.3.1",
    "@types/gapi": "0.0.30",
    "@types/gapi.auth2": "0.0.34",
    "bootstrap": "3.3.7",
    "core-js": "2.4.1",
    "es6-promise": "3.0.2",
    "es6-shim": "0.33.3",
    "jquery": "3.1.1",
    "ng2-facebook-sdk": "1.2.0",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.1",
    "ts-helpers": "1.1.1",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@types/core-js": "0.9.35",
    "@angular/compiler-cli": "2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.42",
    "@types/jquery": "2.0.40",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "protractor": "4.0.13",
    "ts-node": "1.2.1",
    "tslint": "4.3.0",
    "typescript": "2.0.3"
  }

    然后再次运行命令npm install，希望这对你有帮助 .

    回复于
  • 0

    您可能需要安装“require”软件包 .

    npm install require --save

    应该做的伎俩 .

    编辑：构建--prod是一个正常输出，它为您提供所需的所有静态文件并捆绑css和javascript .

    EDIT2：您的浏览器出现了错误？ “Require”是一个Node.JS包，它是Server Sided Scripting，这意味着它可以在您的浏览器中使用 .

    看看这个：http://requirejs.org/对于客户端 .

    EDIT3：

    var express = require('express')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic('.', {'index': ['index.html']}))
app.listen(3000)

    创建一个Server.js文件，将上面的代码放入其中，在构建它之后将其放入dist中，然后运行以下命令

    node Server.js

    您可能需要安装express和serve-static，以便检查它是否有效，将它们全部安装，以后可以随时删除它们并在以后安装它们：

    npm install -g express
npm install -g serve-static
    回复于

相关问题