使用 CLI 构建 Angular 2答案

【问题标题】：Build Angular 2 with CLI使用 CLI 构建 Angular 2
【发布时间】：2017-07-19 03:33:26
【问题描述】：

我使用 angular cli 构建项目。项目运行，但控制台出现错误。

我点击VM223看到了

我想我忘了连接一些图书馆或类似的东西。我怎么解决这个问题？有人经历过吗？

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 和 bundles 文件。

构建后我有：

也许我做错了什么？

问候

【问题讨论】：

你在组件中使用外部模板吗
@Rahul Singh 是的，如果我理解正确的话，我正在使用
如果你正在使用类似 template:require('./your.component.html') 的东西，请尝试使用 templateUrl:'./your.component.html'
这是我的装饰器@Component({ moduleId: module.id, selector: 'my-app', templateUrl: './app.component.html', styles: [ .active a { color:#fff; } ] })
能否请您尝试卸载 Angular cli，然后重新安装它

标签： angular angular-cli

【解决方案1】：

您可能需要安装“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

【讨论】：

这不会改变我的任何地方...同样的错误
我尝试安装 requirejs 并将其连接到 angular-cli.json，但什么也没发生。我仍然是同样的错误。我真的不明白发生了什么
您正在尝试运行一些本应在服务器而不是客户端上运行的东西。问题是当 angular-cli 捆绑包时，您应该尝试使用 Node.JS 服务器提供静态文件（“dist”中的文件）。检查我的编辑 3
我已经尝试过你的建议，但我仍然有同样的错误Uncaught ReferenceError: require is not defined

【解决方案2】：

首先你删除节点模块：

让你的 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，希望对你有帮助。

【讨论】：

很遗憾，什么也没发生。